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 to rækker, som hver tager en ligelig del af dén plads, der er til rådighed. De første to knapper (række 1) bruger kolonnerne på normal vis, men den tredje knap får vi til at fylde to kolonner i række 2, ved at bruge ColumSpan egenskaben.

Dette er så simpelt, at vi sagtens ville kunnet have brugt en kombination paneler til at opnå den samme effekt, men i bare lidt mere avancerede situationer, er det virkelig brugbart. Lad os prøve noget, der bedre viser, hvor kraftfuldt et værktøj 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.