Freigeben über


Gewusst wie: Erstellen eines dynamischen Layouts

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:

Grid definiert einen Bereich, in dem untergeordnete Elemente in Zeilen und Spalten positioniert werden können. StackPanel und WrapPanel positionieren untergeordnete Elemente automatisch in Zeilen und Spalten. DockPanel positioniert untergeordnete Elemente automatisch entlang der Ränder. Weitere Informationen zu den unterschiedlichen Bereichen finden Sie unter Layout mit absoluter und dynamischer Positionierung.

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 Gewusst wie: Erstellen eines Layouts auf Grundlage der absoluten Positionierung.

Festlegen von Fenstereigenschaften auf dynamisches Verhalten

Beim Erstellen eines neuen Fensters können Sie dessen Eigenschaften so festlegen, dass die Flexibilität eines dynamischen Layouts maximiert wird.

So legen Sie Fenstereigenschaften auf dynamisches Verhalten fest

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

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

    Eigenschaft

    Wert

    Wirkung

    ResizeMode

    CanResize

    Dies ermöglicht Benutzern das Ändern der Größe des Fensters, um mehr Platz für Steuerelemente zu schaffen.

    SizeToContent

    WidthAndHeight

    Dies ermöglicht eine automatische Größenanpassung des Fensters, wenn dessen Inhalt erweitert wird.

Festlegen von Bereichseigenschaften auf dynamisches Verhalten

Beim Hinzufügen eines neuen Bereichs (z. B. Grid, DockPanel oder StackPanel) zu einem Fenster oder einem anderem Bereich können Sie dessen Eigenschaften so festlegen, dass die Flexibilität eines dynamischen Layouts maximiert wird.

So legen Sie Bereichseigenschaften auf dynamisches Verhalten fest

  1. Wählen Sie in der Entwurfsansicht den Bereich aus.

  2. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für den Panel fest:

    Eigenschaft

    Wert

    Wirkung

    Width

    Auto

    Der Bereich wird an die Breite des übergeordneten Fensters oder Bereichs angepasst.

    Height

    Automatisch

    Der Bereich wird an die Höhe des übergeordneten Fensters oder Bereichs angepasst.

Festlegen von Rastereigenschaften auf dynamisches Verhalten

Mithilfe der automatischen Größenanpassung und der Größenanpassung nach Sternen können Sie Raster erstellen, deren Größe sich dynamisch an die Inhalte anpasst. Die automatische Größenanpassung wird verwendet, um Steuerelemente an deren Inhalt anzupassen. Dies gilt insbesondere, wenn der Inhalt von Steuerelementen geändert wird. Die Größenanpassung nach Sternen wird verwendet, um den verfügbaren Platz nach gewichteten Proportionen zu verteilen. Weitere Informationen finden Sie unter Star.

Wenn Sie in der Entwurfsansicht neue Zeilen und Spalten erstellen, werden diese standardmäßig entsprechend der Star-Größenanpassung erstellt. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

Tipp

Es kann einfacher erscheinen, die Zeilen und Spalten im Auflistungs-Editor hinzuzufügen und dann die Zeilenhöhen und Spaltenbreiten im XAML-Editor festzulegen.

So legen Sie Rastereigenschaften auf dynamisches Verhalten fest

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

  2. Suchen Sie im Fenster Eigenschaften die ColumnDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit den Auslassungszeichen.

    Der Auflistungs-Editor wird angezeigt.

    1. Wählen Sie eine Spaltendefinition aus, oder fügen Sie eine neue hinzu.

    2. Verwenden Sie die automatische Größenanpassung und die Größenanpassung nach Sternen, um die Spaltenbreiten auf maximale Flexibilität festzulegen.

    3. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

    Tipp

    Die Spalten, deren Eigenschaften für Breite auf Automatisch festgelegt wurden, sind vorübergehend ausgeblendet, da sie keine Inhalte aufweisen. Um dies zu vermeiden, können Sie beim Arbeiten die Größenanpassung nach Sternen verwenden und nach Abschluss zur automatischen Größenanpassung wechseln.

  3. Suchen Sie im Fenster Eigenschaften die RowDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit den Auslassungszeichen.

    Der Auflistungs-Editor wird angezeigt.

    1. Wählen Sie eine Zeilendefinition aus, oder fügen Sie eine neue hinzu.

    2. Verwenden Sie die automatische Größenanpassung und die Größenanpassung nach Sternen, um die Zeilenhöhe auf maximale Flexibilität festzulegen.

    3. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

    Tipp

    Die Zeilen, deren Eigenschaften für Höhe auf Automatisch festgelegt wurden, sind vorübergehend ausgeblendet, da sie keine Inhalte aufweisen. Um dies zu vermeiden, können Sie beim Arbeiten die Größenanpassung nach Sternen verwenden und nach Abschluss zur automatischen Größenanpassung wechseln.

Festlegen von Steuerelementeigenschaften auf dynamisches Verhalten

Beim Hinzufügen eines neuen Steuerelements zu einem Fenster oder Bereich können Sie die Eigenschaften so festlegen, dass die Flexibilität eines dynamischen Layouts maximiert wird. Das Festlegen fester Größen für Steuerelemente sollte vermieden werden, um sicherzustellen, dass die Größe der Steuerelemente dynamisch angepasst wird, wenn das Fenster oder der Inhalt geändert wird.

So legen Sie Steuerelementeigenschaften auf dynamisches Verhalten fest

  1. Wählen Sie in der Entwurfsansicht ein Steuerelement aus.

  2. Legen Sie im Fenster Eigenschaften folgende Eigenschaften für das Steuerelement fest:

    Eigenschaft

    Wert

    Effect

    Width

    Auto

    Das Steuerelement wird entsprechend der Größe des Inhalts horizontal erweitert.

    Height

    Auto

    Das Steuerelement wird entsprechend der Größe des Inhalts vertikal erweitert.

    MinWidth

    0

    Das Steuerelement kann den Anforderungen entsprechend horizontal reduziert werden.

    MinHeight

    0

    Das Steuerelement kann den Anforderungen entsprechend vertikal reduziert werden.

    MaxWidth

    Unendlich

    Das Steuerelement kann den Anforderungen entsprechend horizontal erweitert werden.

    MaxHeight

    Unendlich

    Das Steuerelement kann den Anforderungen entsprechend vertikal erweitert werden.

    Tipp

    Die angezeigten Werte sind die Standardwerte.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts

Konzepte

Ausrichtung im WPF-Designer

Layoutsystem

Übersicht über den WPF- und Silverlight-Designer

Weitere Ressourcen

Exemplarische Vorgehensweisen zum Layout