Grid kontrollen

Grid er muligvis det mest komplekse af de forskellige paneler. Et Grid kan indeholde mange rækker og kolonner. Du definerer højden for hver af rækkerne og bredden for hver af kolonnerne som enten en absolut mængde af pixels, i en procentdel af den tilgængelige plads eller som auto, hvor rækken eller kolonnen automatisk vil justere størrelsen.

I den mest simple form vil grid'et ganske enkelt tage alle de controls man indsætter i det og strække dem til at bruge det maksimalt tilgængelige plads og placere dem ovenpå hinanden.

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Som du kan se får den sidste kontrol topposition, hvilket i dette tilfælde betyder, at du ikke engang kan se den første knap. Ikke specielt brugbart i de fleste situationer, så lad og prøve at dele pladsen, hvilket er hvad gitteret gør så godt. Vi gør det ved hjælp af ColumnDefinitions og RowDefinitions. I det første eksempel holder vi os til kolonner:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

I dette eksempel har vi simpelthen delt den tilgængelige plads i to kolonner, som vil dele pladsen ligeligt ved hjælp af en "stjerne-bredde" (dette vil blive forklaret senere). På den anden knap benytter jeg en såkaldt tilknyttet egenskab til at placere knappen i den anden kolonne (0 er den første kolonne, 1 er den anden osv). Jeg kunne have brugt denne egenskab på den første knap også, men den bliver automatisk tildelt til den første kolonne og første række, hvilket er nøjagtig hvad vi ønsker her.

Som du kan se, optager kontrollerne al tilgængelig plads, hvilket er standardopførsel, når gitteret arrangeres sine underordnede kontroller. Det gør det ved at sætte HorizontalAlignment og VerticalAlignment på dets underordnede kontroller til Stretch.

I nogle tilfælde ønsker du måske kun, at de tager den plads, de behøver og/eller kontrollere hvor, de placeres i Grid-kontrollen. Den nemmeste måde at gøre dette på er at sætte HorizontalAlignment og VerticalAlignment direkte på kontrollerne, du ønsker at manipulere. Her er en modificeret udgave af eksemplet ovenover:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Som du kan se på skærmbilledet, bliver den første knap nu placeret i toppen og centreret. Den anden knap placeres i midten og højrejusteret.

Summary

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.