CODEWITHSUNDEEP
c#wpfmatrixcolors
Kostov
Kostov

Reputation: 45

How to create and use matrix of (color) boxes C# WPF

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.

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.

Thank you.

Upvotes: 0

Views: 2179

Answers (1)

ASh
ASh

Reputation: 35703

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

view

<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>

code-behind

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;
    }
}

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

I used code-behind for demonstration, but in wpf MVVM in a preferred approach

EDIT extended example

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;
}

window code has changed accordingly

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 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>

Upvotes: 2

Related Questions