Übung: Schreiben einer WPF-App

  • 15 Minuten

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Windows Presentation Foundation (WPF) in Visual Studio bietet Entwicklern eine API zum Erstellen von Apps für Desktop-, Notepad- und Tablet-Computer. WPF basiert auf dem leistungsstarken DirectX-Grafiksystem und bietet viele hervorragende Benutzeroberflächenfunktionen und Effekte, die mit wenig Programmieraufwand verbunden sind.

In dieser Lerneinheit:

  • Verwenden Sie Visual Studio, um ein neues WPF-Projekt zu erstellen.
  • Fügen Sie dem Projekt Benutzeroberflächen- und Codeelemente hinzu, um eine lustige Variante eines „hello world“-Programms zu erstellen. Der Text „Hello there!“ und der Rahmen wechseln ihre Farbe immer dann nach dem Zufallsprinzip, wenn Sie die Schaltfläche Sagen Sie Hallo auswählen.
  • Erfahren Sie, wie Sie Eigenschaften festlegen und Ereignisse erstellen.

Hinweis

Wir gehen davon aus, dass Sie Ihren Computer mit Windows und Visual Studio eingerichtet haben, wie im Lernmodul Einführung in die Windows 10-Entwicklung beschrieben.

WPF-Tutorial „Say hello“

Erstellen des Projekts

  1. Öffnen Sie Visual Studio, und wählen Sie Datei>Neu>Projekt im Menü aus. Wählen Sie C# als Projektsprache aus. Wählen Sie anschließend den Projekttyp WPF-Anwendung) aus, und geben Sie im Feld Name einen benutzerfreundlichen Anzeigenamen wie z. B. Hallo sagen ein. Wählen Sie Weiter aus, wenn Sie fertig sind.

    Screenshot that shows the Configure your new project window for a WPF App with the Next button selected.

  2. Wählen Sie Ihre .NET-Version und dann Erstellen aus.

  3. Wenn das Projekt geöffnet wird, ist es ratsam, sicherzustellen, dass die Bereiche Projektmappen-Explorer und Eigenschaften geöffnet sind. Sie befinden sich standardmäßig auf der rechten Seite des Visual Studio-Fensters. Wenn sie nicht sichtbar sind, öffnen Sie das Menü Ansicht, und wählen Sie beide aus.

  4. Stellen Sie im Projektmappen-Explorer sicher, dass Sie die Namen der beiden Dateien sehen können, mit denen wir arbeiten werden: MainWindow.xaml und die zugehörige CodeBehind-Datei „MainWindow.xaml.cs“. Wählen Sie MainWindow.xaml aus, um die Datei zu öffnen.

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

Entwerfen der Benutzeroberfläche

  1. Wenn die Toolbox nicht geöffnet ist, wählen Sie das Menü Ansicht und dann Toolbox aus. Wählen Sie in der Toolbox die Option Häufig verwendete WPF-Steuerelemente aus.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Ziehen Sie eine Schaltfläche auf den unteren Teil des Designer-Layouts. Ziehen Sie dann ein TextBox-Element in den oberen Teil des Layouts, und ändern Sie seine Größe, wie Sie hier sehen:

    Screenshot that shows a button dragged onto the design layout.

    Hinweis

    Beachten Sie, wie die Einträge für Schaltfläche und TextBox dem <Raster> in der XAML-Definition hinzugefügt werden, die unterhalb des Layouts angezeigt wird.

  3. Als Nächstes möchten wir den Text aktualisieren, der in der Titelleiste des Fensters angezeigt wird. Wählen Sie im Designerlayout das Fenster aus, sodass seine Eigenschaften im Bereich Eigenschaften angezeigt werden, und ändern Sie dann den Titel in Hallo sagen.

  4. Nun möchten wir einige Eigenschaften für die neuen Benutzeroberflächenelemente festlegen. Wählen Sie die Schaltfläche so aus, dass ihre Eigenschaften im Bereich Eigenschaften angezeigt werden. Ändern Sie den Namen in etwas Einfaches wie SayHelloButton, und ändern Sie den Inhalt in den Eigenschaften Allgemein in Sagen Sie Hallo.

    Screenshot that shows the Name and Content properties set in the Properties window.

  5. Wir müssen der Schaltfläche ein Ereignis anfügen. Sie können hierzu die Schaltfläche selbst auswählen, allerdings funktioniert dies nur, wenn sich das Designer-Layout im erforderlichen Zustand befindet. Ein sicherer Weg zur Eingabe eines Ereignisses ist das Öffnen der für das UI-Element verfügbaren Ereignisse. Hierzu wählen Sie das hier im Bereich Eigenschaften angezeigte Blitzsymbol und dann einfach den Eintrag für das Click-Ereignis aus. Dadurch wird automatisch das benannte Ereignis SayHelloButton_Click erstellt, der entsprechende Codeeintrag in der Datei „MainWindow.xaml.cs“ hinzugefügt und die Datei für Sie geöffnet.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  6. Wir geben noch keinen Code ein, also wählen Sie MainWindow.xaml in der Hauptansicht aus. Wir arbeiten vorerst weiter an der Benutzeroberfläche.

  7. Wählen Sie das Textfeld aus, das Sie im Designer erstellt haben, um seine Eigenschaften anzuzeigen. Wir werden einige Änderungen an den Eigenschaften für das Textfeld vornehmen. Wenn die Ereignisse im Bereich Eigenschaften angezeigt werden, wählen Sie das Schraubenschlüsselsymbol (rechts neben dem Namen) aus, um zu den benannten Eigenschaften zurückzukehren.

  8. Ändern Sie den Eintrag Name in textBox1, und ändern Sie dann in den Layout-Eigenschaften Breite und Höhe in 360 bzw. 80.

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  9. Reduzieren Sie den Layout-Abschnitt.

  10. Ändern Sie in der Größenliste Text die Punktgröße in 36: ein geeigneter und gut sichtbarer Wert!

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  11. Beachten Sie, dass die mit einem A bezeichnete Schriftart standardmäßig für den Abschnitt Text geöffnet ist. Wählen Sie das Absatzsymbol aus, und ändern Sie die Ausrichtung in Zentriert.

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  12. Reduzieren Sie den Text-Abschnitt, und erweitern Sie Darstellung. Wählen Sie den Pfeil nach unten am unteren Rand der Liste der Eigenschaften der Darstellung aus, um die gesamte Liste anzuzeigen. Ändern Sie die Rahmendicke in 1 für den linken und oberen Rahmen und in 8 für den rechten und unteren Rahmen. Jetzt hat die Box einen Schlagschatteneffekt.

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  13. Reduzieren Sie Darstellung, und erweitern Sie Allgemein. Geben Sie den Text für das Textfeld ein: einen Anzeigenamen, z.B. Hello there!.

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

Sie haben die Elemente der Benutzeroberfläche für Ihre App jetzt fast fertig gestellt. Der <Raster>-Eintrag in der XAML-Datei sollte folgendermaßen aussehen:

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Hinweis

Ja, Sie können den XAML-Code direkt bearbeiten, numerische Werte ändern oder sogar ganze Benutzeroberflächenelemente hinzufügen. Das machen wir in diesem Tutorial nicht.

Schreiben der CodeBehind-Datei

  1. Wir können nun von der Benutzeroberfläche zum Code für unsere App wechseln. Es ist Zeit, die Datei „MainWindow.xaml.cs“ erneut zu öffnen. Wählen Sie die Datei über die Hauptansicht oder im Projektmappen-Explorer aus. Die MainWindow-Klasse sollte wie folgt aussehen:

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Stellen wir sicher, dass wir über alle erforderlichen using-Anweisungen verfügen. Stellen Sie sicher, dass Sie die hier angezeigten haben, und fügen Sie sie andernfalls hinzu. Wenn Sie mit der Bearbeitung der Datei fertig sind, können Sie optional alle unnötigen using-Anweisungen entfernen, die Visual Studio bei der Erstellung des Projekts einbezogen hat. (Nicht verwendete Namespaces werden grau dargestellt.)

    using System;
using System.Windows;
using System.Windows.Media;

  3. Die App stellt den hello-Text bei jeder Auswahl der Schaltfläche in einer zufälligen Farbe dar. Daher müssen wir ein Random-Objekt auf Klassenebene und die Methode GetRandomBytes hinzufügen, mit der zufällig Werte ausgewählt werden, die wir als RGB-Einstellungen verwenden. Kopieren Sie diesen Code, und fügen Sie ihn ein, oder geben Sie den Code selbst ein, sodass Ihre MainWindow-Klasse folgendermaßen aussieht:

    public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  4. Schließlich müssen wir GetRandomBytes aus dem Click-Ereignis der Schaltfläche aufrufen, eine zufällige Farbe aus dem zurückgegebenen Array von Bytes erstellen und dann die Textfeldeigenschaften in diese Farbe ändern. Die vollständige SayHelloButton_Click-Methode sollte wie folgt aussehen:

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

  5. Nehmen Sie sich ein oder zwei Sekunden Zeit, um Ihren Code zu überprüfen. Wenn etwas rot unterstrichen ist, dann stimmt etwas nicht. Es könnte ein falsch geschriebenes Wort sein, oder ein Codeteil befindet sich an einer Stelle, wo er nicht sein sollte.

Ausführen

Kompilieren Sie das Programm, und führen Sie es aus!

  1. Wählen Sie in Visual Studio im Menü Debuggen die Option Ohne Debuggen starten aus (oder Debuggen starten, obwohl wir in diesem Tutorial kein Debuggen durchführen), oder wählen Sie einfach die Taste F5 aus. Wenn Sie alles richtig eingegeben haben, sollten Sie eine ausgeführte App sehen, die dem folgenden Beispiel ähnelt:

    Screenshot that shows the app running. Hello there displays with red text in a red box with the Say hello button below it.

  2. Wählen Sie wiederholt die Schaltfläche Sagen Sie Hallo aus, um die Text- und Rahmenänderung für Hello there! in zufälligen Farben anzuzeigen.

Wenn Sie das sehen – gut gemacht! Sie haben dieses Tutorial abgeschlossen. Wenn dies nicht der Fall ist, überprüfen Sie nochmals Ihren Code und die Eigenschafteneinstellungen für die Benutzeroberfläche sorgfältig auf mögliche Fehler.