Erstellen einer Zeichenanwendung mithilfe von WPF

Artikel
09/02/2008

Aktualisiert: November 2007

In dieser Lektion lernen Sie, wie eine Windows Presentation Foundation (WPF)-Anwendung erstellt wird, mit der Sie Bilder zeichnen können. Das Erstellen einer WPF-Anwendung entspricht dem Erstellen einer Windows Forms-Anwendung. Sie ziehen Steuerelemente aus der Toolbox auf die Entwurfsoberfläche und schreiben anschließend Code zum Behandeln der Ereignisse der Steuerelemente.

Eine Videodemonstration finden Sie unter Video How to: Creating a Drawing Application by Using WPF.

Übung

So erstellen Sie eine WPF-Anwendung

Klicken Sie im Menü Datei auf Neues Projekt.

Das Dialogfeld Neues Projekt wird angezeigt. In dem Dialogfeld sind die Standardanwendungstypen aufgelistet, die mit Visual Basic Express Edition erstellt werden können.
Wählen Sie WPF-Anwendung als Projekttyp aus.
Ändern Sie den Namen der Anwendung in Ink Pad, und klicken Sie anschließend auf OK.

Visual Basic Express Edition erstellt einen neuen Ordner für das Projekt. Der Ordner hat den gleichen Namen wie das Projekt. Visual Basic Express Edition zeigt in der Entwurfsansicht außerdem das neue WPF-Fenster mit dem Titel Window1 an. Sie können jederzeit zum Code-Editor wechseln, indem Sie mit der rechten Maustaste auf die Entwurfsoberfläche klicken und anschließend Code anzeigen auswählen. Standardmäßig wird der XAML-Editor unter dem Designer angezeigt. Sie können die XAML-Ansicht jedoch als Vollbild anzeigen, indem Sie mit der rechten Maustaste auf die Entwurfsoberfläche klicken und anschließend XAML anzeigen auswählen.

So entwerfen Sie die Benutzeroberfläche

Wenn Sie das Fenster Eigenschaften nicht sehen, klicken Sie im Menü Ansicht auf Eigenschaftenfenster. In diesem Fenster werden die Eigenschaften des aktuell ausgewählten Formulars oder Steuerelements aufgelistet. Hier können Sie die vorhandenen Eigenschaftenwerte ändern.
Ä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 die Titeleigenschaft des WPF-Fensters in Ink Pad.
Ändern Sie die Background-Eigenschaft des WPF-Fensters in die Farbe Braun. Klicken Sie dazu im Dropdownfeld auf Brown, und drücken Sie dann die EINGABETASTE.

Hinweis:

Sie können das XAML-Markup auch direkt ändern, indem Sie ein Background-Attribut hinzufügen und dessen Wert auf Brown festlegen: Background="Brown".
Zum Öffnen der Toolbox klicken Sie im Menü Ansicht 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 Toolboxelemente 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 das InkCanvas-Steuerelement zur Toolbox hinzuzufügen.
Ziehen Sie ein InkCanvas-Steuerelement aus der Toolbox auf die Entwurfsoberfläche.
Legen Sie im Fenster Eigenschaften folgende Eigenschaften des InkCanvas-Steuerelements fest:

Eigenschaft

Wert

Breite

Auto

Höhe

Auto

HorizontalAlignment

Strecken

VerticalAlignment

Strecken

Ränder

9, 9, 9, 68
Ändern Sie die Farbe des InkCanvas-Steuerelements auf 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. Platzieren 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. Mit diesem Markup wird die Text-Eigenschaft auf Clear festgelegt.
```
<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. Mit diesem Markup wird die Text-Eigenschaft auf Close festgelegt.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
Die WPF-Anwendung sollte der Ink Pad-Anwendung in der folgenden Abbildung entsprechen.

WPF Ink Pad-Anwendung

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

Eigenschaft	Wert
Breite	Auto
Höhe	Auto
HorizontalAlignment	Strecken
VerticalAlignment	Strecken
Ränder	9, 9, 9, 68

So fügen Sie den Ereignishandlern für die Schaltflächen Code hinzu

Doppelklicken Sie auf Clear, und fügen Sie dem generierten Click-Ereignishandler den folgenden Code hinzu:
```
    Me.InkCanvas1.Strokes.Clear() 
```
Kehren Sie zur Entwurfsansicht 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:
```
    Me.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.