wpf - WPF 中具有可调整大小控件的类似网格的 WrapPanel

Question

我想制作一个带有包装面板行为和可调整大小控件的网格，我该怎么做？也许在图像中显示我想要的内容更容易：

初始状态：

使用右下角调整控件 1 的大小，使其占用大约 2x2 个单元格，然后控件 2 等将重新排列它在网格上的位置：

当它重新调整大小时，它应该回到初始状态。

Answer 1

您只需要创建一个扩展Panel来创建动画的类。这是一篇关于如何创建动画的非常好的文章WrapPanel。然后，您需要DataTemplate为您的项目创建一个，使用Triggers 来扩大和缩小每个项目。这也可以在Trigger. 当Panel项目改变大小时，它会自动移动其他项目......取决于您在Panel.ArrangeOverride方法中放置的代码。

您需要创建一个数据类型（类）以用作您的项目（正方形）。这个类需要一个字符串属性来存储盒子编号和一个bool IsLarge属性来让 UI 知道是否将其显示得很大。我实际上并没有尝试过这段代码，但你可以使用类似这样的代码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>

然后你像这样将DataTemplate每个关联起来ListBoxItem：

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

我没有定义任何SelectedBoxTemplate DataTemplate，但你可以声明一个不同的，使用Style.Trigger.

最后，你会声明你的ListBox东西是这样的：

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