Självstudie: Lägga till kontroller 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.
Det här programmet har en bildruta, en kryssruta och flera knappar som du använder för att styra programmet. Den här handledningen visar hur du lägger till dessa kontroller.
I den här andra handledningen lär du dig hur du:
- Lägga till kontroller i ditt program
- Lägga till knappar i en layoutpanel
- Ändra kontrollnamn och platser
- Lägg till dialogkomponenter
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å den tidigare självstudien Skapa ett bildvisningsprogram. Slutför den först och börja med projektet som du skapade för den handledningen.
Lägga till kontroller i ditt program
Appen Bildvisning använder en PictureBox-kontroll för att visa en bild. Den använder en kryssruta och flera knappar för att hantera bilden och bakgrunden och stänga appen. Du lägger till PictureBox och en kryssruta från verktygslådan i Visual Studio IDE.
Öppna Visual Studio. Ditt Picture Viewer-projekt visas under Öppna senaste.
I Windows Forms Designerväljer du den TableLayoutPanel som du lade till i föregående självstudie. Kontrollera att tableLayoutPanel1 visas i fönstret Egenskaper.
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. I verktygslådan expanderar du Vanliga kontroller.
Dubbelklicka på PictureBox för att lägga till en PictureBox-kontroll i formuläret. Visual Studio lägger till PictureBox-kontrollen i den första tomma cellen i TableLayoutPanel.
Välj det nya PictureBox kontrollobjektet för att välja det, och välj sedan den svarta triangeln på det nya PictureBox-kontrollobjektet för att visa dess uppgiftslista.
Välj Dock i den överordnade containern, vilket ställer in egenskapen Dock för PictureBox till Fill. Du kan se värdet i fönstret Egenskaper.
I fönstret Egenskaper för PictureBox anger du egenskapen ColumnSpan till 2. PictureBox fyller nu båda kolumnerna.
Ange egenskapen BorderStyle till Fixed3D-.
I Windows Forms Designerväljer du TableLayoutPanel. Sedan, i Toolbox, dubbelklickar du på objektet CheckBox för att lägga till en ny kontroll av typen checkbox. Din PictureBox tar upp de två första cellerna i TableLayoutPanel, så kontrollen CheckBox läggs till i cellen längst ned till vänster.
Välj egenskapen Text och ange Stretch.
Lägga till knappar i en layoutpanel
Hittills har du lagt till kontroller i TableLayoutPanel. De här stegen visar hur du lägger till fyra knappar i en ny layoutpanel i TableLayoutPanel.
Välj TableLayoutPanel i formuläret. Öppna verktygslådan och välj Behållare. Dubbelklicka på FlowLayoutPanel för att lägga till en ny kontroll i den sista cellen i TableLayoutPanel.
Ange egenskapen Dock för FlowLayoutPanel till Fill. Du kan ange den här egenskapen genom att välja den svarta triangeln och sedan välja Docka i den överordnade containern.
En FlowLayoutPanel är en container som ordnar andra kontroller i en rad, en efter en.
Välj den nya FlowLayoutPanel och öppna sedan Toolbox och välj Common Controls. Dubbelklicka på -knappen för att lägga till en knappkontroll med namnet button1.
Dubbelklicka på knappen igen om du vill lägga till en annan knapp. IDE anropar nästa knapp2.
Lägg till ytterligare två knappar på det här sättet. Ett annat alternativ är att välja knapp2. Välj sedan Redigera>Kopiera eller Ctrl+C. Välj sedan Redigera>Klistra in från menyraden eller tryck på Ctrl+V för att klistra in en kopia av knappen. Klistra in den igen nu. IDE lägger till button3 och button4 till FlowLayoutPanel.
Välj den första knappen och ange egenskapen Text till Visa en bild.
Ange egenskaperna Text för de följande tre knapparna för att Rensa bilden, Ange bakgrundsfärgenoch Stäng.
Om du vill ändra storlek på knapparna och ordna dem väljer du FlowLayoutPanel. Ange egenskapen FlowDirection till RightToLeft.
Knapparna bör justera sig till högra sidan av cellen och ändra ordning så att knappen Visa en bild är till höger i cellen. Du kan dra knapparna runt FlowLayoutPanel för att ordna dem i valfri ordning.
Välj knappen Stäng för att välja den. Tryck sedan på och håll ned Ctrl- och välj dem också om du vill markera resten av knapparna samtidigt.
I fönstret Egenskaper anger du egenskapen AutoSize till True. Knapparna ändrar storlek så att de passar deras text.
Du kan köra programmet för att se hur kontrollerna ser ut. Välj nyckeln F5, välj Felsök>Starta felsökningeller välj knappen Starta. Knapparna som du har lagt till gör ingenting ännu.
Ändra kontrollnamn
Det finns fyra knappar i formuläret med namnet button1, button2, button3och button4 i C#. I Visual Basic är standard att den första bokstaven i ett kontrollnamn är versal, så knapparna heter Button1, Button2, Button3och Button4. Använd de här stegen för att ge dem mer informativa namn.
I formuläret väljer du knappen Stäng. Om du fortfarande har valt alla knappar väljer du Esc för att avbryta markeringen.
I fönstret Egenskaper letar du efter (namn). Ändra namnet till stängningsknapp.
IDE accepterar inte namn som innehåller mellanslag.
Byt namn på de andra tre knapparna till backgroundButton, clearButtonoch showButton. Du kan verifiera namnen genom att välja kontrollväljarrullgardinsmenyn i fönstret Egenskaper. De nya knappnamnen visas.
Du kan ändra namnet på valfri kontroll, till exempel TableLayoutPanel eller CheckBox.
Lägg till dialogkomponenter
Appen kan öppna bildfiler och välja en bakgrundsfärg med hjälp av komponenter. En komponent är som en kontroll. Du använder Toolbox- för att lägga till en komponent i formuläret. Du anger dess egenskaper med hjälp av fönstret Egenskaper.
Till skillnad från en kontroll lägger du inte till ett synligt objekt när du lägger till en komponent i formuläret. I stället ger den vissa beteenden som du kan utlösa med kod. Det är till exempel en komponent som öppnar dialogrutan Öppna fil.
I det här avsnittet lägger du till en OpenFileDialog komponent och en ColorDialog komponent i formuläret.
Välj Windows Forms Designer (Form1.cs [Design]). Öppna sedan Toolbox och välj gruppen Dialogrutor.
Dubbelklicka på OpenFileDialog för att lägga till en komponent med namnet openFileDialog1 i formuläret.
Dubbelklicka på ColorDialog för att lägga till en komponent med namnet colorDialog1. Komponenterna visas längst ned i Windows Forms Designer som ikoner.
Välj ikonen openFileDialog1 och ange två egenskaper:
Ange egenskapen Filter till följande värde:
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*Ange egenskapen Title till följande värde: Välj en bildfil.
Egenskapsinställningarna för Filter anger de typer som dialogrutan Välj en bild visas.
Nästa steg
Gå vidare till nästa handledning för att lära dig hur du lägger till kod i din applikation.