Gewusst wie: Erstellen einer WPF-Anwendung in C#

Artikel
09/02/2008

Aktualisiert: November 2007

In diesem Thema wird erläutert, wie Sie eine einfache Windows Presentation Foundation (WPF)-Anwendung erstellen und sich mit der integrierten Entwicklungsumgebung (IDE) von Visual C# Express Edition vertraut machen. Wie auch Windows Forms-Anwendungen können Sie WPF-Anwendungen entwerfen, indem Sie Steuerelemente aus der Toolbox auf die Entwurfsoberfläche ziehen. Neben dem Designer, dem Fenster Eigenschaften und der Toolbox verfügt die IDE eines WPF-Projekts zusätzlich über ein Fenster, in dem XAML angezeigt wird. XAML steht für Extensible Application Markup Language und wird zur Erstellung von Benutzeroberflächen verwendet. Die folgende Abbildung zeigt den Standardspeicherort des XAML-Editors.

XAML-Editor

Dieses Beispiel zeigt, wie Sie eine eigene Freihandanwendung zum Zeichnen von Bildern erstellen.

In diesem Abschnitt lernen Sie Folgendes:

Erstellen einer WPF-Anwendung
Wechseln zwischen der Codeansicht und der Entwurfsansicht
Ändern der Eigenschaften des WPF-Fensters
Verwenden des XAML-Editors
Hinzufügen eines System.Windows.Controls.InkCanvas-Steuerelements
Hinzufügen eines System.Windows.Controls.Button-Steuerelements
Erstellen von Ereignishandlern für Steuerelemente

Unter Video How to: Create a C# WPF Application finden Sie eine Videodemonstration.

So erstellen Sie eine WPF-Anwendung

Klicken Sie im Menü Datei auf Neues Projekt.

Das Dialogfeld Neues Projekt wird angezeigt. Darin sind die verschiedenen Standardanwendungstypen aufgelistet, die mit Visual C# Express Edition erstellt werden können.
Klicken Sie auf WPF-Anwendung.
Ändern Sie den Namen der Anwendung in Ink Pad.
Klicken Sie auf OK.

Visual C# Express Edition erstellt einen neuen Ordner für das nach dem Projekttitel benannte Projekt und zeigt dann das neue WPF-Fenster mit dem Namen Window1 in der Entwurfsansicht an. Sie können jederzeit in die Codeansicht wechseln, indem Sie mit der rechten Maustaste auf die Entwurfsoberfläche klicken und Code anzeigen wählen. Standardmäßig wird der XAML-Editor unter dem Designer angezeigt. Sie können das XAML-Markup jedoch im Vollbildmodus anzeigen, indem Sie mit der rechten Maustaste auf die Entwurfsoberfläche klicken und XAML anzeigen wählen.

Bei dem in der Entwurfsansicht angezeigten WPF-Fenster handelt es sich um eine visuelle Darstellung des Fensters, das beim Starten der Anwendung geöffnet wird. In der Entwurfsansicht können Sie verschiedene Steuerelemente aus der Toolbox auf das WPF-Fenster ziehen. Nachdem Sie ein Steuerelement im WPF-Fenster abgelegt haben, erstellt Visual C# automatisch den Code, mit dem das echte Steuerelement beim Ausführen des Programms richtig positioniert wird.
Wenn Sie das Fenster Eigenschaften nicht sehen, klicken Sie im Menü Ansicht auf Eigenschaftenfenster. In diesem Fenster werden die Eigenschaften des gerade ausgewählten WPF-Fensters oder Steuerelements angezeigt. Außerdem können hier die vorhandenen Werte geändert werden.
Ändern Sie die Größe des WPF-Fensters, indem Sie im Fenster Eigenschaften die Height-Eigenschaft auf 550 und die Width-Eigenschaft auf 370 festlegen.
Ändern Sie den Titel des WPF-Fensters in Ink Pad.
Ändern Sie die Background-Eigenschaft des WPF-Fensters auf die Farbe Braun. Klicken Sie dazu im Dropdownfeld auf Brown, und drücken Sie die EINGABETASTE.

Hinweis:

Sie können das XAML-Markup auch direkt ändern, indem Sie ein Background-Attribut hinzufügen und dessen Wert auf Background="Brown" festlegen.
Zum Öffnen der Toolbox klicken Sie auf Ansicht und dann auf Toolbox.
Klicken Sie mit der rechten Maustaste auf die Toolbox, und klicken Sie anschließend auf Elemente auswählen.

Das Dialogfeld Toolboxelemente auswählen wird geöffnet.
Führen Sie im Dialogfeld Textboxelemente auswählen auf der Registerkarte WPF-Komponenten einen Bildlauf nach unten durch, und wählen Sie InkCanvas aus, sodass im Kontrollkästchen ein Häkchen angezeigt wird.
Klicken Sie auf OK, um der Toolbox das InkCanvas-Steuerelement hinzuzufügen.
Ziehen Sie ein InkCanvas-Steuerelement aus der Toolbox ins WPF-Fenster.
Legen Sie im Fenster Eigenschaften folgende Eigenschaften des InkCanvas-Steuerelements fest:

Eigenschaft

Wert

Breite

Auto

Höhe

Auto

HorizontalAlignment

Strecken

VerticalAlignment

Strecken

Margin

9, 9, 9, 68
Ändern Sie die Farbe des InkCanvas-Steuerelements in Gelb, indem Sie dessen Background-Eigenschaft auf LightYellow festlegen.

Die Hintergrundfarbe des InkCanvas-Steuerelements wird zur Laufzeit hellgelb angezeigt.
Ziehen Sie zwei Button-Steuerelemente in das WPF-Fenster, und positionieren Sie beide unter dem InkCanvas-Steuerelement. Positionieren Sie button1 auf der linken und button2 auf der rechten Seite.
Wählen Sie button1 aus, und ändern Sie das XAML-Markup in der XAML-Ansicht wie im folgenden Markup gezeigt. Dieses Markup legt den Text auf Clear fest.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="button1" VerticalAlignment="Bottom"
    Width="75">Clear</Button>
```
Wählen Sie button2 aus, und ändern Sie das XAML-Markup wie im folgenden Markup gezeigt. Dieses Markup legt den Text auf Close fest.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="button2" VerticalAlignment="Bottom" Width="75"
    Click="ButtonCloseClicked">Close</Button>
```
Die WPF-Anwendung sollte der Ink Pad-Anwendung in der folgenden Abbildung entsprechen.

WPF-Freihandanwendung

Hinweis:
Sie können das XAML-Markup auch direkt ändern, indem Sie ein Background-Attribut hinzufügen und dessen Wert auf Background="Brown" festlegen.

Eigenschaft	Wert
Breite	Auto
Höhe	Auto
HorizontalAlignment	Strecken
VerticalAlignment	Strecken
Margin	9, 9, 9, 68

So erstellen Sie Ereignishandler

Doppelklicken Sie auf Clear, und fügen Sie dem generierten Click-Ereignishandler den folgenden Code hinzu:
```
    this.inkCanvas1.Strokes.Clear(); 
```
Kehren Sie zur Designer-Ansicht zurück, indem Sie mit der rechten Maustaste auf den Code-Editor und anschließend auf Designer klicken.
Doppelklicken Sie auf Close, und fügen Sie dem generierten Click-Ereignishandler den folgenden Code hinzu:
```
    this.Close();
```
Drücken Sie F5, um das Projekt auszuführen.
Zeichnen Sie nach dem Starten der Anwendung im InkCanvas-Steuerelement ein Bild. Wenn Sie einen Fehler machen, können Sie auf Clear klicken, um neu zu beginnen.
Klicken Sie auf Close, um die Anwendung zu beenden.

Siehe auch

Aufgaben

Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts

Gewusst wie: Erstellen einer C#-Konsolenanwendung

Gewusst wie: Erstellen einer C#-Windows Forms-Anwendung

Weitere Ressourcen

Erstellen der ersten Visual C#-Anwendung

Share via