如何创建和使用(颜色)框矩阵 C# WPF [英] How to create and use matrix of (color) boxes C# WPF

问题描述

我必须用 WPF 应用程序做某种游戏，其中包含一些颜色框矩阵(例如 10x10).如果点击某些，它必须消除自身和周围具有相同颜色的框(如果超过 3 个)，消除后这些框会赋予一些随机颜色.

I have to do some sort of game with WPF App that contain some matrix of color boxes (ex. 10x10). On-click at some it must eliminate itself and surrounding boxes with the same color if there are more than 3, and after elimination these boxes grant some random color.

我对 WPF 应用程序还很陌生，但我对 C# 编程有一些了解，但我不知道应该从哪里开始.对我来说最困难的部分是产生"这个盒子，并像矩阵一样使用它.

I'm fairly new in WPF apps, but I have some knowledge of C# Programming and I can't figure out from where I should start. Most difficult part for me is "spawning" this boxes and use it like a matrix.

到目前为止，我发现了一些项目 我认为这对我有帮助，但实际上并非如此.

So far I found some project that I thought it will help me, but not really.

有人可以从我可以开始的地方导航吗?这是最相关的方法.

Can someone navigate from where I can start and which is most relevant way to do this.

谢谢.

推荐答案

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>

这篇关于如何创建和使用(颜色)框矩阵 C# WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！