Övning – Skriva en Windows Forms-app

Slutförd

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

Windows Forms, baserat på det ärevördiga Win32-API:et, är fortfarande en populär UI-teknik för att utveckla verktyg och verktyg som inte kräver något fancy. Appar som skapats med Windows Forms körs på Windows-datorer, notebook-datorer och surfplattor och har ett välbekant utseende för nästan alla som har använt en dator.

I den här lektionen ska vi:

  • Använd Visual Studio för att skapa ett Windows Forms-projekt.
  • Lägg till gränssnitts- och kodelement i projektet för att skapa en rolig variant av ett "hello world"-program. Texten "Hello there!" ändrar färg slumpmässigt varje gång du väljer knappen Säg hej .
  • Lär dig hur du anger egenskaper och skapar händelser.

Kommentar

Datorn bör konfigureras med Windows och Visual Studio enligt beskrivningen i Learn-modulen Introduktion till Windows 10-utveckling.

Självstudiekurs om Att säga hej i Windows-formulär

Skapa projektet

  1. Öppna Visual Studio och välj Arkiv>Nytt>projekt på menyn. Med C# valt som projektspråk letar du upp och väljer Windows Forms App i projektalternativen. Ändra Namnet till något vänligt som Säg hej och välj Nästa när du är klar.

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

  2. Välj din .NET-version och välj sedan Skapa.

  3. Som standard är fönsterrutorna Verktygslåda, Solution Explorer och Egenskaper öppna. Om de inte är det öppnar du dem från menyn Visa . Expandera listan Vanliga kontroller i verktygslådan.

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

Skapa användargränssnittet

  1. När fönstret Egenskaper för Formulär1 är öppet ändrar du textposten från Formulär1 till Säg hej. Dra en knapp från verktygslådan till den nedre delen av formuläret från den andra sidan av skärmen och lägg till en textruta i den övre delen. Bredda sedan textrutan lite så att designen ser ut så här:

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

  2. Välj knappen för att visa dess egenskaper. Ändra namnet till SayHelloButton och rulla sedan ned egenskaperna och ändra egenskapen Text till Säg hej.

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

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

  3. Vi måste koppla en händelse till knappen. Du kan koppla händelsen genom att välja knappen i designvyn eller genom att välja händelseikonen i Egenskaper och sedan välja returnyckeln eller klicka på posten Klicka på händelse. Oavsett vilken metod du väljer lägger Visual Studio automatiskt till dispositionskoden för händelsen SayHelloButton_Click till filen Form1.cs och öppnar filen. Ta en snabb titt och gå sedan tillbaka till designvyn.

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

    Kommentar

    Om du av misstag stängde designvyn kan du öppna den igen genom att helt enkelt dubbelklicka på Form1.cs i Solution Explorer. Att öppna ett Formulär för Windows i designvyn är standardåtgärden i Visual Studio.

  4. Välj textrutan i designvyn för att öppna dess egenskaper. Om du använde metoden händelselista för att lägga till knapphändelsen väljer du skiftnyckeln och dokumentikonen i Egenskaper. Lämna posten Namn som textBox1. Välj plustecknet bredvid Teckensnitt och ändra sedan teckenstorleken till 24. Rulla sedan ned egenskaperna lite och ändra egenskapen Text till Hello there! och TextAlign till Center.

    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.

Lägga till koden

  1. Växla nu huvudvyn så att du tittar på Form1.cs.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. Om du vill att slumpmässiga textfärger ska visas måste du lägga till variabeln Slumpmässig rand på klassnivå. Du måste initiera den i form1-konstruktormetoden och ange en metod för att fylla en kort bytematris med slumpmässiga tal. Kopiera och klistra in, eller skriv in, följande kodrader:

    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. Om du vill ändra textfärgen varje gång knappen Säg hej är markerad lägger du till texten i SayHelloButton_Click-metoden i programmet.

        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. Ta en stund att granska koden. Om något är understruket i rött är något inte rätt. Det kan vara ett felstavat ord eller lite felplacerad kod.

Kör

Nu ska vi kompilera och köra programmet!

  1. I Visual Studio går du till felsökningsmenyn och väljer Starta utan felsökning eller väljer bara F5-tangenten. Om du har angett allt korrekt bör du se en app som körs som liknar den här:

    Screenshot that shows the app running. Hello there displays in bright green text with the Say hello button below it.

  2. Efter några sekunders byggtid väljer du upprepade gånger Säg hej och tittar på textändringsfärgen Hello there! .

Om det är vad du ser, bra gjort! Du har slutfört den här självstudien. Om inte kan du noggrant granska inställningarna för kod- och användargränssnittsegenskapen för något som har gått fel.