Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts

Článek
09/03/2008

Aktualisiert: November 2007

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 Windows Presentation Foundation (WPF)-Designer für Visual Studio stellt viele Panel-Steuerelemente bereit, die eine dynamische Positionierung unterstützen. Bereichssteuerelemente können kombiniert werden, indem Sie ein Bereichssteuerelement als untergeordnetes Element eines anderen hinzufügen. Sie können die folgenden Bereichssteuerelemente verwenden, um Elemente dynamisch in Anwendungen zu positionieren:

Wichtiger Hinweis:
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.

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

Hinweis:
Je nach den aktiven Einstellungen oder der verwendeten Version können die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen abweichen. Klicken Sie zum Ändern der Einstellungen im Menü Extras auf Einstellungen importieren und exportieren. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

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

Visual Studio 2008

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.

Hinweis:
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.

In WPF-Designer wird die Datei Window1.xaml 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

Tipp:
Sie können die Größe des Fensters in der Entwurfsansicht auch mithilfe der Ziehpunkte ändern.

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 Eigenschaftenwert 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 Eigenschaftenwert 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 in der Gruppe Allgemein ein Label-Steuerelement auf das Grid.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Eigenschaft	Wert
Inhalt	Abbrechen
Grid.Column	3
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Breite	75
Höhe	23
HorizontalAlignment	Strecken
VerticalAlignment	Strecken
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

Die vollständige Datei Window1.xaml sieht so aus:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" 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

Sdílet prostřednictvím