Entwerfen einer Benutzeroberfläche für eine WPF-Anwendung

  • Artikel

Aktualisiert: November 2007

Das Entwerfen einer Benutzeroberfläche für eine WPF-Anwendung (Windows Presentation Foundation) entspricht im Prinzip dem Entwerfen einer Windows Forms-Anwendung. Sie ziehen Steuerelemente aus der Toolbox auf die Entwurfsoberfläche. Die integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) für WPF-Anwendungen weist jedoch Unterschiede auf. Zusätzlich zum Fenster Eigenschaften und zur Toolbox verfügt die WPF-IDE über einen XAML-Editor. XAML steht für Extensible Application Markup Language. Dabei handelt es sich um eine Markupsprache, die zur Erstellung von Benutzeroberflächen verwendet werden kann. Die folgende Abbildung zeigt den Standardspeicherort des XAML-Editors. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

XAML-Editor

So wie Sie bei der Windows Forms-Entwicklung Steuerelemente durch manuelles Schreiben von Code erstellen, können Sie das XAML-Markup zur Erstellung von Steuerelementen verwenden. In den meisten Fällen schreiben Sie keinen eigenen XAML-Code, sondern ziehen die Elemente aus der Toolbox und lassen Visual C# Express Edition den XAML-Code erstellen. Anschließend können Sie das XAML-Markup bearbeiten, um die Attribute des Steuerelements zu ändern, wie seine Höhe oder seinen Text. Beispiel: Das folgende XAML-Markup entspricht dem Markup, das generiert wird, wenn Sie auf ein Button-Steuerelement doppelklicken, um es einem WPF-Fenster hinzuzufügen.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

Attribute, die geändert werden können, wie z. B. Breite und Höhe, sind in der Regel rot markiert. Sie können die Werte direkt im XAML-Markup ändern, wie im folgenden Beispiel gezeigt.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

So erstellen Sie eine WPF-Anwendung

  1. Klicken Sie im Menü Datei auf Neues Projekt.

  2. Klicken Sie im Dialogfeld Neues Projekt auf WPF-Anwendung.

  3. Geben Sie im Feld NameWPF Application ein, und klicken Sie auf OK.

    Ein neues WPF-Projekt wird erstellt. Ein neues Fenster mit der Bezeichnung Window1 wird angezeigt. Das entsprechende XAML-Markup ist im XAML-Editor der Visual C# Express Edition-IDE sichtbar.

  4. Klicken Sie auf Window1, um es auszuwählen.

  5. Ändern Sie in derXAML-Ansicht das Title-Attribut des Window-Elements in WPF Application.

    Der Text in der Titelleiste von Window1 wird in WPF Application geändert.

Hinzufügen von Steuerelementen zum WPF-Fenster

Sie können Steuerelemente durch Ziehen aus der Toolbox dem WPF-Fenster hinzufügen. Weitere Informationen finden Sie unter Allgemeine WPF-Steuerelemente.

So fügen Sie dem WPF-Fenster ein Steuerelement hinzu

  1. Ziehen Sie aus der Toolbox ein TextBox-Steuerelement an den oberen rechten Rand des WPF-Fensters.

  2. Klicken Sie auf das TextBox-Steuerelement, um es auszuwählen.

  3. Klicken Sie im Fenster Eigenschaften auf den ersten Pfeil (links) der HorizontalAlignment-Eigenschaft, wie im folgenden Beispiel dargestellt.

    HorizontalAlignment-Eigenschaft

    Dadurch wird das TextBox-Steuerelement von der rechten Seite des WPF-Fensters auf die linke Seite verschoben.

  4. Legen Sie die folgenden Eigenschaften für das TextBox fest.

    Eigenschaft

    Wert

    VerticalAlignment

    Top

    Width

    75

    Height

    26

  5. Ändern Sie im XAML-Editor das Width-Attribut des TextBox-Elements in 140, und ändern Sie das Margin-Element in 30, 56, 0, 0, wie im folgenden Beispiel dargestellt.

    <TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />

    Die Breite und der Speicherort von TextBox werden geändert, nachdem Sie die neuen Werte eingegeben haben.

  6. Fügen Sie dem WPF-Fenster neben dem TextBox ein Button-Steuerelement hinzu.

  7. Ändern Sie den Text zwischen den öffnenden und schließenden Button-Tags von Button in Submit, wie im folgenden Beispiel dargestellt.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>

    Der Text auf der Schaltfläche ändert sich, nachdem Sie den neuen Wert eingegeben haben.

  8. Drücken Sie F5, um das Programm auszuführen. Ein Fenster mit dem soeben hinzugefügten Textfeld und der soeben hinzugefügten Schaltfläche wird angezeigt.

    Wenn Sie jetzt auf die Schaltfläche klicken oder Text in das Textfeld eingeben, geschieht nichts. Sie müssen den Steuerelementen Ereignishandler hinzufügen und anschließend Code für Computeranweisungen schreiben, die beim Klicken auf die Schaltfläche ausgeführt werden. Weitere Informationen finden Sie unter Gewusst wie: Erstellen von Ereignishandlern für WPF-Steuerelemente.

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts

Gewusst wie: Hinzufügen von neuen Elementen zu einem WPF-Projekt

Weitere Ressourcen

Erstellen von WPF-Anwendungen