Entwerfen einer Benutzeroberfläche für eine WPF-Anwendung (Visual Basic)

Artikel
09/02/2008

Aktualisiert: November 2007

In dieser Lektion erfahren Sie, wie Sie eine WPF-Anwendung erstellen und der Benutzeroberfläche Steuerelemente hinzufügen.

Das Entwerfen einer WPF-Anwendung (Windows Presentation Foundation) entspricht im Prinzip dem Entwerfen einer Windows Forms-Anwendung: Sie fügen einer Entwurfsoberfläche Steuerelemente hinzu. Es gibt jedoch auch mehrere Unterschiede. Außer dem Designer, dem Fenster Eigenschaften und der Toolbox verfügt eine WPF-Anwendung zusätzlich über ein Fenster, in dem XAML angezeigt wird. XAML steht für Extensible Application Markup Language. Dies ist eine Markupsprache, die zum Erstellen von Benutzeroberflächen verwendet wird. In der folgenden Abbildung ist der Standardspeicherort des XAML-Editors dargestellt. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

XAML-Editor

Wenn Sie eine herkömmliche Windows Form-Anwendung erstellen, können Sie ein Steuerelement aus der Toolbox auf ein Windows Form ziehen. Sie können auch Code zum Erstellen des Steuerelements schreiben. Wenn Sie das Steuerelement in das Formular ziehen, wird der Code automatisch generiert. Auch beim Erstellen einer WPF-Anwendung können Sie zum Erstellen eines Steuerelements XAML-Markup schreiben oder das Steuerelement in ein WPF-Fenster ziehen.

XAML-Markup besteht aus hierarchisch angeordneten Elementen. Die Elemente sind in spitze Klammern eingeschlossen, üblicherweise gibt es ein öffnendes und ein schließendes Element. Ein einfaches Button-Element wird beispielsweise folgendermaßen dargestellt: <Button></Button>. Das Aussehen eines Elements wird in der Regel durch die Definition von Attributen, wie z. B. Position, Höhe und Breite, beschrieben. Die Attribute eines Elements ähneln den Eigenschaften eines Objekts, da es sich bei ihnen um Beschreibungen der physischen Erscheinung oder des physischen Zustands handelt. Attribute stehen innerhalb der öffnenden und der schließenden Klammer des öffnenden Elements. Sie bestehen aus dem Attributnamen, dem Zuweisungszeichen (=) und dem in Anführungszeichen eingeschlossenen Wert des Attributs. Sie können die Höhe für ein Button-Element beispielsweise wie folgt angeben: <Button Height="23"></Button>.

Wenn Sie ein WPF-Steuerelement von der Toolbox auf den Designer ziehen, wird von Visual Basic Express Edition automatisch das XAML-Markup für das Steuerelement erstellt. Beispielsweise wird XAML-Markup wie im folgenden Beispiel dargestellt generiert, wenn Sie auf das System.Windows.Controls.Button-Steuerelement doppelklicken, um es dem WPF-Fenster hinzuzufügen.

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

Beachten Sie, dass für das Button-Element das Height-Attribut auf "23" und das HorizontalAlignment-Element auf "Left" festgelegt sind. Es gibt mehrere weitere Attribute, die das Element beschreiben. Diese Attribute können durch Änderung der Werte direkt im XAML-Markup geändert werden. (Standardmäßig werden diese Attribute in roter Schrift dargestellt.) Die Eigenschaften des Steuerelements können auch über das Fenster Eigenschaften geändert werden.

Übung

So erstellen Sie eine WPF-Anwendung

Klicken Sie im Menü Datei auf Neues Projekt.
Klicken Sie im Dialogfeld Neues Projekt im Bereich Vorlagen auf WPF-Anwendung.
Geben Sie im Feld NameWPFWindow ein, und klicken Sie dann auf OK.

Ein neues Windows Presentation Foundation-Projekt wird erstellt. Ein neues Fenster mit dem Namen Window1 wird angezeigt. Sein XAML-Markup wird im XAML-Editor der integrierten Entwicklungsumgebung (IDE) von Visual Basic wie folgt angezeigt:
```
<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="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Klicken Sie auf Window1, um es auszuwählen.
Ändern Sie im XAML-Editor das Title-Attribut des Window-Elements von Window1 zu WPF Application.

Das XAML-Markup wird jetzt wie folgt angezeigt:
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Der Text in der Titelleiste von Window1 ändert sich in WPF-Anwendung.

Ändern Sie probeweise andere Attribute des Fensters, z. B. Width und Height. Wenn Sie diesen Schritt abgeschlossen haben, fahren Sie mit der nächsten Prozedur fort.

Hinzufügen von Steuerelementen zum WPF-Fenster

In diesem Verfahren fügen Sie der Anwendung Steuerelemente hinzu. Klicken Sie hierfür auf das Steuerelement in der Toolbox, die sich in der Regel auf der linken Seite der Visual Basic-IDE befindet. Ziehen Sie das Steuerelement anschließend auf das WPF-Fenster. Sie legen einige Eigenschaften des Steuerelements fest und passen dann das XAML-Markup an, um den Text und die Größe des Steuerelements zu ändern.

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

Ziehen Sie aus der Toolbox ein TextBox -Steuerelement an den oberen rechten Rand des WPF-Fensters.
Wählen sie das TextBox-Steuerelement aus.
Klicken Sie im Fenster Eigenschaften auf den ersten Pfeil (links) der HorizontalAlignment-Eigenschaft, wie im folgenden Beispiel dargestellt.

HorizontalAlignment-Eigenschaft

Dadurch wird das TextBox von der rechten Seite des WPF-Fensters auf die linke Seite verschoben.
Legen Sie die folgenden Eigenschaften für das TextBox fest.

Eigenschaft

Wert

VerticalAlignment

Top

Breite

75

Höhe

26
Ä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.
Fügen Sie dem WPF-Fenster neben der TextBox ein Button-Steuerelement hinzu.
Ä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.
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. Beachten Sie, dass Sie auf die Schaltfläche klicken und Text in das Textfeld eingeben können. 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.

Eigenschaft	Wert
VerticalAlignment	Top
Breite	75
Höhe	26

Nächste Schritte

In dieser Lektion haben Sie gelernt, wie Sie eine WPF-Anwendung erstellen und dieser Steuerelemente hinzufügen. Außerdem haben Sie gelernt, wie Sie die Eigenschaften der Steuerelemente im Fenster Eigenschaften festlegen und die Attribute des WPF-Fensters und von WPF-Eigenschaften in der XAML-Ansicht ändern. In der nächsten Lektion lernen Sie einige andere Steuerelemente kennen, die in der Toolbox zur Verfügung stehen.

Nächste Lektion: Verwenden allgemeiner WPF-Steuerelemente.