在WPF中使用可调整大小的控件的类似网格的WrapPanel

Question

我想使用包装面板行为和可调整大小的控件在其中创建网格，我该如何做到这一点？ 也许是更容易显示自己想做的事的图片：

初始状态：

与方向右下角的调整大小控制1，因此将需要大约2×2的细胞，进而控制2等将重新安排它的位置对电网：

当它调整回来，应该回到初始状态。

Answer 1

您只需要创建一个扩展Panel来创建动画的类。以下是关于如何创建动画WrapPanel的very good article。然后，您需要为您的物品创建一个DataTemplate，这些物品使用Trigger s来扩大和缩小每个物品。这也可以在Trigger中生成动画。 Panel会自动移动其他项目，因为项目更改大小...取决于您在Panel.ArrangeOverride方法中放置的代码。

您将需要创建一个数据类型（类）作为您的项目（正方形）使用。这个类将需要一个字符串属性来存储框号和一个boolIsLarge属性，以让UI知道是否显示它很大或没有。我还没有真正尝试过此代码，但你可以使用类似这样您DataTemplate：我还没有定义

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

：

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

然后你每ListBoxItem这样的DataTemplate关联任何SelectedBoxTemplateDataTemplate，但你可以声明一个不同的将使用Style.Trigger激活。

最后，您将宣布你ListBox是这样的：

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