Grid-Like WrapPanel z możliwością zmiany rozmiaru w WPF - wpf, grid, resizable, wrappanel

Chcę utworzyć siatkę z zachowaniem panelu zawijania i kontrolą o zmiennym rozmiarze, jak to zrobić? może łatwiej jest pokazać to, co chcę na zdjęciach:

stan początkowy:

zmień rozmiar kontrolki 1 z kierunkiem w prawym dolnym rogu, aby zabrał około 2x2 komórek, następnie kontrolka 2 i tak dalej zmieni jej położenie na siatce:

po zmianie rozmiaru powinien powrócić do stanu początkowego.

Odpowiedzi:

Musisz tylko stworzyć klasę, która się rozszerza Panel tworzyć animacje. Tutaj jest bardzo dobry artykuł na temat tworzenia animowanych WrapPanel. Następnie musisz utworzyć plik DataTemplate dla twoich przedmiotów, które wykorzystują Triggers rosnąć i zmniejszać każdego z nich. Można to również animować w Trigger. The Panel automatycznie przenosi inne elementy, gdy element zmienia rozmiar ... w zależności od kodu, który wstawiłeś Panel.ArrangeOverride metoda.

Będziesz musiał utworzyć typ danych (klasę), który będzie używany jako twoje przedmioty (kwadraty). Ta klasa potrzebuje właściwości string do przechowywania numeru skrzynki i znaku bool IsLarge , aby poinformować interfejs użytkownika, czy ma być wyświetlany jako duży, czy nie. Tak naprawdę nie próbowałem tego kodu, ale możesz użyć czegoś takiego do swojego DataTemplate:

<DataTemplate DataType="{x:Type YourXmlNameSpace:YourDataType}" x:Key="BoxTemplate">
<Border Name="Border" BorderBrush="Black" BorderThickness="1" CornerRadius="3" Height="100" Width="100">
<TextBlock Text="{Binding YourTextProperty}" />
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsLarge}" Value="True"><!-- (A Boolean property) -->
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Height" From="200" To="100" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Width" From="200" To="100" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Następnie kojarzysz DataTemplate z każdym ListBoxItem lubię to:

<Style TargetType="{x:Type ListBoxItem}" x:Key="BoxStyle">
<Setter Property="ContentTemplate" Value="{StaticResource BoxTemplate}" />
<Style.Resources><!-- this removes the default blue selection colour -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00FFFAB0" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00FFFAB0" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</Style.Resources>
<Style.Triggers><!-- comment this section out, or declare a SelectedBoxTemplate DataTemplate -->
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedBoxTemplate}" />
</Trigger>
</Style.Triggers>
</Style>

Nie zdefiniowałem żadnego SelectedBoxTemplate DataTemplate, ale możesz zadeklarować inny, który zostałby aktywowany za pomocą Style.Trigger.

Wreszcie zadeklarujesz swój ListBox coś takiego:

<ListBox ItemsSource="{Binding YourCollection}" ItemContainerStyle="{StaticResource BoxStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<YourXmlNameSpace:YourAnimationPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>