Das Grid-Steuerelement

Das Grid ist die komplizierteste Form aller Panels. Ein Grid kann mehrere Reihen und Spalten enthalten, wobei Höhe und Breite der einzelnen Reihen und Spalten individuell einstellbar sind. Hierbei kann eine absolute Anzahl an Pixeln, ein prozentualer Anteil am verfügbaren Platz angegeben werden, oder es kann "auto" gewählt werden, wodurch die Reihe oder Spalte ihre Größe automatisch an ihren Inhalt anpasst. Das Grid wird benutzt, wenn die Funktionalität anderer Panels nicht mehr ausreichend ist, z.B. wenn mehrere Spalten benötigt werden. Es wird zudem häufig in Kombination mit anderen Panels eingesetzt.

In der grundlegendsten Form wird ein Grid alle eingefügten Elemente so skalieren, dass der verfügbare Platz maximal ausgenutzt wird, und übereinander positionieren.

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Wie Sie sehen bekommt das letzte Control die oberste Position. In diesem Fall kann man so das erste Control nicht sehen. Das ist in den meisten Situationen nicht sonderlich sinnvoll. Daher werden wir nun den Inhalt des Fensters in zwei Spalten aufteilen. Dies ist eine Aufgabe, die das Grid für uns sehr gut erledigt. Wir können dies tun, indem wir die ColumnDefinitions und die RowDefinitions nutzen. ColumnDefinitions legt die Spalten (vertikale Teilung), RowDefinitions die Zeilen (horizontale Teilung) fest. Für den Anfang nutzen wir nur die ColumnDefinitions:

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

In diesem Beispiel haben wir den vorhandenen Platz in zwei Spalten geteilt. Der vorhandene Platz wird in zwei gleich breite Spalten unterteilt. Dazu nutzen wir die sogenannte "star width" (Wir werden dies später genauer erklären). Bei dem zweiten Button nutzen wir die sogenannte Attached Eigenschaft um den Button in der zweiten Spalte zu positionieren. 0 ist die erste Spalte, 1 die zweite Spalte und so weiter. Wir hätten für den ersten Button auch die Spalte 0 festlegen können (Grid.Column="0"), aber der Button wird automatisch in der ersten Spalte (0) positioniert, wenn keine Attached Eigenschaft angegeben wurde.

Wie Sie sehen können, nutzen die jeweiligen Controls den kompletten vorhandenen Platz aus. Dies ist das Standardverhalten, wenn ein Grid seine beinhalteten Controls arrangiert. Das Grid erreicht das, indem es die Eigenschaften HorizontalAlignment und VerticalAlignment der Controls auf Stretch setzt.

In manchen Situationen möchten Sie nur den Platz nutzen, den die Controls wirklich benötigen. Oder Sie wollen die Controls an einer bestimmten Stelle in dem Grid positionieren. Der einfachste Weg hierzu ist die Eigenschaften HorizontalAlignment und VerticalAlignment direkt zu den Controls anzugeben. Hier ist die geänderte Version des vorangegangenen Beispiels:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Wie sie an dem Screenshot sehen können, wird der erste Button vertikal oben und horizontal zentriert dargestellt. Der zweite Button wird vertikal zentriert und horizontal rechts dargestellt.

Zusammenfassung

Das Grid ist ein sehr vielseitiges Panel, das viel mehr Möglichkeiten bietet, als wir bei den vorherigen Panel Formen gesehen haben. In den folgenden Artikeln werden wir uns mehr damit beschäftigen.