Grid kontrollen - Overlapning

Den normale Grid-opførsel er, at hver kontrol optager en celle, men nogle gange ønsker man en bestemt kontrol skal fylde flere rækker eller kolonner. Heldigvis har Grid kontrollen gjort dette meget nemt med de tilknyttede egenskaber ColumnSpan og RowSpan. Standardværdien for disse egenskaber er helt naturligt 1, men du kan angive et større tal for at få kontrollen til at overlappe flere rækker eller kolonner.

Her er et meget simpelt eksempel, hvor vi bruger ColumnSpan egenskaben:

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

Vi definerer blot to kolonner og top rækker, hvor alle tager deres lige del af pladsen. De første to knapper bruger kolonnerne normalt, men den tredje knap får vi til at fylde to kolonner på den anden række ved hjælp af ColumnSpan egenskaben.

Dette er så simpelt, at vi kunne nøjes med en kombination af paneler for at opnå den samme effekt, men til lidt mere avancerede tilfælde er det meget brugbart. Lad os prøve noget, som bedre viser, hvor effektivt, det er:

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

Med tre kolonner og tre rækker ville vi normalt have ni celler, men i dette eksempel bruger vi en kombination af række- og kolonneoverlapning til at fylde al tilgængelig plads med kun fem knapper. Som du kan se, kan en kontrol overlappe ekstra kolonner, ekstra rækker eller som med knap 4 begge dele.

Så som du kan se, er overlapning af flere kolonner og/eller rækker i en Grid kontrol meget nemt. I en senere artikel vil vi bruge overlapningen sammen med alle de andre Grid teknikker i et mere praktisk eksempel.