CODEWITHSUNDEEP
c#uwp
Rosa
Rosa

Reputation: 3

How can I create a Grid in UWP that changes at runtime along with a 2D array?

I'm creating a boardgame app with UWP and C#. Currently my board is defined as a 2D array that grows as the tiles are placed. I'd like to be able to have a grid that grew with the array. I also wanted the empty spaces in the grid to be defined as buttons to be able to place the tile in the grid with a click.

I tried using this method in the backend code based on an answer I saw on this link but I don't think I'm doing things the right way.

public Grid GridGenerator(int rows, int cols, int[,] map)
    {
        Grid grid = new Grid();
        grid.Margin = new Thickness(50, 50, 50, 50);
        grid.Background = new SolidColorBrush(Windows.UI.Colors.Brown);
        grid.HorizontalAlignment = HorizontalAlignment.Center;
        grid.VerticalAlignment = VerticalAlignment.Center;

        for (int i = 0; i < rows; i++)
        {
            RowDefinition Row = new RowDefinition();
            Row.Height = new GridLength(0, GridUnitType.Auto);
            grid.RowDefinitions.Add(Row);

            for (int j = 0; j < cols; j++)
            {
                ColumnDefinition column = new ColumnDefinition();
                column.Width = new GridLength(0, GridUnitType.Auto);
                grid.ColumnDefinitions.Add(column);
                if (map[i, j] == 0)
                {
                    Button button = new Button();
                    button.MinHeight = 30;
                    button.MinWidth = 30;
                    button.Background = new SolidColorBrush(Windows.UI.Colors.AliceBlue);
                    button.Name = i.ToString() + j.ToString();
                    grid.Children.Add(button);
                    Grid.SetColumn(button, j);
                }
                else
                {
                    TextBlock text = new TextBlock();
                    text.Text = map[i, j].ToString();
                    text.HorizontalTextAlignment = (TextAlignment)HorizontalAlignment.Center;
                    text.HorizontalAlignment = HorizontalAlignment.Center;
                    text.VerticalAlignment = VerticalAlignment.Center;
                    grid.Children.Add(text);
                    Grid.SetColumn(text, j);
                }
            }
        }

Upvotes: 0

Views: 632

Answers (1)

ardget
ardget

Reputation: 2651

It seems you are adding too many ColumnDefinitions through the nested loop. Try writing each step separately so that you can grasp what to do.

public Grid GridGenerator(int rows, int cols, int[,] map)
{
    Grid grid = new Grid();
    : 
    // 1.Prepare RowDefinitions
    for (int i = 0; i < rows; i++)
    {
        RowDefinition Row = new RowDefinition();
        Row.Height = new GridLength(0, GridUnitType.Auto);
        grid.RowDefinitions.Add(Row);
    }

    // 2.Prepare ColumnDefinitions
    for (int j = 0; j < cols; j++)
    {
        ColumnDefinition column = new ColumnDefinition();
        column.Width = new GridLength(0, GridUnitType.Auto);
        grid.ColumnDefinitions.Add(column);
    }

    // 3.Add each item and set row and column.
    for (int i = 0; i < rows; i++)
    {
        for (int j = 0; j < cols; j++)
        {
            if (map[i, j] == 0)
            {
                Button button = new Button();
                :
                grid.Children.Add(button);
                Grid.SetColumn(button, j);
                Grid.SetRow(button, i); // Set row too!
            }
            :
        }
    }
    return grid;
}

Appendix

How to display the grid generated in code behind:To display it, you need to put it in XAML tree. For example, if you'd like to show it in another Grid (named "LayoutRoot") in XAML page,

<Grid x:Name="LayoutRoot"></Grid>

add it to LayoutRoot.Children in the code behind.

Grid board_grid = GridGenerator(5, 5, map);
LayoutRoot.Children.Add(board_grid);

Upvotes: 3

Related Questions