Självstudie: Skapa ett bildvisningsprogram för 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.

I den här första handledningen lär du dig att:

• Skapa ett Visual Studio-projekt som använder Windows Forms
• Lägga till ett layoutelement
• 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

• Du behöver Visual Studio för att slutföra den här självstudien. Besök sidan Visual Studio-nedladdningar för en kostnadsfri version.
• Arbetsbelastningen för .NET-skrivbordsutveckling. Om du vill verifiera eller installera den här arbetsbelastningen i Visual Studio väljer du Verktyg>Hämta verktyg och funktioner. Mer information finns i Ändra arbetsbelastningar eller enskilda komponenter.

Skapa ditt Windows Forms-projekt

När du skapar ett bildvisningsprogram är det första steget att skapa ett Windows Forms App-projekt.

1. Öppna Visual Studio.

2. I startfönstret väljer du Skapa ett nytt projekt.

   

3. I fönstret Skapa ett nytt projekt söker du efter Windows Forms. Välj sedan Desktop i listan Projekttyp.

4. Välj mallen Windows Forms App (.NET Framework) för C# eller Visual Basic och välj sedan Nästa.

   

5. I fönstret Konfigurera det nya projektet ger du projektet namnet PictureVieweroch väljer sedan Skapa.

   

Visual Studio skapar en lösning för din app. En lösning är en container för alla projekt och filer som behövs av din app.

Nu visar Visual Studio ett tomt formulär i Windows Form Designer.

Lägga till ett layoutelement

Bildvisningsappen innehåller en bildruta, en kryssruta och fyra knappar, som du lägger till i nästa handledning. Layoutelementet styr deras plats i formuläret. Det här avsnittet visar hur du ändrar formulärets rubrik, ändrar storlek på formuläret och lägger till ett layoutelement.

1. I projektet väljer du Windows Forms Designer. Fliken läser Form1.cs [Design] för C# eller Form1.vb [Design] för Visual Basic.

2. Välj var som helst i Form1.

3. Fönstret Egenskaper visar nu egenskaper för formuläret. Fönstret Egenskaper finns vanligtvis längst ned till höger i Visual Studio. Det här avsnittet styr olika egenskaper, till exempel förgrunds- och bakgrundsfärg, rubriktext som visas överst i formuläret och formulärets storlek.

   Om du inte ser Egenskaperväljer du Visa>Egenskapsfönster.

4. Leta upp egenskapen Text i fönstret Egenskaper. Beroende på hur listan sorteras kan du behöva rulla nedåt. Ange värdet Picture Vieweroch välj sedan Ange.

   Formuläret har nu texten Picture Viewer i namnlisten.

   Not

   Du kan visa egenskaper efter kategori eller alfabetiskt. Använd knapparna i fönstret Egenskaper för att växla fram och tillbaka.

5. Välj formuläret igen. Välj formulärets drahandtag längst ned till höger. Handtaget är en liten vit fyrkant i formulärets nedre högra hörn.

   

   Dra i handtaget för att ändra storlek på formuläret så att formuläret blir bredare och lite längre. Om du tittar på fönstret Egenskaper är egenskapen Storlek annorlunda. Du kan också ändra formulärets storlek genom att ändra egenskapen Storlek.

6. Till vänster i Visual Studio IDE väljer du fliken Toolbox. Om du inte ser den väljer du Visa>Toolbox från menyraden eller Ctrl+Alt+X.

7. Välj den lilla triangelsymbolen bredvid Containers för att öppna gruppen.

   

8. Dubbelklicka på TableLayoutPanel i Toolbox-. Du kan också dra en kontroll från verktygslådan till formuläret. Kontrollen TableLayoutPanel visas i formuläret.

   

   Not

   När du har lagt till TableLayoutPanel, om ett fönster visas i formuläret med rubriken TableLayoutPanel Tasksväljer du någonstans i formuläret för att stänga det.

9. Välj TableLayoutPanel. Du kan kontrollera vilken kontroll som väljs genom att titta på fönstret Egenskaper.

   

10. Med TableLayoutPanel markerat letar du reda på egenskapen Dock, som har värdet None. Välj nedrullningspilen och sedan väljer du Fyll, vilket är den stora knappen i mitten av rullgardinsmenyn.

    

    Dockning refererar till hur ett fönster är kopplat till ett annat fönster eller område.

    TableLayoutPanel fyller nu i hela formuläret. Om du ändrar storlek på formuläret igen förblir TableLayoutPanel dockat och ändrar storlek så att det passar.

11. I formuläret väljer du TableLayoutPanel. I det övre högra hörnet finns en liten svart triangelknapp.

    Välj triangeln för att visa kontrollens uppgiftslista.

    

12. Välj Redigera rader och kolumner för att visa dialogrutan kolumn- och radformat.

13. Välj Column1 och ange dess storlek till 15 procent. Kontrollera att alternativet Procent är markerat.

14. Välj Kolumn2 och ange den till 85 procent.

    

15. Från dialogrutan Visa överst, välj Kolumn- och Radstilar, sedan Rader. Ange Rad1 till 90 procent och Rad2 till 10 procent. Välj OK för att spara ändringarna.

    TableLayoutPanel har nu en stor övre rad, en liten nedre rad, en liten vänsterkolumn och en stor högerkolumn.

    

Layouten är klar.

Not

Innan du kör programmet sparar du appen genom att välja knappen Spara alla verktygsfält. Du kan också spara appen genom att välja Arkiv>Spara alla från menyraden eller trycka på Ctrl+Skift+S. Det är en bra idé att spara tidigt och ofta.

Kör din app

När du skapar ett Windows Forms App-projekt skapar du ett program som körs. I det här skedet gör inte appen Picture Viewer mycket. För tillfället visas ett tomt fönster som visar Bildvisningsprogram i titelraden.

Följ dessa steg för att köra appen.

1. Använd någon av följande metoder:

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

   Visual Studio kör din app. Ett fönster med rubriken Picture Viewer visas.

   

   Titta på Visual Studio IDE-verktygsfältet. Fler knappar visas i verktygsfältet när du kör ett program. Med de här knapparna kan du göra saker som att stoppa och starta din app och hjälpa dig att spåra eventuella fel.

   

2. Använd någon av följande metoder för att stoppa din app:

   • I verktygsfältet väljer du knappen Sluta felsöka.
   • På menyraden väljer du Felsöka>Sluta felsöka.
   • Från tangentbordet anger du Skift+F5.
   • Välj X i det övre hörnet i fönstret Picture Viewer.

   När du kör appen inifrån Visual Studio IDE kallas den felsökning. Du kör programmet för att hitta och åtgärda buggar. Du följer samma procedur för att köra och felsöka andra program. Mer information om felsökning finns i Titta först på felsökningsprogrammet.

Nästa steg

Gå vidare till nästa självstudie för att lära dig hur du lägger till kontroller i bildvisningsprogrammet.

Självstudie del 2: Lägg till kontroller i bildvisningsprogrammet