Sök…
Ett enkelt rutnät
<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>
Rader och kolumner definieras genom att lägga till RowDefinition
och ColumnDefinition
element till motsvarande samlingar.
Det kan finnas en obegränsad mängd barn i Grid
. För att ange vilken rad eller kolumn ett barn ska placeras i de bifogade egenskaperna används Grid.Row
och Grid.Column
. Rad- och kolumnnummer är nollbaserade. Om ingen rad eller kolumn är inställd är den standard 0
.
Barn som placeras i samma rad och kolumn ritas i definitionens ordning. Så det sist definierade barnet kommer att rita ovanför det barn som definierats tidigare.
Raster barn över flera rader / kolumner
Genom att använda de bifogade egenskaperna Grid.RowSpan
och Grid.ColumnSpan
kan barn i ett Grid
sträcka sig över flera rader eller kolumner. I följande exempel kommer den andra TextBlock
att spänna över den andra och tredje kolumnen i 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>
Synkronisera rader eller kolumner med flera rutnät
Radhöjderna eller kolumnbredderna för flera Grid
kan synkroniseras genom att ställa in en gemensam SharedSizeGroup
på raderna eller kolumnerna som ska synkroniseras. Då en förälder kontroll någonstans upp i trädet ovanför Grid
behov att få den bifogade egendom Grid.IsSharedSizeScope
inställd på 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>
I det här exemplet kommer den första kolumnen i båda Grid
alltid att ha samma bredd, även när en av dem ändras av dess innehåll.