Zelfstudie: Besturingselementen 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.

Dit programma heeft een afbeeldingsvak, een selectievakje en verschillende knoppen, die u gebruikt om de toepassing te beheren. In deze handleiding leert u hoe u deze besturingselementen kunt toevoegen.

In deze tweede zelfstudie leert u het volgende:

• Besturingselementen toevoegen aan uw toepassing
• Knoppen toevoegen in een indelingsvenster
• Wijzig de namen en locaties van besturingselementen
• Dialoogvensteronderdelen toevoegen

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 handleiding bouwt voort op de vorige handleiding, Een toepassing voor het bekijken van afbeeldingen maken. Voltooi die eerste en begin met het project dat u voor die zelfstudie hebt gemaakt.

Besturingselementen toevoegen aan uw toepassing

In de app Afbeeldingenviewer wordt een PictureBox-controle gebruikt om een afbeelding weer te geven. Er wordt een selectievakje en verschillende knoppen gebruikt om de afbeelding en achtergrond te beheren en de app te sluiten. U voegt de PictureBox en een selectievakje toe vanuit de Toolbox in de Visual Studio IDE.

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

2. Selecteer in de Windows Forms Designerde TableLayoutPanel die u in de vorige zelfstudie hebt toegevoegd. Controleer of tableLayoutPanel1- wordt weergegeven in het venster Eigenschappen.

3. Selecteer aan de linkerkant van de Visual Studio IDE het tabblad Werkbalk. Als u deze niet ziet, selecteert u vanuit de menubalk Weergave>Werkbalk of druk op Ctrl+Alt+X. Vouw in de werkset Common Controlsuit.

4. Dubbelklik op PictureBox om een PictureBox-control aan uw formulier toe te voegen. Visual Studio voegt het besturingselement PictureBox toe aan de eerste lege cel van TableLayoutPanel.

5. Kies het nieuwe PictureBox besturingselement om het te selecteren en selecteer vervolgens het zwarte driehoekje op het nieuwe Besturingselement PictureBox om de takenlijst weer te geven.

   

6. Selecteer Dock in oudercontainer, waarmee de eigenschap PictureBox Dock wordt ingesteld op Fill. U kunt die waarde zien in het venster Eigenschappen.

7. Stel in het venster Eigenschappen voor PictureBox de eigenschap ColumnSpan in op 2. De PictureBox vult nu beide kolommen.

8. Stel de eigenschap BorderStyle in op Fixed3D-.

9. Selecteer in de Windows Forms DesignerTableLayoutPanel. Dubbelklik vervolgens in de Werksetop het selectievakje item om een nieuw Selectievakje-besturingselement toe te voegen. Uw PictureBox bezet de eerste twee cellen in de TableLayoutPanel, dus wordt het Selectievakje-besturingselement toegevoegd aan de cel linksonder.

10. Kies de eigenschap Text en voer Stretchin.

    

Knoppen toevoegen in een indelingsvenster

Tot nu toe hebt u besturingselementen toegevoegd aan TableLayoutPanel. In deze stappen ziet u hoe u vier knoppen toevoegt aan een nieuw indelingsvenster in tableLayoutPanel.

1. Selecteer de TableLayoutPanel op het formulier. Open de Toolboxen selecteer Containers. Dubbelklik op FlowLayoutPanel om een nieuw besturingselement toe te voegen aan de laatste cel in de TableLayoutPanel.

2. Stel de eigenschap Dock van FlowLayoutPanel in op Fill. U kunt deze eigenschap instellen door de zwarte driehoek te selecteren en vervolgens Dock te selecteren in bovenliggende container.

   Een FlowLayoutPanel is een container die andere besturingselementen in een rij rangschikt, een na een.

3. Selecteer het nieuwe FlowLayoutPanel en open de Toolbox en selecteer Common Controls. Dubbelklik op de knop item om een knopbesturingselement met de naam knop1toe te voegen.

4. Dubbelklik nogmaals op knop om nog een knop toe te voegen. De IDE roept de volgende knop2aan.

5. Voeg op deze manier nog twee knoppen toe. Een andere optie is om knop 2te selecteren. Selecteer vervolgens Bewerk>kopiëren of Ctrl+C-. Kies vervolgens Bewerken>plakken in de menubalk of druk op Ctrl+V- om een kopie van de knop te plakken. Plak het nu opnieuw. De IDE voegt button3 en button4 toe aan flowLayoutPanel.

6. Selecteer de eerste knop en stel de eigenschap Text in op Een afbeelding weergeven.

7. Stel de eigenschappen Text van de volgende drie knoppen in op De afbeelding wissen, De achtergrondkleurinstellen en sluiten.

8. Als u de knoppen wilt aanpassen en rangschikken, selecteert u FlowLayoutPanel. Stel de eigenschap FlowDirection in op RightToLeft-.

   De knoppen moeten zich rechts van de cel uitlijnen en de volgorde ervan omkeren, zodat de Een afbeelding weergeven knop rechts van de cel staat. U kunt de knoppen rond de FlowLayoutPanel slepen om ze in elke gewenste volgorde te rangschikken.

9. Kies de knop sluiten om deze te selecteren. Als u vervolgens de rest van de knoppen tegelijk wilt selecteren, houdt u de Ctrl- ingedrukt en kiest u deze ook.

10. Stel in het venster Eigenschappen de eigenschap AutoSize in op True. De knoppen worden aangepast aan de tekst.

    

U kunt uw programma uitvoeren om te zien hoe de besturingselementen eruitzien. Selecteer de toets F5, selecteer Fouten opsporen>Foutopsporing startenof selecteer de knop Start. De knoppen die u hebt toegevoegd, doen nog niets.

Namen van besturingselementen wijzigen

Er zijn vier knoppen op het formulier met de naam knop1, knop2, knop3en knop4 in C#. In Visual Basic wordt de eerste letter van een besturingselementnaam standaard in hoofdletters geplaatst, zodat de knoppen de naam Button1, Button2, Button3en Button4. Gebruik deze stappen om ze meer informatieve namen te geven.

1. Kies in het formulier de knop Sluiten. Als u nog steeds alle knoppen hebt geselecteerd, kiest u Esc om de selectie te annuleren.

2. Zoek in het venster Eigenschappen naar (naam). Wijzig de naam in closeButton.

   

   De IDE accepteert geen namen die spaties bevatten.

3. Wijzig de andere drie knoppen in backgroundButton, clearButtonen showButton. U kunt de namen verifiëren door de besturingsdropdownlijst te selecteren in het venster Eigenschappen. De nieuwe knopnamen worden weergegeven.

U kunt de naam van elk besturingselement wijzigen, zoals TableLayoutPanel of CheckBox.

Dialoogvensteronderdelen toevoegen

Uw app kan afbeeldingsbestanden openen en een achtergrondkleur kiezen met behulp van onderdelen. Een onderdeel lijkt op een besturingselement. U gebruikt de Werkset om een onderdeel aan uw formulier toe te voegen. U stelt de eigenschappen in met behulp van het venster Eigenschappen.

In tegenstelling tot een besturingselement wordt bij het toevoegen van een onderdeel aan uw formulier geen zichtbaar item toegevoegd. In plaats daarvan biedt het bepaalde gedragingen die u met code kunt activeren. Het is bijvoorbeeld een onderdeel waarmee een Bestand openen dialoogvenster wordt geopend.

In deze sectie voegt u een OpenFileDialog-onderdeel en een ColorDialog-onderdeel toe aan uw formulier.

1. Selecteer de Windows Forms Designer- (Form1.cs [Ontwerp]). Open vervolgens de Toolbox en selecteer de groep Dialoogvensters.

2. Dubbelklik op OpenFileDialog- om een onderdeel met de naam openFileDialog1 toe te voegen aan uw formulier.

3. Dubbelklik op ColorDialog- om een onderdeel met de naam colorDialog1toe te voegen. De onderdelen worden onderaan Windows Forms Designer weergegeven als pictogrammen.

   

4. Kies het pictogram openFileDialog1 en stel twee eigenschappen in:

   • Stel de eigenschap Filter in op de volgende waarde:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Stel de eigenschap Titel in op de volgende waarde: Selecteer een afbeeldingsbestand.

   De instellingen van de eigenschap Filter geven de typen op die in het dialoogvenster Een afbeelding selecteren worden weergegeven.

Volgende stap

Ga naar de volgende zelfstudie voor meer informatie over het toevoegen van code aan uw toepassing.

zelfstudie deel 3: Code toevoegen aan uw Afbeeldingsviewer-