(0) exportieren Drucken
Alle erweitern
Dieser Artikel wurde manuell übersetzt. Bewegen Sie den Mauszeiger über die Sätze im Artikel, um den Originaltext anzuzeigen.
Übersetzung
Original

Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts

[Dieses Dokument dient lediglich Vorschauzwecken und kann in späteren Versionen geändert werden. Leere Themen sind als Platzhalter enthalten.]

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 Panel-Steuerelemente verwenden, um Elemente in Anwendungen dynamisch zu positionieren:

Wichtiger Hinweis Wichtig

Nach Möglichkeit sollte immer 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
Note Note

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. Wählen Sie im Menü Extras die Option Einstellungen importieren und exportieren aus, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

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

  • Visual Studio 2012 RC

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

So erstellen Sie das Projekt

  1. 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.

    Note Note

    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.

  2. 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.

  3. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das Window fest:

    Eigenschaft

    Wert

    Breite

    400

    Höhe

    200

    SizeToContent

    WidthAndHeight

    Tip Tip

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

  4. Klicken Sie im Menü Datei auf Alle speichern.

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

  1. Wählen Sie in der Entwurfsansicht das Raster aus.

  2. (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.

  3. 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.

  4. 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.

  5. Klicken Sie im Menü Datei auf Alle speichern.

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

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

  2. 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

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

  4. 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

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

  6. 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

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

  8. 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

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

  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

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

  12. 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

  13. Klicken Sie im Menü Datei auf Alle speichern.

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

  1. Klicken Sie im Menü Debuggen auf Debuggen starten.

    Die Anwendung wird gestartet, und das Fenster wird angezeigt.

  2. 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.

  3. Schließen Sie das Fenster.

  4. Klicken Sie im Menü Debuggen auf Debuggen starten.

    Die Anwendung wird gestartet, und das Fenster wird angezeigt.

  5. Ä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.

  6. Schließen Sie das Fenster.

  7. Wählen Sie in der Entwurfsansicht die Bezeichnung Name aus.

  8. Ä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.

  9. 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.

  10. Schließen Sie das Fenster.

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

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

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:

Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur MSDN-Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die MSDN-Website verlassen.

Möchten Sie an der Umfrage teilnehmen?
Anzeigen:
© 2014 Microsoft