WPFでサイズ変更可能なコントロールを備えたグリッドライクなWrapPanel

Question

ラップパネルの動作とサイズ変更可能なコントロールでグリッドを作成したいのですが、どうすればいいですか？ 多分それは私がイメージして欲しいものを表示するように簡単です：

初期状態：

それはように、2x2のセルの周囲に取り、その後2を制御しますので、方向右下と制御1のサイズを変更しますグリッド上での位置を再配置します：それはバックリサイズだとき

をそれが戻って初期状態にする必要があります。

Answer 1

アニメーションを作成するには、Panelの拡張クラスを作成するだけです。アニメーションを作成する方法についてはvery good articleですWrapPanel次に、Triggerを使用してそれぞれのアイテムを伸縮させるアイテムに対して、DataTemplateを作成する必要があります。これはTriggerでアニメ化することもできます。 Panelは、Panel.ArrangeOverrideメソッドに設定したコードに応じて、アイテムがサイズを変更すると自動的に他のアイテムを移動します。

アイテム（四角形）として使用するデータ型（クラス）を作成する必要があります。このクラスは、ボックス番号を格納する文字列プロパティと、それを大きく表示するかどうかをUIに知らせるためにboolIsLargeプロパティが必要です。私は実際にこのコードを試していないが、しかし、あなたにはこのようなものを使用することができ、あなたの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を関連付けます任意の SelectedBoxTemplate DataTemplateですが、 Style.Triggerを使用して有効になる別のものを宣言することができます。

最後に、あなたはこのようなあなたのListBox何か宣言します次に：グリッド内の応答のための

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