Exemplarische Vorgehensweise: Erstellen eines Layouts auf Grundlage der absoluten Positionierung

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.

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.

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

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

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.

   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.

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.

   Der Canvas wird gestreckt, um die Breite des Window auszufüllen.

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 die 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 die 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 das 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 das 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 die 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 die 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

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" ResizeMode="CanResize" Name="MainWindow" 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

Layoutsystem

Übersicht über den WPF- und Silverlight-Designer

Weitere Ressourcen

Exemplarische Vorgehensweisen zum Layout