Zelfstudie: Code toevoegen aan de Afbeeldingsviewer Windows Forms App (.NET Framework)

In deze reeks van drie zelfstudies maakt u een Windows Forms-toepassing waarmee een afbeelding wordt geladen en weergegeven. De Visual Studio Integrated Design Environment (IDE) biedt de hulpprogramma's die u nodig hebt om de app te maken.

Besturingselementen gebruiken C# of Visual Basic-code om de bijbehorende acties uit te voeren.

In deze derde zelfstudie leert u het volgende:

• Voeg gebeurtenishandlers toe aan uw besturingen
• Code schrijven om een dialoogvenster te openen
• Code schrijven voor de andere besturingselementen
• Uw toepassing uitvoeren

Als u een nieuwe Windows Forms-app met .NET wilt maken, volgt u de zelfstudie Een Windows Forms-app maken met .NET. Zie de Bureaubladhandleiding voor Windows Forms .NET voor meer informatie.

Voorwaarden

• Deze zelfstudie is gebaseerd op de vorige zelfstudies, Een toepassing voor afbeeldingsviewer maken en UI-besturingselementen toevoegen aan de afbeeldingsviewer. Voltooi ze eerst en begin met het project dat u voor deze zelfstudies hebt gemaakt.

Voeg gebeurtenishandlers toe aan uw bedieningselementen

Voeg in deze sectie gebeurtenis-handlers toe voor de besturingselementen die u in de tweede zelfstudie hebt toegevoegd, Besturingselementen toevoegen aan een afbeeldingsviewer-toepassing. Uw toepassing roept een gebeurtenis-handler aan wanneer er een actie plaatsvindt, zoals het selecteren van een knop.

1. Open Visual Studio. Uw Afbeeldingsviewer-project wordt weergegeven onder Recenteopenen.

2. Dubbelklik in de Windows Forms Designer-op de knop Een afbeelding weergeven. U kunt in plaats daarvan de knop Een afbeelding weergeven in het formulier selecteren en vervolgens op Enter-drukken.

   Visual Studio IDE opent een tabblad in het hoofdvenster. Voor C# heeft het tabblad de naam Form1.cs. Als u Visual Basic gebruikt, krijgt het tabblad de naam Form1.vb.

   Op dit tabblad wordt het codebestand achter het formulier weergegeven.

   

   Notitie

   Het tabblad Form1.vb kan showButton- weergeven als ShowButton-.

3. Richt u op dit deel van de code.

   C#

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

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

4. Kies het tabblad Windows Forms Designer opnieuw en dubbelklik op de knop De afbeelding wissen om de bijbehorende code te openen. Herhaal dit voor de resterende twee knoppen. Telkens voegt visual Studio IDE een nieuwe methode toe aan het codebestand van het formulier.

5. Dubbelklik op het besturingselement Selectievakje in Windows Forms Designer- om een checkBox1_CheckedChanged() methode toe te voegen. Wanneer u het selectievakje inschakelt of uitschakelt, wordt deze methode aangeroepen.

   In het volgende codefragment ziet u de nieuwe code die u in de code-editor ziet.

   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
   

---

Methoden, waaronder gebeurtenis-handlers, kunnen elke gewenste naam hebben. Wanneer u een eventhandler toevoegt met de IDE, wordt er een naam gemaakt op basis van de naam van de controle en de gebeurtenis die wordt verwerkt.

De gebeurtenis Click voor een knop met de naam showButton- wordt bijvoorbeeld showButton_Click() of ShowButton_Click()genoemd. Als u de naam van een codevariabele wilt wijzigen, klikt u met de rechtermuisknop op de variabele in de code en kiest u vervolgens Herstructureren>naam vanwijzigen. Met deze actie wordt de naam van alle exemplaren van die variabele in de code gewijzigd. Zie voor meer informatie Hernoemen herstructurering.

Code schrijven om een dialoogvenster te openen

De knop Een afbeelding weergeven maakt gebruik van het onderdeel OpenFileDialog om een afbeeldingsbestand weer te geven. Met deze procedure wordt de code toegevoegd die wordt gebruikt om dat onderdeel aan te roepen.

De Visual Studio IDE biedt een krachtig hulpprogramma met de naam IntelliSense-. Terwijl u typt, stelt IntelliSense mogelijke code voor.

1. Dubbelklik in Windows Forms Designer-op de knop Een afbeelding weergeven. De IDE verplaatst uw cursor naar binnen in de methode showButton_Click() of ShowButton_Click().

2. Typ een i op de lege lijn tussen de twee accolades { }of tussen Private Sub... en End Sub. Er wordt een IntelliSense-venster geopend.

   

3. Het venster IntelliSense- moet het woord ifmarkeren. Selecteer tweemaal de Tab-toets om het if fragment in te voegen.

4. Selecteer true en typ op om deze te overschrijven voor C# of Op voor Visual Basic.

   

   IntelliSense geeft openFileDialog1-weer.

5. Selecteer Tab- om openFileDialog1 toe te voegen.

6. Typ een punt (.) of punt, direct na openFileDialog1. IntelliSense biedt alle eigenschappen en methoden van het OpenFileDialog onderdeel. Begin ShowDialog te typen en selecteer Tab-. De methode ShowDialog() toont het dialoogvenster Bestand openen.

7. Voeg haakjes toe () direct na de 'g' in ShowDialog. Uw code moet openFileDialog1.ShowDialog()zijn.

8. Voeg voor C# een spatie toe en voeg vervolgens twee gelijktekens toe (==). Voeg voor Visual Basic een spatie toe en gebruik vervolgens één gelijkteken (=).

9. Voeg nog een spatie toe. Gebruik IntelliSense om DialogResult-in te voeren.

10. Typ een puntje om de DialogResult-waarde te openen in het venster IntelliSense. Voer de letter O in en kies de toets Tab om OK-in te voegen.

    Notitie

    De eerste regel van code moet voltooid zijn. Voor C# moet deze er ongeveer als volgt uitzien.

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

    Voor Visual Basic moet dit het volgende zijn.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Voeg de volgende coderegel toe.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    U kunt IntelliSense kopiëren en plakken of gebruiken om deze toe te voegen. De uiteindelijke showButton_Click()-methode moet er ongeveer uitzien als de volgende code.

    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. Voeg de volgende opmerking toe aan uw code.

   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
   

---

Het is de aanbevolen procedure om altijd commentaar te geven op uw code. Met codeopmerkingen kunt u uw code in de toekomst beter begrijpen en onderhouden.

Code schrijven voor de andere besturingselementen

Als u uw toepassing nu uitvoert, kunt u "Een afbeelding weergeven"selecteren. Afbeeldingsviewer opent het dialoogvenster Bestand openen, waarin u een afbeelding kunt selecteren die u wilt weergeven.

Voeg in deze sectie de code toe voor de andere gebeurtenis-handlers.

1. Dubbelklik in Windows Forms Designer-op de knop Wissen de afbeelding. Voeg voor C# de code in accolades toe. Voeg voor Visual Basic de code toe tussen Private Sub en 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. Dubbelklik op de knop Achtergrondkleur instellen en voeg de code toe.

   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;
   }
   

   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. Dubbelklik op de knop sluiten en voeg de code toe.

   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. Dubbelklik op het selectievakje Stretch en voeg de code toe.

   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   
   

Uw toepassing uitvoeren

U kunt uw toepassing op elk gewenst moment uitvoeren terwijl u deze schrijft. Nadat u de code in de vorige sectie hebt toegevoegd, is de Afbeeldingsviewer voltooid. Net als in de vorige zelfstudies gebruikt u een van de volgende methoden om uw toepassing uit te voeren:

• Selecteer de toets F5.
• Selecteer in de menubalk Foutopsporing>Starten met foutopsporing.
• Selecteer op de werkbalk de knop Start.

Er wordt een venster met de titel Afbeeldingsviewer weergegeven. Test alle besturingselementen.

1. Selecteer de De achtergrondkleur instellen knop. Het dialoogvenster Kleur wordt geopend.

   

2. Kies een kleur om de achtergrondkleur in te stellen.

3. Selecteer Een afbeelding weergeven om een afbeelding weer te geven.

   

4. Selecteer en hef de selectie van Stretchop.

5. Selecteer de knop De afbeelding wissen om er zeker van te zijn dat het scherm wordt gewist.

6. Selecteer Sluiten om de app af te sluiten.

Gefeliciteerd! U hebt deze reeks zelfstudies voltooid. U hebt deze programmeer- en ontwerptaken uitgevoerd in de Visual Studio IDE:

• Een Visual Studio-project gemaakt dat gebruikmaakt van Windows Forms
• Indeling toegevoegd voor de toepassing voor het weergeven van afbeeldingen
• Knoppen en een selectievakje toegevoegd
• Dialoogvensters toegevoegd
• Eventhandlers toegevoegd voor uw controls
• Geschreven C# of Visual Basic-code voor het afhandelen van de gebeurtenissen

Volgende stap

Ga verder met leren met een andere reeks zelfstudies over het maken van een getimede wiskundige toets.

Zelfstudie 2: Een getimede wiskundetoets maken