wpf
Control de cuadrícula

Una cuadrícula simple

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="1" Text="abc"/>
    <TextBlock Grid.Row="1" Grid.Column="1" Text="def"/>
</Grid>

Las filas y columnas se definen agregando elementos RowDefinition y ColumnDefinition a las colecciones correspondientes.

Puede haber una gran cantidad de niños en la Grid . Para especificar en qué fila o columna se colocará un hijo en las propiedades Grid.Column se utilizan Grid.Row y Grid.Column . Los números de fila y columna se basan en cero. Si no se configura ninguna fila o columna, el valor predeterminado es 0 .

Los niños colocados en la misma fila y columna se dibujan en orden de definición. Por lo tanto, el último niño definido se dibujará sobre el niño definido anteriormente.

Niños de cuadrícula que abarcan varias filas / columnas

Al usar las propiedades adjuntas Grid.RowSpan y Grid.ColumnSpan , los hijos de una Grid pueden abarcar varias filas o columnas. En el siguiente ejemplo, el segundo TextBlock abarcará la segunda y la tercera columna de la Grid .

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="2" Text="abc"/>
    <TextBlock Grid.Column="1" Grid.ColumnSpan="2" Text="def"/>
</Grid>

Sincronizando filas o columnas de múltiples grillas

Los altos de fila o los anchos de columna de múltiples Grid s se pueden sincronizar configurando un SharedSizeGroup común en las filas o columnas para sincronizar. Luego, un control primario en algún lugar del árbol sobre las Grid debe tener la propiedad adjunta Grid.IsSharedSizeScope establecida en True .

<StackPanel Grid.IsSharedSizeScope="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="MyGroup"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        [...]
    </Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="MyGroup"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        [...]
    </Grid>
</StackPanel>

En este ejemplo, la primera columna de ambas Grid siempre tendrá el mismo ancho, también cuando una de ellas cambie de tamaño por su contenido.