WPF：カスタムアイテムコントロールパネルの作成方法

Question

ListBoxのカスタムアイテムコントロールパネルをデザインしたいと思います。

1. それはパネルがで作られているセルの行列を定義するプロパティint rowsとint columnsを持つべきである：3つの要件があります。これは、パネルがどのように見えるかです（色は関係のない、私はちょうどパネルは3×4の行列で12個の空のセルで構成されていることを示したかったされている）：項目内の項目数がコントロールしている場合

2. 定義されたセルの数よりも少なく、すべてのセルが描画されます。例えば。ピクチャに表示されている3x4マトリックスに配置されるアイテムが4つだけの場合、すべてのセルを描画し、その中の4つにアイテムを含める必要があります。

3. データバインディングを使用して、どのセルがどのアイテムをホストするかを設定する必要があります。たとえば、人のリストがあるとします。そのリストにはタイプPersonのアイテムが含まれ、PersonクラスにはXとYの2つのプロパティが含まれています。セルのrowにデータをバインドし、セルのcolumnにYをバインドすることで、パネルのどのセルにリストのどのセルが含まれるかを自分で設定できるようになります。

アイテムコントロールパネルを作成することが意味をなさない場合は、より良いアプローチを推奨してください。かなり正直なことに、私はこれを始める方法についても困惑しています。すべての助けに感謝します。乾杯！

Answer 1

この種の問題を解決するための有用な戦略は、ソースデータをItemsControlによって消費に適した形式に操作することです。たとえば、アイテムの2次元配列、または独自の2次元座標を含むアイテムの線形コレクションは、利用するのが難しいです。

代わりに、単純なデータ構造変換では、ItemsSourceをコレクションのコレクションにバインドできます。外側のコレクションには3つの行が含まれ、各内側のコレクションには4つのアイテムが含まれます。各項目には実際の行と列の座標を含めることができ、対応するセルにデータを表示するかどうかを処理できます。

<Grid> 
    <Grid.Resources> 
     <coll:ArrayList x:Key="sampleData"> 
      <x:Array Type="sys:String"> 
       <sys:String>1</sys:String><sys:String>2</sys:String> 
      </x:Array> 
      <x:Array Type="sys:String"> 
       <sys:String>3</sys:String<sys:String>4</sys:String> 
      </x:Array> 
     </coll:ArrayList> 
    </Grid.Resources> 
    <ItemsControl ItemsSource="{StaticResource sampleData}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <ItemsControl ItemsSource="{Binding}"> 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <StackPanel Orientation="Horizontal"/> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Border BorderBrush="Black" BorderThickness="1" Width="50" Height="50"> 
           <TextBlock Text="{Binding}"/> 
          </Border> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

生成する：あなたの返信用

+---+---+ 
| 1 | 2 | 
+---+---+ 
| 3 | 4 | 
+---+---+