TOC

This article has been localized into German by the community.

Panels:

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 zwei Zeilen und Spalten, die jeweils einen gleichen Teil des verfügbaren Platzes nutzen. Die ersten beiden Buttons nutzen die Spalten normal. Der dritte Button nutzt zwei Spalten. Wir erreichen dies, indem wir das Attribut ColumSpan 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.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!