ItemsControl + UniformGrid 作为 Panel 是显示矩阵的不​​错选择

ItemsControl + UniformGrid as a Panel is a good choice to display a matrix

查看

<ItemsControl Name="Board">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate >
            <UniformGrid Rows="10" Columns="10"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Background="Transparent" 
                        BorderBrush="Black"
                        BorderThickness="1" 
                        MouseDown="CellClick"
                        Margin="2"
                        Tag="{Binding}">
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

代码隐藏

public partial class MainWindow : Window
{
    List<Point> _board;
    public MainWindow()
    {
        InitializeComponent();
        int rows = 10;
        int columns = 10;
        _board = new List<Point>();
        for(int r = 0; r<rows; r++)
            for (int c = 0; c < columns; c++)
                _board.Add(new Point(r, c));
        Board.ItemsSource = _board;
    }

    private void CellClick(object sender, MouseButtonEventArgs e)
    {
        var border = (Border)sender;
        var point = (Point) border.Tag;
    }
}

您可以创建和使用更复杂的类型而不是 Point 并改进 ItemTemplate 以继续开发.当前 ItemTemplate 只不过是一个矩形

you can create and use more complex type instead of Point and improve ItemTemplate to continue development. current ItemTemplate is nothing more that a rectangle

我使用代码隐藏进行演示，但在 wpf MVVM 中以首选方法

编辑扩展示例

在大多数情况下，您不必直接使用 UI 元素

in most cases you don't have to work with UI elements directly

为了支持不同的颜色，我将创建一个自定义类

to support different Colors I will create a custom class

public class MatrixElement
{
    private string _color;

    public MatrixElement(int x, int y)
    {
        X = x;
        Y = y;
    }

    public int X { get; private set; }
    public int Y { get; private set; }

    public string Color
    {
        get { return _color; }
        set
        {
            _color = value;
            if (ColorChanged != null)
                ColorChanged(this, EventArgs.Empty);
        }
    }

    public event EventHandler ColorChanged;
}

窗口代码已相应更改

List<MatrixElement> _board;
public MainWindow()
{
    InitializeComponent();
    int rows = 10;
    int columns = 10;
    _board = new List<MatrixElement>();
    for (int r = 0; r < rows; r++)
        for (int c = 0; c < columns; c++)
            _board.Add(new MatrixElement(r, c){Color = "Green"});
    Board.ItemsSource = _board;
}

private void CellClick(object sender, MouseButtonEventArgs e)
{
    var border = (Border)sender;
    // each point has unique {X;Y} coordinates
    var point = (MatrixElement)border.Tag;
    // changing color in item view model
    // view is notified by binding
    point.Color = "#00BFFF";
}

ItemTemplate 稍作修改

ItemTemplate was modified a bit

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border Background="{Binding Path=Color}" 
        BorderBrush="Black"
        BorderThickness="1" 
        MouseDown="CellClick"
        Margin="2"
        Tag="{Binding}">
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>