es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agregando filas y columnas a una cuadrícula de botones en Xamarin Forms

27 Jul, 2023 Programación

He creado una definición de grid en mi archivo .xaml.

El valor de tamaño (_lattice.size) para el grid solo aparece en tiempo de ejecución.
¿Cómo puedo llenar dinámicamente el grid con filas y columnas
y también colocar botones en cada celda del grid de botones?

Mi intento:

//.xaml

<grid x:fieldmodifier="public" x:name="_tableGrid"></grid>

Código detrás (c#)

private void GenerateTable(string filepath)
{
    GamePage.statusLabel.IsVisible = true;
    GamePage.buttonStartStop.IsVisible = true;

    _initializeTerminate.InitializeGame(filepath, _lattice, _snake, _egg);

    for(Int32 k = 0; k < _lattice.size; k++)
    {
        var r = new RowDefinition();
        r.Height = 50;
        GamePage._tableGrid.RowDefinitions.Add(r);
    }

    for(Int32 l = 0; l < _lattice.size; l++)
    {
        var c = new ColumnDefinition();
        c.Width = 50;
        GamePage._tableGrid.ColumnDefinitions.Add(c);
    }

    for (Int32 i = 0; i < _lattice.size; i++)
    {
        for (Int32 j = 0; j < _lattice.size; j++)
        {
            _lattice.button_lattice[j * _lattice.size + i] = new Button();

            _lattice.button_lattice[j * _lattice.size + i].Background = Brush.White;
            _lattice.button_lattice[j * _lattice.size + i].BorderWidth = 1.0;
            _lattice.button_lattice[j * _lattice.size + i].BorderColor = Color.Yellow;

            GamePage._tableGrid.Children.Add(_lattice.button_lattice[j * _lattice.size + i]);
        }
    }
}

Lamentablemente, el código anterior no genera el comportamiento deseado.
Parece que solo hay un solo botón presente en la pantalla.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para llenar dinámicamente la cuadrícula con filas y columnas y colocar botones en cada celda, puedes seguir los siguientes pasos:

    Paso 1: Definir una cuadrícula en tu archivo XAML y darle un nombre. Por ejemplo:

    <grid x:name="myGrid"></grid>

    Paso 2: En tu archivo de código detrás (C#), crea definiciones de filas y columnas para la cuadrícula y añádelas a las colecciones RowDefinitions y ColumnDefinitions de la cuadrícula. Por ejemplo:

    for (int i = 0; i < _rowCount; i++)
{
    RowDefinition rowDef = new RowDefinition();
    myGrid.RowDefinitions.Add(rowDef);
}

for (int j = 0; j < _colCount; j++)
{
    ColumnDefinition colDef = new ColumnDefinition();
    myGrid.ColumnDefinitions.Add(colDef);
}

    Paso 3: Crea botones y añádelos a la cuadrícula. Para colocarlos en filas y columnas específicas, establece las propiedades adjuntas Grid.Row y Grid.Column de cada botón. Por ejemplo:

    for (int i = 0; i < _rowCount; i++)
{
    for (int j = 0; j < _colCount; j++)
    {
        Button btn = new Button();
        btn.Clicked += Button_Clicked;
        myGrid.Children.Add(btn, j, i); // (columna, fila)
    }
}

    En este ejemplo, también se añade un controlador de eventos Button_Clicked a cada botón.

    Aquí tienes el código completo:

    <grid x:name="myGrid"></grid>

    private void GenerateTable()
{
    for (int i = 0; i < _rowCount; i++)
    {
        RowDefinition rowDef = new RowDefinition();
        myGrid.RowDefinitions.Add(rowDef);
    }

    for (int j = 0; j < _colCount; j++)
    {
        ColumnDefinition colDef = new ColumnDefinition();
        myGrid.ColumnDefinitions.Add(colDef);
    }

    for (int i = 0; i < _rowCount; i++)
    {
        for (int j = 0; j < _colCount; j++)
        {
            Button btn = new Button();
            btn.Clicked += Button_Clicked;
            myGrid.Children.Add(btn, j, i); // (columna, fila)
        }
    }
}

private void Button_Clicked(object sender, EventArgs e)
{
    // Manejar aquí los eventos de clic en botones
}

    Este código creará una cuadrícula con _rowCount número de filas y _colCount número de columnas, y añadirá un botón a cada celda de la cuadrícula. Puedes ajustar las definiciones de filas y columnas y otras propiedades de los botones según tus necesidades.

Comments are closed.