Zelfstudie: Een Windows Forms-app voor afbeeldingen maken (.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.

In deze eerste zelfstudie leert u het volgende:

• Een Visual Studio-project maken dat gebruikmaakt van Windows Forms
• Een indelingselement toevoegen
• 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

• U hebt Visual Studio nodig om deze zelfstudie te voltooien. Ga naar de downloadpagina van Visual Studio voor een gratis versie.
• De .NET-desktopontwikkelingswerklast. Als u deze workload in Visual Studio wilt controleren of installeren, selecteert u Tools>Hulpprogramma's en onderdelen ophalen. Zie Workloads of afzonderlijke onderdelen wijzigenvoor meer informatie.

Uw Windows Forms-project maken

Wanneer u een afbeeldingsviewer maakt, is de eerste stap het maken van een Windows Forms App-project.

1. Open Visual Studio.

2. Selecteer in het startvenster Een nieuw project maken.

   

3. Zoek in het venster een nieuw project maken naar Windows Forms. Selecteer vervolgens Bureaublad uit de lijst Projecttype.

4. Selecteer de Windows Forms-app (.NET Framework) sjabloon voor C# of Visual Basic en selecteer vervolgens Volgende.

   

5. Geef in het venster Uw nieuwe project configureren uw project de naam PictureVieweren selecteer vervolgens Maken.

   

Visual Studio maakt een oplossing voor uw app. Een oplossing is een container voor alle projecten en bestanden die nodig zijn voor uw app.

Op dit moment wordt in Visual Studio een leeg formulier weergegeven in de Windows Form Designer-.

Een indelingselement toevoegen

Uw app voor het weergeven van afbeeldingen bevat een afbeeldingsvak, een selectievakje en vier knoppen, die u toevoegt in de volgende tutorial. Het indelingselement bepaalt de locatie op het formulier. In deze sectie ziet u hoe u de titel van uw formulier wijzigt, het formaat van het formulier wijzigt en een indelingselement toevoegt.

1. Selecteer de Windows Forms Designer in uw project. Het tabblad leest Form1.cs [Ontwerp] voor C# of Form1.vb [Ontwerp] voor Visual Basic.

2. Selecteer ergens in Form1-.

3. In het venster Eigenschappen worden nu eigenschappen voor het formulier weergegeven. Het venster Eigenschappen bevindt zich meestal rechtsonder in Visual Studio. Deze sectie bepaalt verschillende eigenschappen, zoals voorgrond- en achtergrondkleur, titeltekst die boven aan het formulier wordt weergegeven en de grootte van het formulier.

   Als u eigenschappenniet ziet, selecteert u venster Eigenschappen weergeven>.

4. Zoek de eigenschap Text in het venster Eigenschappen. Afhankelijk van hoe de lijst is gesorteerd, moet u mogelijk omlaag schuiven. Voer de waarde in Picture Vieweren kies Enter.

   Het formulier bevat nu de tekst Afbeeldingsviewer in de titelbalk.

   Notitie

   U kunt eigenschappen weergeven op categorie of alfabetisch. Gebruik de knoppen in het venster Eigenschappen om heen en weer te schakelen.

5. Selecteer het formulier opnieuw. Selecteer de sleepgreep in de rechterbenedenhoek van het formulier. De greep is een klein wit vierkant in de rechterbenedenhoek van het formulier.

   

   Sleep de greep om het formaat van het formulier te wijzigen, zodat het formulier breder en iets hoger is. Als u naar het venster Eigenschappen kijkt, is de eigenschap Grootte anders. U kunt ook de grootte van het formulier wijzigen door de eigenschap Grootte te wijzigen.

6. Selecteer aan de linkerkant van de Visual Studio IDE het tabblad Toolbox. Als u deze niet ziet, selecteert u Weergave>Toolbox in de menubalk of Ctrl+Alt+X.

7. Selecteer het kleine driehoekssymbool naast Containers om de groep te openen.

   

8. Dubbelklik op TableLayoutPanel in de Werkbalk. U kunt ook een besturingselement van de werkset naar het formulier slepen. Het besturingselement TableLayoutPanel wordt weergegeven in uw formulier.

   

   Notitie

   Nadat u uw TableLayoutPanel hebt toegevoegd, selecteert u een willekeurige plaats in het formulier om het te sluiten als er een venster in het formulier wordt weergegeven met de titel TableLayoutPanel Tasks.

9. Selecteer de TableLayoutPanel-. U kunt verifiëren welk control is geselecteerd door naar het venster Eigenschappen te kijken.

   

10. Met de TableLayoutPanel geselecteerd, zoekt u de eigenschap Dock, die de waarde Noneheeft. Selecteer de vervolgkeuzepijl en selecteer vervolgens Vul, de grote knop in het midden van het vervolgkeuzemenu.

    

    Docking verwijst naar de wijze waarop een venster aan een ander venster of een ander gebied is gekoppeld.

    TableLayoutPanel vult nu het hele formulier in. Als u het formaat van het formulier opnieuw wijzigt, blijft de TableLayoutPanel gedokt en past het zijn formaat automatisch aan om te passen.

11. Selecteer de TableLayoutPanel in het formulier. In de rechterbovenhoek bevindt zich een kleine zwarte driehoekknop.

    Selecteer het driehoekje om de takenlijst van het besturingselement weer te geven.

    

12. Selecteer rijen en kolommen bewerken om het dialoogvenster kolom- en rijstijlen weer te geven.

13. Selecteer Kolom1 en stel de grootte in op 15 procent. Zorg ervoor dat de optie Percentage is geselecteerd.

14. Selecteer Kolom2- en stel deze in op 85 procent.

    

15. Selecteer in boven aan het dialoogvenster Kolom- en rijstijlenrijen. Stel rij1 in op 90 procent en rij2 op 10 procent. Selecteer OK- om uw wijzigingen op te slaan.

    Uw TableLayoutPanel heeft nu een grote bovenste rij, een kleine onderste rij, een kleine linkerkolom en een grote rechterkolom.

    

Uw indeling is voltooid.

Notitie

Voordat u uw toepassing uitvoert, slaat u uw app op door de knop Opslaan alles op de werkbalk te kiezen. Als u uw app wilt opslaan, kiest u Bestand>Alles opslaan in de menubalk of drukt u op Ctrl+Shift+S. Het is een goede gewoonte om vroeg en vaak op te slaan.

Uw app uitvoeren

Wanneer u een Windows Forms App-project maakt, bouwt u een programma dat wordt uitgevoerd. In dit stadium doet uw Picture Viewer-app niet veel. Op dit moment wordt er een leeg venster weergegeven met Afbeeldingsviewer op de titelbalk.

Volg deze stappen om de app uit te voeren.

1. Gebruik een van de volgende methoden:

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

   Visual Studio voert uw app uit. Er wordt een venster met de titel Afbeeldingsviewer weergegeven.

   

   Bekijk de Visual Studio IDE-werkbalk. Er worden meer knoppen weergegeven op de werkbalk wanneer u een toepassing uitvoert. Met deze knoppen kunt u bijvoorbeeld uw app stoppen en starten en eventuele fouten opsporen.

   

2. Gebruik een van de volgende methoden om uw app te stoppen:

   • Selecteer op de werkbalk de knop Foutopsporing stoppen.
   • Selecteer in de menubalk Foutopsporing>Foutopsporing stoppen.
   • Voer vanaf het toetsenbord Shift+F5-in.
   • Selecteer X- in de bovenhoek van het Venster Afbeeldingsviewer.

   Wanneer u uw app uitvoert vanuit de Visual Studio IDE, wordt deze foutopsporinggenoemd. U voert uw toepassing uit om fouten te vinden en op te lossen. U volgt dezelfde procedure om andere programma's uit te voeren en fouten op te sporen. Zie Bekijk eerst het foutopsporingsprogrammavoor meer informatie over foutopsporing.

Volgende stap

Ga naar de volgende zelfstudie voor meer informatie over het toevoegen van besturingselementen aan uw Picture Viewer-programma.

zelfstudie deel 2: Besturingselementen toevoegen aan uw Afbeeldingsviewer-