Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts

Artikel
08/10/2011

Beim dynamischen Positionieren geben Sie für untergeordnete Elemente deren Anordung und Umbruchverhalten relativ zum übergeordneten Element an. Sie können auch Fenster und Steuerelemente festlegen, die automatisch erweitert werden, wenn sich ihr Inhalt erweitert. Weitere Informationen finden Sie unter Layout mit absoluter und dynamischer Positionierung.

Der WPF Designer für Visual Studio stellt viele Panel-Steuerelemente bereit, die eine dynamische Positionierung unterstützen. Panel-Steuerelemente können kombiniert werden, indem Sie ein Panel-Steuerelement als untergeordnetes Element eines anderen hinzufügen. Sie können die folgenden Bereichssteuerelemente verwenden, um Elemente dynamisch in Anwendungen zu positionieren:

Wichtig

Nach Möglichkeit sollte ein dynamisches Layout verwendet werden. Dynamische Layouts sind die flexibelsten Layouts und passen sich an Inhaltsänderungen (z. B. Lokalisierung) an. Sie gestatten dem Endbenutzer die größte Kontrolle über die Umgebung. Ein Beispiel für ein absolutes Layout finden Sie unter Exemplarische Vorgehensweise: Erstellen eines Layouts auf Grundlage der absoluten Positionierung.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

Sie erstellen eine WPF-Anwendung.
Sie konfigurieren das standardmäßige Grid-Bereichssteuerelement.
Sie fügen dem Bereich Steuerelemente hinzu.
Sie testen das Layout.

Die folgende Abbildung zeigt, wie die Anwendung angezeigt wird.

Dynamisches Layout

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio 2010

Erstellen des Projekts

Der erste Schritt besteht im Erstellen des Projekts für die Anwendung.

So erstellen Sie das Projekt

Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen DynamicLayout. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

Tipp

Sie müssen in dieser exemplarischen Vorgehensweise keinen Code schreiben. Die Sprache, die Sie für das Projekt auswählen, ist die Sprache, die für die Code-Behind-Seiten in Ihrer Anwendung verwendet wird.

Die Datei MainWindow.xaml wird im WPF-Designer geöffnet.
Wählen Sie in der Entwurfsansicht das Fenster aus. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.
Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das Window fest:

Eigenschaft

Wert

Breite

400

Höhe

200

SizeToContent

WidthAndHeight

Tipp

Sie können die Größe des Fensters in der Entwurfsansicht auch mithilfe der Ziehpunkte ändern.
Klicken Sie im Menü Datei auf Alle speichern.

Eigenschaft	Wert
Breite	400
Höhe	200
SizeToContent	WidthAndHeight

Konfigurieren des Standardrasterbereichssteuerelements

Standardmäßig enthält die neue WPF-Anwendung ein Window mit einem Grid-Bereich. In dieser Prozedur fügen Sie dem Raster vier Zeilen und vier Spalten hinzu. Sie legen die Breite jeder Spalte auf * fest, sodass sich die verfügbare Breite gleichmäßig auf die vier Spalten verteilt. Die Höhe von drei Zeilen legen Sie auf Automatisch fest, sodass sie sich dem jeweiligen Inhalt anpassen. Die Höhe einer Zeile legen Sie auf * fest, sodass für diese Zeile die verbleibende verfügbare Höhe verwendet wird.

So fügen Sie ein Bereichssteuerelement hinzu

Wählen Sie in der Entwurfsansicht das Raster aus.
(Optional) Suchen Sie Im Fenster Eigenschaften die ShowGridLines-Eigenschaft, und aktivieren Sie das Kontrollkästchen.

Wenn die Anwendung ausgeführt wird, werden die Rasterlinien im Fenster angezeigt. Dies ist beim Debuggen hilfreich, im Produktionscode sollten Sie das Kontrollkästchen für die ShowGridLines-Eigenschaft jedoch deaktivieren.
Suchen Sie im Fenster Eigenschaften die ColumnDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit dem Auslassungszeichen.

Das Dialogfeld Auflistungs-Editor wird angezeigt.
1. Klicken Sie vier Mal auf Hinzufügen, um vier Spalten hinzuzufügen.
2. Legen Sie die Width-Eigenschaft der ersten Zeile auf Automatisch fest.
3. Legen Sie die Width-Eigenschaft der zweiten Zeile auf * fest.
4. Legen Sie die Width-Eigenschaft der dritten Zeile auf Automatisch fest.
5. Legen Sie die Width-Eigenschaft der vierten Zeile auf Automatisch fest.
6. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.
  
  Jetzt enthält das Raster vier Spalten, es wird jedoch nur eine Spalte angezeigt. Die Spalten, deren Width-Eigenschaft auf Automatisch festgelegt wurde, werden vorübergehend ausgeblendet, da sie keinen Inhalt aufweisen. Für diese exemplarische Vorgehensweise ist dies in Ordnung. Um dies künftig zu vermeiden, können Sie die Größenanpassung mit dem Sternchen verwenden, während Sie arbeiten, und den Wert auf Automatisch ändern, wenn Sie damit fertig sind.
Suchen Sie im Fenster Eigenschaften die RowDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit dem Auslassungszeichen.

Das Dialogfeld Auflistungs-Editor wird angezeigt.
1. Klicken Sie vier Mal auf Hinzufügen, um vier Zeilen hinzuzufügen.
2. Legen Sie die Height-Eigenschaft der ersten Zeile auf Automatisch fest.
3. Legen Sie die Height-Eigenschaft der zweiten Zeile auf Automatisch fest.
4. Legen Sie die Height-Eigenschaft der dritten Zeile auf * fest.
5. Legen Sie die Height-Eigenschaft der vierten Zeile auf Automatisch fest.
6. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.
  
  Jetzt enthält das Raster vier Zeilen, es wird jedoch nur eine Zeile angezeigt. Die Zeilen, deren Height-Eigenschaft auf Automatisch festgelegt wurde, sind vorübergehend ausgeblendet, da sie keinen Inhalt aufweisen. Für diese exemplarische Vorgehensweise ist dies in Ordnung. Um dies künftig zu vermeiden, können Sie die Größenanpassung mit dem Sternchen verwenden, während Sie arbeiten, und den Wert auf Automatisch ändern, wenn Sie damit fertig sind.
Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen von Steuerelementen zum Bereich

Als Nächstes fügen Sie dem Bereich Steuerelemente hinzu und positionieren diese mithilfe der angefügten Eigenschaften Column und Row von Grid dynamisch.

So fügen Sie dem Bereich Steuerelemente hinzu

Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Label-Steuerelement auf das Grid.

Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Label fest:

Eigenschaft	Wert
Inhalt	Name:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Breite	Auto
Höhe	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,20,10,10

Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Label-Steuerelement auf das Grid.

Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Label fest:

Eigenschaft	Wert
Inhalt	Kennwort:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Breite	Auto
Höhe	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,10,10,10

Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein TextBox-Steuerelement auf das Grid.
Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das TextBox fest:

Eigenschaft

Wert

Grid.Column

1

Grid.ColumnSpan

3

Grid.Row

0

Grid.RowSpan

1

Breite

Auto

Höhe

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

10,20,20,10
Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein TextBox-Steuerelement auf das Grid.
Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das TextBox fest:

Eigenschaft

Wert

Grid.Column

1

Grid.ColumnSpan

3

Grid.Row

1

Grid.RowSpan

1

Breite

Auto

Höhe

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

10,10,20,10
Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Button-Steuerelement auf das Grid.

Eigenschaft	Wert
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	0
Grid.RowSpan	1
Breite	Auto
Höhe	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,20,20,10

Eigenschaft	Wert
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	1
Grid.RowSpan	1
Breite	Auto
Höhe	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,20,10

Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Button fest:

Eigenschaft	Wert
Inhalt	OK
Grid.Column	2
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Breite	75
Höhe	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,6,20

Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Button-Steuerelement auf das Grid.

Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für die Button fest:

Eigenschaft	Wert
Inhalt	Abbrechen
Grid.Column	3
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Breite	75
Höhe	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	6,10,20,20

Klicken Sie im Menü Datei auf Alle speichern.

Testen des Layouts

Zum Schluss führen Sie die Anwendung aus und überprüfen, ob sich das Layout dynamisch ändert, wenn die Größe des Fensters geändert wird und wenn der Inhalt der Steuerelemente deren Größe überschreitet.

So testen Sie das Layout

Klicken Sie im Menü Debuggen auf Debuggen starten.

Die Anwendung wird gestartet, und das Fenster wird angezeigt.
Geben Sie in das Textfeld Name beliebige Zeichen ein, um es zu füllen. Wenn Sie das Ende des Textfelds erreichen, werden das Textfeld und das Fenster erweitert und passen sich dem von Ihnen eingegebenen Text an.
Schließen Sie das Fenster.
Klicken Sie im Menü Debuggen auf Debuggen starten.

Die Anwendung wird gestartet, und das Fenster wird angezeigt.
Ändern Sie die Größe des Fensters sowohl vertikal als auch horizontal.

Die Spalten werden gleichmäßig erweitert und nutzen den verfügbaren Platz. Die Textfelder werden gestreckt und füllen die erweiterten Spalten. Die Höhe von drei Zeilen ändert sich nicht, während die vierte Zeile erweitert wird, um den verfügbaren Platz zu nutzen.
Schließen Sie das Fenster.
Wählen Sie in der Entwurfsansicht die Bezeichnung Name aus.
Ändern Sie im Fenster Eigenschaften die Content-Eigenschaft in "Geben Sie hier Ihren vollständigen Namen ein:".

In der Entwurfsansicht wird die Bezeichnung erweitert und passt sich dem Text an.
Klicken Sie im Menü Debuggen auf Debuggen starten.

Die Anwendung wird gestartet, und das Fenster wird angezeigt. Das Label-Steuerelement zeigt den längeren Text an.
Schließen Sie das Fenster.

Die Komponenten im Zusammenhang

Nachfolgend wird die vollständige Datei MainWindow.xaml dargestellt:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Nächste Schritte

Sie können experimentieren, um zu lernen, wie Sie mit dynamischen Layouts verschiedene Effekte erzielen, indem Sie den Grid-Bereich in dieser exemplarischen Vorgehensweise durch die folgenden Bereiche ersetzen:

Siehe auch