Grid-Like WrapPanel with resizable control in WPF

Question

I want to make a grid with wrap panel behavior and resizable control inside it, how can I do this? maybe it's easier to show what I want in images :

initial state:

resize control 1 with direction bottom-right so it will take around 2x2 cells, then control 2 and so on will rearrange it's position on the grid:

when it's resized back it should be back to initial state.

Answer 1

You would just need to create a class that extends Panel to create the animations. Here is a very good article on how to create an animated WrapPanel. Then, you would need to create a DataTemplate for your items that uses Triggers to grow and shrink each one. This could also be animated in the Trigger. The Panel would automatically move the other items around as the item changes size... dependent on the code you put in your Panel.ArrangeOverride method.

You would need to create a data type (class) to use as your items (squares). This class would need a string property to store the box number and a bool IsLarge property to let the UI know whether to display it large or not. I haven't actually tried this code, but you could use something like this for your 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>

Then you associate the DataTemplate with each ListBoxItem like this:

<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>

I haven't defined any SelectedBoxTemplate DataTemplate, but you could declare a different one that would get activated using the Style.Trigger.

Then finally, you would declare your ListBox something like this:

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