Question

我想在其中创建一个带有换行面板行为和可调整大小控制的网格，我该怎么做？也许更容易在图像中显示我想要的东西：

初始状态：

enter image description here

调整控件1的方向，右下方向，所以它需要大约2x2个单元格，然后控制2，依此类推将重新排列它在网格上的位置：

enter image description here

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

Answer 1

您只需要创建一个扩展Panel的类来创建动画。这是关于如何创建动画WrapPanel的{{3}}。然后，您需要为使用DataTemplate s来增加和缩小每个项目的项目创建Trigger。这也可以在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>

Grid-Like WrapPanel，在WPF中具有可调整大小的控件

1 个答案: