Självstudie: Lägga till kod i bildvisningsprogrammet Windows Forms App (.NET Framework)

I den här serien med tre självstudier skapar du ett Windows Forms-program som läser in en bild och visar den. Visual Studio Integrated Design Environment (IDE) innehåller de verktyg du behöver för att skapa appen.

Kontroller använder C# eller Visual Basic-kod för att vidta de åtgärder som är associerade med dem.

I den här tredje handledningen lär du dig att:

• Lägga till händelsehanterare för dina kontroller
• Skriva kod för att öppna en dialogruta
• Skriva kod för de andra kontrollerna
• Kör ditt program

Om du vill skapa en ny Windows Forms-app med .NET följer du självstudien Skapa en Windows Forms-app med .NET. Mer information finns i Skrivbordsguide för Windows Forms .NET.

Förutsättningar

• Den här självstudien bygger på de tidigare självstudierna Skapa ett bildvisningsprogram och Lägg till användargränssnittskontroller i bildvisningsprogrammet. Slutför dem först och börja med det projekt som du skapade för dessa självstudier.

Lägga till händelsehanterare för dina kontroller

I det här avsnittet lägger du till händelsehanterare för de kontroller som du lade till i den andra självstudien, Lägg till kontroller i ett bildvisningsprogram. Programmet anropar en händelsehanterare när en åtgärd utförs, till exempel genom att välja en knapp.

1. Öppna Visual Studio. Ditt Picture Viewer-projekt visas under Öppna senaste.

2. I Windows Forms Designerdubbelklickar du på knappen Visa en bild. Du kan istället välja knappen Visa en bild i formuläret och därefter trycka på Retur.

   Visual Studio IDE öppnar en flik i huvudfönstret. För C# heter fliken Form1.cs. Om du använder Visual Basic heter fliken Form1.vb.

   På den här fliken visas kodfilen bakom formuläret.

   

   Anteckning

   Fliken Form1.vb kan visa showButton som ShowButton.

3. Fokusera på den här delen av koden.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

4. Välj fliken Windows Forms Designer igen och dubbelklicka sedan på knappen Rensa bilden för att öppna koden. Upprepa för de återstående två knapparna. Varje gång lägger Visual Studio IDE till en ny metod i formulärets kodfil.

5. Dubbelklicka på kryssrutan i Windows Forms Designer för att lägga till en checkBox1_CheckedChanged()-metod. När du markerar eller avmarkerar kryssrutan anropas den här metoden.

   Följande kodfragment visar den nya koden som du ser i kodredigeraren.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

Metoder, inklusive händelsehanterare, kan ha valfritt namn. När du lägger till en händelsehanterare med IDE skapar den ett namn baserat på kontrollens namn och händelsen som hanteras.

Till exempel kallas Click-händelsen för en knapp med namnet showButton för showButton_Click() eller ShowButton_Click(). Om du vill ändra ett kodvariabelnamn högerklickar du på variabeln i koden och väljer sedan Refactor>Byt namn. Den här åtgärden byter namn på alla instanser av variabeln i koden. Mer information finns i Byt namn på refaktoreringsfunktionen.

Skriva kod för att öppna en dialogruta

Knappen Visa en bild använder komponenten OpenFileDialog för att visa en bildfil. Den här proceduren lägger till koden som används för att anropa komponenten.

Visual Studio IDE erbjuder ett kraftfullt verktyg som heter IntelliSense. När du skriver föreslår IntelliSense möjlig kod.

1. I Windows Forms Designerdubbelklickar du på knappen Visa en bild. IDE:t flyttar markören inuti metoden showButton_Click() eller ShowButton_Click().

2. Skriv en i på den tomma linjen mellan de två klammerparenteserna { }eller mellan Private Sub... och End Sub. Ett IntelliSense- fönster öppnas.

   

3. Fönstret IntelliSense bör markera ordet if. Välj tabbtangenten två gånger för att infoga if kodfragmentet.

4. Välj sant och skriv sedan op för att skriva över det för C# eller Op för Visual Basic.

   

   IntelliSense visar openFileDialog1.

5. Välj flik för att lägga till openFileDialog1.

6. Skriv en punkt (.) eller , direkt efter openFileDialog1. IntelliSense tillhandahåller alla OpenFileDialog komponentens egenskaper och metoder. Börja skriva ShowDialog och välj Tabb. Metoden ShowDialog() visar dialogrutan Öppna fil.

7. Lägg till parenteser () omedelbart efter "g" i ShowDialog. Koden ska vara openFileDialog1.ShowDialog().

8. För C#lägger du till ett blanksteg och lägger sedan till två likhetstecken (==). För Visual Basic lägger du till ett blanksteg och använder sedan ett enda likhetstecken (=).

9. Lägg till ytterligare ett blanksteg. Använd IntelliSense för att ange DialogResult.

10. Skriv ett punkttecken för att öppna värdet DialogResult i IntelliSense-fönstret . Ange bokstaven O och välj tabbtangenten för att infoga OK.

    Notis

    Den första kodraden ska vara klar. För C#bör det likna följande.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    För Visual Basic bör det vara följande.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Lägg till följande kodrad.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Du kan kopiera och klistra in eller använda IntelliSense för att lägga till den. Den sista showButton_Click() metoden bör se ut ungefär som följande kod.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Lägg till följande kommentar i koden.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

Det är bästa praxis att alltid kommentera din kod. Kodkommenterar gör det lättare att förstå och underhålla koden i framtiden.

Skriva kod för de andra kontrollerna

Om du kör programmet nu kan du välja Visa en bild. Bildvisningsprogrammet öppnar dialogrutan Öppna fil, där du kan välja en bild som ska visas.

I det här avsnittet lägger du till koden för de andra händelsehanterarna.

1. I Windows Forms Designerdubbelklickar du på Rensa bildknappen. För C#lägger du till koden i klammerparenteser. För Visual Basic lägger du till koden mellan Private Sub och End Sub.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Dubbelklicka på knappen Ange bakgrundsfärgen och lägg till koden.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Dubbelklicka på knappen Stäng och lägg till koden.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Dubbelklicka på kryssrutan Stretch och lägg till koden.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Kör ditt program

Du kan köra programmet när som helst när du skriver det. När du har lagt till koden i föregående avsnitt är Bildvisningsprogrammet klart. Precis som i de föregående självstudierna använder du någon av följande metoder för att köra ditt program:

• Välj nyckeln F5.
• På menyraden väljer du Felsök>Starta felsökning.
• I verktygsfältet väljer du knappen Starta.

Ett fönster med rubriken Picture Viewer visas. Testa alla kontroller.

1. Välj knappen Ange bakgrundsfärg. Dialogrutan Color öppnas.

   

2. Välj en färg för att ange bakgrundsfärgen.

3. Välj Visa en bild för att visa en bild.

   

4. Välj och avmarkera Stretch.

5. Välj knappen Rensa bilden för att se till att skärmen rensas.

6. Välj Stäng för att avsluta appen.

Grattis! Du har slutfört den här serien med självstudier. Du har utfört dessa programmerings- och designuppgifter i Visual Studio IDE:

• Skapade ett Visual Studio-projekt som använder Windows Forms
• Layout har lagts till för bildvisningsprogrammet
• Knappar och en kryssruta har lagts till
• Dialogrutor har lagts till
• Händelsehanterare har lagts till för dina kontroller
• Skriven C# eller Visual Basic-kod för att hantera händelserna

Nästa steg

Fortsätt att lära dig med en annan handledningsserie om hur du skapar ett tidtagningstest i matematik.

Självstudie 2: Skapa ett tidstest för matematik