Benutzung des Grids: Ein Kontaktformular

In den letzten Kapiteln haben wir viel theoretische Informationen über das Grid gesammelt. In diesem Kapitel werden wir das gelernte kombinieren und in ein praxisnahes Beispiel bringen: Ein einfaches Kontaktformular.

Das gute an diesem Kontaktformular ist, dass es nur ein Beispiel für einen normalen Dialog darstellt. Sie können die erlernten Techniken für jeden beliebigen Dialog den Sie erstellen wollen, nutzen.

Der erste Schritt in dieser Aufgabe ist einfach. Wir erstellen ein simples Kontaktformular, welches drei Zeilen beinhaltet. Zwei Zeilen mit der Höhe "Auto" und eine mit der star-height "*". Diese dritte Zeile wird also den restlichen verfügbaren Platz in der Höhe ausnutzen.

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>		
		<TextBox>Name</TextBox>
		<TextBox Grid.Row="1">E-mail</TextBox>
		<TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>		
	</Grid>
</Window>

Wie Sie sehen, nimmt die letzte TextBox in der dritte Zeile den verbleibenden Platz ein. Die ersten beiden Zeilen nehmen nur den Platz ein, den sie auch benötigen, um vollständig dargestellt zu werden. Verändern Sie die Größe des Fensters und Sie werden erkennen, dass sich nur die Größe der TextBox "Comment" ändert.

In diesem sehr einfachen Beispiel gibt es keine Bezeichnungen für die einzelnen Felder. Stattdessen befindet sich der erklärende Text in der TextBox, aber so sieht ein Windows-Dialog normalerweise nicht aus. Lassen Sie uns versuchen, das Aussehen und die Benutzerfreundlichkeit ein wenig zu verbessern:

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
	<Grid Margin="10">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Label>Name: </Label>
		<TextBox Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="1">E-mail: </Label>
		<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="2">Comment: </Label>
		<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
	</Grid>
</Window>

Aber vielleicht sind Sie in einer Situation, in der das Kommentarfeld ziemlich selbsterklärend ist? In diesem Fall überspringen wir das Label und verwenden ColumnSpan, um noch mehr Platz für die TextBox "Comment" zu bekommen:

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

Wie Sie sehen können, ist das Grid ein sehr mächtiges Panel. Hoffentlich können Sie alle diese Techniken bei der Gestaltung Ihrer eigenen Dialoge verwenden.