Das Grid - Spanning

Als standardisierte Verhalten nutzt jedes Steuerelement in einem Grid genau eine Zelle. Es kann vorkommen, dass ein Steuerelement mehrere Zeilen oder Spalten belegen soll. Glücklicherweise macht dies das Grid über die zugehörigen Eigenschaften ColumnSpan und RowSpan sehr einfach. Der Standardwert für diese Eigenschaften ist "1", aber Sie können einen höhere Zahl nutzen, um das Steuerelement in mehreren Zeilen oder Spalten darzustellen.

Hier ist ein sehr einfaches Beispiel in der wir die ColumnSpan Eigenschaft nutzen:

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

Wir definieren drei Zeilen und Spalten, die jeweils einen gleichen Teil des verfügbaren Platzes nutzen. Button1 nutzt zwei Spalten, Button4 nutzt zwei Spalten und zwei Zeilen. Wir erreichen dies, indem wir die Attribute ColumnSpan bzw. RowSpan auf "2" setzen.

Dieser Fall ist so einfach, dass wir auch eine Kombination von Panels hätten nutzen können, aber für leicht kompliziertere Fälle ist dies sehr nützlich. Lassen Sie uns ein Beispiel betrachten, das besser zeigt, wie mächtig diese Eigenschaft ist.

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

Mit den drei Spalten und Zeilen sollten wir normalerweise neun Zellen erhalten. Aber in diesem Beispiel nutzen wir eine Kombination aus Column- und RowSpanning um den vorhandenen Platz mit fünf Buttons zu belegen. Button1 belegt zwei Spalten (ColumnSpan) und Button4 zwei Spalten und zwei Zeilen ColumnSpan und RowSpan). Die restlichen Buttons nutzen nur ihre eigenen Zellen.

Wie Sie erkennen ist das Spanning über mehrere Zeilen und Spalten sehr einfach. In einem späteren Abschnitt werden wir diese Technik nutzen um ein praxisnaheres Beispiel zu erstellen.