Freigeben über

Exemplarische Vorgehensweise: Erstellen eines Layouts auf Grundlage der absoluten Positionierung

  • Artikel

Aktualisiert: November 2007

Bei absoluter Positionierung werden untergeordnete Elemente durch Angabe ihrer genauen Position relativ zum übergeordneten Element angeordnet. Beispielsweise können Sie Steuerelemente in einem Bereich anordnen, indem Sie die linke und die obere Koordinate der Steuerelemente relativ zum Bereich angeben. Weitere Informationen finden Sie unter Layout mit absoluter und dynamischer Positionierung.

Windows Presentation Foundation (WPF)-Designer für Visual Studio stellt ein Canvas-Bereichssteuerelement zur Verfügung, das absolute Positionierung unterstützt. Mit dem Canvas- Bereichssteuerelement können Sie Elemente in einer Anwendung absolut positionieren.

Wichtiger Hinweis:

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. Beispiele für dynamische Layouts finden Sie unter Exemplarische Vorgehensweise: Erstellen einer größenveränderbaren Anwendung mit dem WPF-Designer und Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts.

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

  • Sie erstellen eine WPF-Anwendung.

  • Sie fügen der Anwendung ein Canvas-Bereichssteuerelement hinzu.

  • Sie fügen dem Bereich Steuerelemente hinzu.

  • Sie testen das Layout.

Die folgende Abbildung zeigt, wie die Anwendung angezeigt wird.

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

  1. Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen AbsoluteLayout. 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.

  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
    Tipp:

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

  4. (Optional) Verwenden Sie eine der folgenden Methoden, um das Ändern der Fenstergröße zu verhindern:

    1. Legen Sie im Fenster Eigenschaften die folgende Eigenschaft für das Window fest:

      Eigenschaft

      Wert

      ResizeMode

      NoResize

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

      Eigenschaft

      Wert

      MinWidth

      400

      MinHeight

      200

      MaxWidth

      400

      MaxHeight

      200

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

Hinzufügen eines Bereichssteuerelements

Standardmäßig enthält die neue WPF-Anwendung ein Window mit einem Grid-Bereich. Zum Erstellen eines auf absoluter Positionierung basierenden Layouts müssen Sie einen Canvas-Bereich verwenden. In diesem Verfahren entfernen Sie das standardmäßige Grid und fügen eine Canvas hinzu.

So fügen Sie ein Bereichssteuerelement hinzu

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

  2. Drücken Sie die ENTF-TASTE, um das Grid zu löschen.

  3. Ziehen Sie aus der Toolbox aus der Gruppe Steuerelemente ein Canvas-Steuerelement auf das Window.

  4. Legen Sie im Fenster Eigenschaften die Height-Eigenschaft des Canvas auf Auto fest.

    Das Canvas-Steuerelement wird so gestreckt, dass es die Höhe des Window ausfüllt.

  5. Legen Sie im Fenster Eigenschaften die Width-Eigenschaft des Canvas auf Auto fest.

    Das Canvas-Steuerelement wird so gestreckt, dass es die Breite des Window ausfüllt.

  6. 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 Left und Top von Canvas absolut.

So fügen Sie dem Bereich Steuerelemente hinzu

  1. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Label-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Inhalt

    Name:

    Canvas.Left

    20

    Canvas.Top

    20

    Breite

    120

    Höhe

    23

  3. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Label-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Inhalt

    Kennwort:

    Canvas.Left

    20

    Canvas.Top

    60

    Breite

    120

    Höhe

    23

  5. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein TextBox-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Canvas.Left

    160

    Canvas.Top

    20

    Breite

    200

    Höhe

    23

  7. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein TextBox-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Canvas.Left

    160

    Canvas.Top

    60

    Breite

    200

    Höhe

    23

  9. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Button-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Inhalt

    OK

    Canvas.Left

    196

    Canvas.Top

    120

    Breite

    75

    Höhe

    23

  11. Ziehen Sie aus der Toolbox aus der Gruppe Allgemein ein Button-Steuerelement auf die Canvas.

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

    Eigenschaft

    Wert

    Inhalt

    Abbrechen

    Canvas.Left

    283

    Canvas.Top

    120

    Breite

    75

    Höhe

    23

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

Testen des Layouts

Abschließend führen Sie die Anwendung aus und überprüfen, ob die Steuerelemente absolut positioniert sind.

So testen Sie das Layout

  1. (Optional) Wenn Sie in einem der vorherigen Schritte die Änderung der Fenstergröße gesperrt haben, müssen Sie dies wieder aufheben, um das nachfolgende Verfahren durchführen zu können. Legen Sie im Fenster Eigenschaften die folgenden Eigenschaften für das Window fest:

    Eigenschaft

    Wert

    MinWidth

    0

    MinHeight

    0

    MaxWidth

    Unendlich

    MaxHeight

    Unendlich

    ResizeMode

    CanResize

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

    Die Anwendung wird gestartet, und das Fenster wird angezeigt.

  3. Ändern Sie die Größe des Fensters.

    Die Steuerelemente bleiben absolut positioniert und ändern weder Größe noch Position.

  4. 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" ResizeMode="CanResize" Name="Window1" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines Layouts auf Grundlage der absoluten Positionierung

Konzepte

Ausrichtung im WPF-Designer

Das Layoutsystem

Übersicht über den WPF-Designer

Weitere Ressourcen

Exemplarische Vorgehensweisen zum Layout