wpf
Contrôle de la grille

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

Les lignes et les colonnes sont définies en ajoutant des éléments RowDefinition et ColumnDefinition aux collections correspondantes.

Il peut y avoir un nombre aberrant d'enfants dans la Grid . Pour spécifier la ligne ou la colonne qu'un enfant doit placer dans les propriétés attachées, Grid.Row et Grid.Column sont utilisées. Les numéros de ligne et de colonne sont basés sur zéro. Si aucune ligne ou colonne n'est définie, la valeur par défaut est 0 .

Les enfants placés dans la même rangée et la même colonne sont dessinés par ordre de définition. Ainsi, l'enfant défini en dernier sera dessiné au-dessus de l'enfant défini auparavant.

Enfants de la grille couvrant plusieurs lignes / colonnes

En utilisant les propriétés jointes Grid.RowSpan et Grid.ColumnSpan , les enfants d'une Grid peuvent s'étendre sur plusieurs lignes ou colonnes. Dans l'exemple suivant, le second TextBlock couvrira les deuxième et troisième colonnes 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>

Synchronisation de lignes ou de colonnes de plusieurs grilles

Les hauteurs de ligne ou les largeurs de colonne de plusieurs Grid peuvent être synchronisées en définissant un SharedSizeGroup commun sur les lignes ou les colonnes à synchroniser. Ensuite, un contrôle parent situé dans l'arborescence au-dessus de la Grid doit avoir la propriété attachée Grid.IsSharedSizeScope définie sur 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>

Dans cet exemple, la première colonne des deux Grid aura toujours la même largeur, même si l’une d’entre elles est redimensionnée par son contenu.