Das Grid - Maßeinheiten

Bis zu dieser Stelle haben wir die "Star" Höhe oder Breite genutzt. Diese legt fest, wie viel Prozent der vorhandenen Breite oder Höhe eine Spalte oder Zeile einnehmen soll. Es gibt aber noch zwei andere Möglichkeiten, diese Werte festzulegen. Absolute Werte, oder der Wert "Auto". Wir werden jetzt ein Grid erzeugen, bei dem wir diese Angaben mischen.

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

In diesem Beispiel hat die erste Spalte eine "star-width". Die zweite Spalte hat eine Breite von "Auto" und die dritte Spalte hat eine feste Breite von 100.

Das Ergebnis kann man in dem Screenshot sehen. Die zweite Spalte nutzt exakt die Breite, die der beinhaltete Button benötigt um seinen ganzen Text darzustellen. Der Wert "Auto"orientiert sich also an dem Inhalt der Spalte. Die dritte Spalte ist exakt 100 Pixel breit. Die erste Spalte, mit ihrer variablen Breite, nutzt den verbleibenden Platz.

In einem Grid, in dem es mehrere Zeilen oder Spalten mit einer variablen Breite oder Höhe gibt (star-width), teilen sich diese Zeilen oder Spalten den verbleibenden Platz. Deutlich wird dies, wenn wir das Fenster, welches das Grid beinhaltet, in der Größe ändern:

In dem ersten Screenshot (Fenster verkleinert) behält das Grid die Breite der zweiten und dritten Spalte. Das bedeutet aber, dass die erste Spalte nicht mehr den Platz bietet seinen Inhalt komplett darzustellen. Auch in dem zweiten Screenshot (Fenster vergrößert) behält das Grid die Breite der zweiten und dritten Spalte. Die erste Spalte erhält nun mehr Platz und wird entsprechend breiter.

Diese Technik kann sehr sinnvoll sein um einen responsiven Dialoge zu erstellen. Stellen Sie sich einen Dialog mit einem Kontaktformular vor. In der ersten Zeile haben Sie eine TextBox mit dem Namen, in der zweiten Zeile eine TextBox mit der E-Mail und in der dritten Zeile ein Notizfeld. Zieht der Anwender das Fenster nun größer sollen Name und E-Mail in der Größe nicht verändert werden. Aber das Notizfeld soll seine Größe abhängig von der Fenstergröße ändern. Im nächsten Kapitel wollen wir ein Kontaktformular erstellen. Wir werden dazu das Grid und Zeilen und Spalten in verschiedenen Höhen und Breiten nutzen.