またはに設定されたItemsControlを使用して、コレクションを表示できます。MDSN の例はあまり役に立たないので、ここにいくつかの例があります。ItemsPanelGridUniformGridItemsControl
とプロパティを のプロパティにバインドUniformGridできれば最も簡単ですが、それにはすべてのセルが同じサイズである必要があり、プロパティとがバインディング システムに参加する DependencyProperties であるかどうかを思い出せません。RowsColumnsViewModelRowsColumns
<ItemsControl ItemsSource="{Binding MyCollection}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{Binding ColumnCount}"
Rows="{Binding RowCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
これがうまくいかない場合は、 を として使用しGrid、およびバインディングを にItemsPanel設定できます。Grid.RowGrid.ColumnItemContainerStyle
これには、そのセルがどの行/列にあるかを示すために、各セルオブジェクトにプロパティが必要ですがObservableCollection、クリックコマンドで隣接するセルなどを決定するためにこれらが必要になると思います。
さらに、 の行/列の数をバインドする組み込みの方法がないため、バインドされた値に基づいてグリッドを動的に構築するいくつかのカスタム添付プロパティGridを使用する傾向があります。RowDefinitionsColumnDefinitions
したがって、グリッドを使用している場合の最終結果は、おそらく次のようになります。
<ItemsControl ItemsSource="{Binding Cells}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!-- This is assuming you use the attached properties linked above -->
<Grid local:GridHelpers.RowCount="{Binding Height}"
local:GridHelpers.ColumnCount="{Binding Width}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column"
Value="{Binding ColumnIndex}" />
<Setter Property="Grid.Row"
Value="{Binding RowIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
このようなモデル/ビューモデルで
public class GameViewModel
{
// These should be full properties w/ property change notification
// but leaving that out for simplicity right now
public int Height;
public int Width;
public ObservableCollection<CellModel> Cells;
}
public class CellModel
{
// Same thing, full properties w/ property change notification
public int ColumnIndex;
public int RowIndex;
public bool IsVisible;
public bool IsMine;
public int NumberAdjacentMines;
}