Übung: Schreiben einer Windows Forms-App

Abgeschlossen

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

Windows Forms, basierend auf der ehrwürdigen Win32-API, ist nach wie vor eine beliebte UI-Technologie für die Entwicklung von Tools und Hilfsprogrammen, die nichts Ausgefallenes erfordern. Mit Windows Forms erstellte Apps können auf einem Windows-Desktop-, Notebook- oder Tablet-Computer ausgeführt werden und haben ein vertrautes Aussehen für fast jeden, der schon einmal einen Computer verwendet hat.

In dieser Einheit:

  • Verwenden Sie Visual Studio, um ein Windows Forms-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!“ wechselt bei jeder Auswahl der Schaltfläche Sagen Sie Hallo seine Farbe nach dem Zufallsprinzip.
  • Erfahren Sie, wie Sie Eigenschaften festlegen und Ereignisse erstellen.

Hinweis

Ihr Computer sollte mit Windows und Visual Studio eingerichtet sein, wie im Learn-Modul Einführung in die Windows 10-Entwicklung beschrieben.

Windows Forms-Tutorial „Say Hello“

Erstellen des Projekts

  1. Öffnen Sie Visual Studio, und wählen Sie Datei>Neu>Projekt im Menü aus. Suchen Sie mit C# als Projektsprache nach Windows Forms-App in den Projektoptionen, und wählen Sie diese Option aus. Ändern Sie den Namen in einen benutzerfreundlichen Namen wie Sagen Sie Hallo, und wählen Sie Weiter aus, wenn Sie fertig sind.

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

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

  3. Standardmäßig sind die Bereiche Toolbox, Projektmappen-Explorer und Eigenschaften geöffnet. Wenn dies nicht der Fall ist, öffnen Sie sie im Menü Anzeigen. Erweitern Sie die Liste Häufig verwendete Steuerelemente in der Toolbox.

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

Erstellen der Benutzeroberfläche

  1. Ändern Sie im geöffneten Bereich Eigenschaften für Form1 den Eintrag Text aus Form1 in Say hello. Ziehen Sie von der anderen Seite des Bildschirms eine Schaltfläche aus der Toolbox auf den unteren Teil des Formulars, und fügen Sie dem oberen Teil eine TextBox hinzu. Dann verbreitern Sie das Textfeld ein wenig, sodass Ihr Entwurf diesem Beispiel ähnelt:

    Screenshot that shows a button and text box dragged onto the design layout.

  2. Wählen Sie die Schaltfläche aus, um ihre Eigenschaften anzuzeigen. Ändern Sie den Namen in SayHelloButton, und scrollen Sie dann in den Eigenschaften nach unten. Ändern Sie die Text-Eigenschaft in Say hello.

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. Wir müssen der Schaltfläche ein Ereignis anfügen. Sie können das Ereignis entweder durch Auswählen der Schaltfläche in der Designansicht oder durch Auswählen des Ereignissymbols in Eigenschaften und anschließendes Drücken der EINGABETASTE oder Auswählen des Ereigniseintrags Click anfügen. Unabhängig davon, welche Methode Sie auswählen, fügt Visual Studio Ihrer Datei Form1.cs automatisch den Gliederungscode für das Ereignis SayHelloButton_Click hinzu und öffnet die Datei. Werfen Sie einen kurzen Blick darauf, und kehren Sie dann zur Designansicht zurück.

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

    Hinweis

    Wenn Sie die Entwurfsansicht versehentlich geschlossen haben, können Sie sie erneut öffnen, indem Sie einfach im Projektmappen-Explorer auf Form1.cs doppelklicken. Das Öffnen eines Windows Forms-Formulars in der Entwurfsansicht ist die Standardaktion in Visual Studio.

  4. Wählen Sie das Textfeld in der Designansicht aus, um seine Eigenschaften zu öffnen. Wenn Sie die Ereignislistenmethode zum Hinzufügen des Schaltflächenereignisses verwendet haben, müssen Sie das Schraubenschlüssel- und Dokumentsymbol unter Eigenschaften auswählen. Behalten Sie für Name den Eintrag textBox1 bei. Wählen Sie das Pluszeichen links von Schriftart aus, und ändern Sie die Größe der Schriftart in 24. Scrollen Sie als Nächstes in den Eigenschaften ein wenig nach unten, und ändern Sie die Text-Eigenschaft in Hello there! und TextAlign in Zentriert.

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

Hinzufügen des Codes

  1. Wechseln Sie nun in die Hauptansicht, sodass „Form1.cs“ angezeigt wird.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. Um zufällige Textfarben anzuzeigen, müssen Sie die Variable auf Klassenebene namens Random rand hinzufügen. Sie müssen sie in der Form1-Konstruktormethode initialisieren und eine Methode eingeben, um ein kurzes Bytearray mit Zufallszahlen aufzufüllen. Kopieren Sie die folgenden Codezeilen und fügen oder geben Sie sie ein:

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            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, EventArgs e)
        {
    
        }
    }
    
  3. Um die Textfarbe jedes Mal zu ändern, wenn die Schaltfläche Say hello ausgewählt wird, fügen Sie Ihrem Programm den Textkörper der SayHelloButton_Click-Methode hinzu.

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. Nehmen Sie sich einen Moment Zeit, um den Code zu überprüfen. Wenn etwas rot unterstrichen ist, stimmt etwas nicht. Es könnte ein Wort falsch geschrieben sein oder Code könnte falsch platziert sein.

Ausführen

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

  1. Klicken Sie in Visual Studio im Menü Debuggen auf Starten ohne Debuggen, oder drücken Sie F5. 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 in bright green text with the Say hello button below it.

  2. Wählen Sie nach wenigen Sekunden Erstellungszeit wiederholt Say hello aus, und beobachten Sie, wie der Text Hello there! seine Farbe ändert.

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 Einstellungen der Benutzeroberflächeneigenschaften sorgfältig auf mögliche Fehler.