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.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow