Het Grid - Spreiding

Het standaard rastergedrag is dat elk besturingselement één cel beslaat, maar soms wilt u dat een bepaald besturingselement meer rijen of kolommen inneemt. Gelukkig maakt de Grid dit heel gemakkelijk, met de Attached properties ColumnSpan en RowSpan. De standaardwaarde voor deze eigenschap is uiteraard 1, maar u kunt een groter aantal specificeren om de controle meer rijen of kolommen te laten omvatten.

Hier is een heel eenvoudig voorbeeld, waarbij we de eigenschap ColumnSpan gebruiken:

<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>

We definiëren gewoon twee kolommen en twee rijen, die allemaal hun gelijke aandeel innemen. De eerste twee knoppen gebruiken gewoon de kolommen normaal, maar met de derde knop nemen we twee kolommen in beslag op de tweede rij, met behulp van het kenmerk ColumnSpan.

Dit is allemaal zo eenvoudig dat we zojuist een combinatie van panelen hadden kunnen gebruiken om hetzelfde effect te bereiken, maar voor iets meer geavanceerde gevallen is dit echt handig. Laten we iets proberen dat beter laat zien hoe krachtig dit is:

<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>

Met drie kolommen en drie rijen zouden we normaal gesproken negen cellen hebben, maar in dit voorbeeld gebruiken we een combinatie van rij- en kolomoverspanningen om alle beschikbare ruimte te vullen met slechts vijf knoppen. Zoals u kunt zien, kan een besturingselement extra kolommen, extra rijen of in het geval van knop 4: beide omvatten.

Dus zoals je kunt zien, het verspreiden over meerdere kolommen en/of rijen in een raster is zeer eenvoudig. In een later artikel zullen we gebruik maken van de spanning, samen met alle andere rastertechnieken in een meer praktisch voorbeeld.