3.5 Visuell programmering

Transkript

1 3.5 Visuell programmering Alla våra program hittills har varit C# Console Applications (sid 41) inkl. programmet MessageBox fast det genererade en grafisk meddelanderuta. Nu vill vi utnyttja grafikens ytterligare möjligheter genom att utveckla en ny typ av program och därmed en ny typ av projekt i Visual Studio, kallad Windows Forms Application. Ett sådant program involverar både text och grafik och producerar fönster och dialogrutor av olika slag. Man pratar om visuell programmering som också gett namnet till Visual Studio. C# Windows Forms Application Har du hittills följt bokens rekommendation att använda samma projekt för alla konsolapplikationer (sid 46), får du lämna denna rutin nu och skapa för varje program ett nytt projekt av typ Windows Forms Application genom att klicka i Start Page:s vänstra kolumn på länken New Project Du får fram följande dialogruta: Markera Visual C# i den vänstra kolumnen under Recent - Installed - Templates. Då får du i fönstret i mitten ett antal alternativ. Markera bland dem Windows Forms Application. Genom att välja detta alternativ har vi bestämt oss för en denna typ av applikation som vi ska köra i det nya projektet. I den undre delen av dialogrutan döper vi vårt projekt till WindowsForm i textrutan Name. Ange i textrutan Location mappen C:\C#. Avbocka den lilla rutan Create directory for solution om den är bockad. Klicka på OK-knappen. Du får följande fönster: 61

2 En ny flik dyker upp: Form1.cs [Design] och visar ett nytt fönster med rubriken Form1. Detta fönster är en s.k. Windows Form ett grafiskt användargränssnitt som kommer att utgöra den visuella delen av vårt grafiska program. Dvs denna form är alla grafiska applikationers huvudfönster som visas när programmet körs. Prova detta redan nu genom att på vanligt sätt med menyvalet Build Build Solution kompilera och med Debug Start Without Debugging köra programmet. Så får du samma Form1-fönster en gång till reproducerat på skärmen. Men i själva verket handlar det om ett nytt läge av programmet, det s.k. körläget. Stäng det exekverade fönstret med en klick på krysset x i det övre högra hörnet, för att avsluta körläget. Du återvänder till det s.k. designläget (bilden ovan), vilket också återspeglas av flikens beteckning Form1.cs [Design]. Det heter så därför att du i detta läge kommer att utforma (designa) din applikation genom att förse formen med grafiska komponenter som knappar, textfält, labels, rutor osv. samt genom att lägga till kod bakom dessa komponenter, kod som anropas när du via mus och tangentbord interagerar med formens grafiska komponenter. Just nu har vi gjort varken det ena eller det andra. Vår form är tom. Men vi har redan skapat ett fullvärdigt körbart program. Bevist på det finns till höger i det fönstret Solution Explorer, där det nya projektets innehåll är ordnat i en liten trädstruktur. Bl.a. kan du hitta där filen Program.cs med en klass som innehåller Main()-metoden. Detta är nödvändigt för att programmet ska fungera. Därför: Avlägsna inte Program.cs från projektet! Detta gjorde vi i våra konsolapplikationer, för att vi ersatte Program.cs med en egen fil som innehöll en klass med Main()-metoden. Just nu har vi ingen anledning att ändra något i dessa koder som automatiskt genereras när vi skapar projektet. Det vi ska göra istället, är att lära oss att fylla formen med grafiska komponenter, så att man ser lite mer än det tomma fönstret när vi kör programmet. Exempel på visuell programmering Man kan faktiskt med de verktyg som är inbyggda i Visual Studio, konstruera grafiska program utan att behöva skriva egen kod. Man gör det genom att med mus och tangentbod göra inställningar i sitt program ett förfarande som gett namnet till Visual Studio. 62

3 Självklart genereras kod automatiskt bakom kulisserna med dessa inställningar. Priset som måste betalas för denna enkelhet är att programmet blir statiskt när det körs och att man inte kan interagera med grafiken, om man helt och hållet struntar i egen kod. I regel har dock en Windows Forms Application möjligheten till interaktion, men då måste automatiskt genererad kod kombineras med egenskriven. I detta program nöjer vi oss med det enklaste fallet ett program utan en enda rad egen kod för att bekanta oss med den visuella programmeringens begrepp och tekniker. I ett antal steg ska vi i fortsättnigen designa formfönstret. Att designa formfönstret Det lilla fönstret med grå bakgrund (i det stora vita fönstret) är en Windows Form, även kallat formfönstret eller kort form. Markera det med musen om det inte redan är markerat. Formfönstret har ett antal egenskaper som är samlade i alfabetisk ordning i Properties-fönstret i det nedre högra hörnet av Visual Studio-miljön. Om du inte ser Properties-fönstret kan du få fram det från menyraden med View Properties Window. En av formfönstrets egenskaper är Text. Scrolla ned Properties-fönstret för att hitta det. Egenskapen Text bestämmer formfönstrets rubrik. Just nu är texten Form1, se bilden. Vi vill ändra rubrikens text från Form1 till WindowsForm. Properties-fönstret består av två kolumner: Den vänstra kolumnen innehåller formens alla egenskaper som variabler. Den högra kolumnen visar variablers värden som konstanter. Man måste föreställa sig formen som ett objekt och dess egenskaper. Hela Visual Studio består av ett antal objekt med vissa egenskaper som har vissa förinställda värden när man öppnar Visual Studio. Sedan kan man ändra dessa default-värden. En egenskap av Form1-objektet är Text som man hittar i Properties-fönstrets vänstra kolumn. Dess default-värde kan avläsas i den högra kolumnen: Form1. Vi vill ändra detta. Därför markerar vi med mus Text-egenskapens värde Form1 (se pilen på bilden) och ändrar det till WindowsForm en beteckning som vi valt för formfönstret i vårt projekt och som ska synas som rubrik på fönstret som visas när vi kör. Så snart vi gjort ändringen från Form1 till WindowsForm, syns den nya texten direkt på formfönstrets rubrik, även om vi fortfarande befinner oss i designläge. 63

4 En kontrollkörning ( Build Build Solution för att kompilera om och Debug Start Without Debugging för att exekvera) visar den nya rubriken även i körläget. Glöm inte att stänga körfönstret för att återvända till designläget. Att lägga in text i formfönstret med en Label En Label är en s.k. Control i Visual Studio, en återandvänbar grafisk komponent. Alla Controls är samlade i Visual Studios Toolbox som du får fram med View Toolbox. En Label är en i regel osynlig behållare för text som ska ge en viss information eller förklara en annan grafisk komponent (Control). Den används ungefär som en etikett för att skriva text på och klistra den på något annat. En Label tar inte emot interaktioner från användarens sida. Den vanligaste användningen av Label är förklarande texter till textfält och rutor. T.ex. är Name på bilden på sid 61 (längst ned) en Label till det textfält i vilket vi skrivit vårt projekts namn WindowsForm. Till skillnad från Labels tar textfält och rutor emot interaktioner från användarens sida. Vi vill använda en Label för att förklara de grafiska komponenter (Controls) som vårt program ska visa, en tillämpning som egentligen inte är typisk för Labels. Vi kommer i fortsättningen ibland använda det svenska ordet kontroll för det engelska Control. För att få en Label på formen, dubbelklicka på Label i Visual Studios Toolbox. Då hamnar en Label i formens övre vänstra hörn, se bilden till höger. Med denna aktion har vi skapat ett objekt av typ Label vars egenskaper får vissa fördefinierade värden. T.ex. får det automatiskt samma bakgrundsfärg som formen. Vill man ha det annorlunda, måste Labelns bakgrundsfärg ändras explicit, se övn 3.11 (sid 75). Stäng Toolbox-fönstret för tillfället. Markera den nytillkomna Labeln med en musen för att få fram 64

5 dess egenskaper i Properties-fönstret. Där kan man se att vår Labels Text-egenskap har värdet label1, dvs texten som just nu står i Labeln är label1. Scrolla ned Propertiesfönstret tills du hittar Labelns Text-egenskap, markera dess nuvarande värde label1 och ändra det till: Detta är en Label. Under den ser du en PictureBox som innehåller en importerad bild. Se till att du tar med även radbyten så att texten hamnar på tre rader. Som man ser anpassar sig Labeln till textens storlek: Size-egenskapens värde ändras automatiskt till den aktuella storleken. Nu vill vi centrera texten samt ändra teckensnitt, stil och storlek. Centreringen får vi genom att ändra TextAlignegenskapens värde till MiddleCenter, vilket kan göras så här: När du med enkel musklick markerar egenskapen TextAlign dyker upp till höger en liten pil. Klicka på den för att öppna en grafisk dropplista, se bilden till höger. Välj den mellersta rutan som representerar värdet MiddleCenter till egenskapen TextAlign, se bilden till höger. För att ändra textens teckensnitt, stil och storlek, gå till Labelns Font-egenskap som har en liten triangel till vänster. Klicka på den för att expandera Font-egenskapen. Dessutom finns det till höger en liten ruta med tre punkter i. Klicka på den för att få fram dialogrutan Tecken. Välj i den Arial som Teckensnitt, Fet som Stil och 14 som Storlek. Klicka på OK för att spara de nya inställningarna. Nu ryms Labelns text inte längre i formen. Förstora med musen formens storlek, så att texten ryms. Lägg märke till att formens Size-egenskap samtidigt ändras till den storlek som du väljer med musen. Placera Labeln med musen centrerad relativ till formens nya storlek. Den egenskap av Labeln som anger dess position relativ till formen, heter Location och anger x-y-koordinaten av Labelns övre vänstra hörn relativ till formens övre vänstra hörn. x- koordinaten växer i horisontell led till höger, medan y-koordinaten växer i vertikal led nedåt. Det övre vänstra hörnet är definierad som origo dvs punkten (0, 0). Alla storleksuppgifter är angivna i antalet pixlar, där en pixel (picture element) är bildskärmens minsta ljuspunkt vars absoluta storlek är beroende av skärmens aktuella upplösning. Dessa regler gäller för alla grafiska komponenter. Positionera Labeln centrerad relativ till formens bredd manuellt med musen. Observera hur Location-egenskapens x-y-koordinater automatiskt ändras när du gör detta. Att lägga in en bild i formfönstret med en PictureBox En PictureBox är en behållare för bilder. Man kan inte placera bilder direkt i formen, precis som vi inte kunde göra det med text heller, utan behövde en Label som placerades i formen och i sin tur kunde ge plats åt en text. Samtidigt är PictureBox precis som Label en Control. Genom ett klokt val av bakgrundsfärgerna kan man alltid uppnå att till sist 65

6 endast relevant text och bild syns på formen. Kontrollerna däremot ska helst inte synas. De är verktyg i programmerarens händer för att organisera den grafiska ytan. Deras betydelse blir klarare när interaktion med den grafiska ytan kommer in i bilden och även kod läggs in bakom kontrollerna för att ge dem vissa funktionaliteter. Just nu är vårt program statiskt i den bemärkelsen att det endast visar text och bild utan interaktion. PictureBox kan hittas bland kontrollerna i Visual Studios Toolbox. Upprepa förfarandet du använde hos Label: Ta fram Toolbox med View Toolbox och dubbelklicka på PictureBox. Då hamnar en sådan i formen. Den ser ut som vilken ruta som helst och har en viss initialstorlek och -position. Initialpositionen är i regel formens övre vänstra hörn och storleken är initialt 100x50 pixlar. Alla som någon gång bearbetat bilder på datorn vet att bildens storlek är av betydelse för hanteringen. Självklart kan man inte på ett vettigt sätt placera en alltför stor bild i en alltför liten PictureBox, jämförbart med att lägga en bild i en ram. Proportionerna måste stämma. Därför beror vårt fortsatta tillvägagångssätt på vilken bild vi väljer, vilken storlek den har, i vilken proportion bildens längd står till bredden, i vilket format den är lagrad osv. I vårt fall handlar det om en bild som vi ritat i Paint och sparat i filen Välkomst.gif. Bildens storlek är 653x340 pixlar. Markerar man med musen filen i Windows kan man redan få reda på detta. Annars ger ritprogram av typ Paint eller Photoshop denna information. Längdens förhållande till bredden är 653 / 340 = 1,92. Dra med musen PictureBoxen från sin initialposition till formens mitt under Labeln. Gå till PictureBoxens Size-egenskap och expandera den (klicka på den lilla triangeln till vänster). Det dyker upp delegenskaperna Width och Height. Ändra deras värden till 557 resp Observera att 557 / 290 = 1,92 dvs samma förhållande som hos originalbilden. Förstora ev. formfönstrets storlek med musen om både Labeln och PictureBoxen i sin nya storlek inte ryms i formen. Innan vi laddar bilden ska vi göra en inställning i PictureBoxens SizeMode-egenskap. När du markerar den med enkel musklick dyker upp en liten pil till höger om värdet. Klicka på den och ändra värdet till StretchImage. Slutligen ska vi ladda bilden med PictureBoxens Image-egenskap. När du markerar den dyker upp till höger en liten ruta med tre punkter i. Klicka på den för att få fram dialogrutan Select Resource. Klicka på knappen Import i den. Windows filnavigeringsruta Open kommer upp. Navigera dig fram till en mapp där en bildfil ligger, markera den och klicka på knappen Öppna. Du återvänder till dialogrutan Select Resource. Klicka på OK-knappen för att ladda bilden till ditt program. Vi har t.ex. preparerat och lagt filen Välkomst.gif i vår projektmapp. Annars kan du alltid rita i programmet Paint snabbt en bild efter egen smak och spara den i gif-format, se övn 3.10 (sid 75). Nu är bilden placerad i PictureBoxen. Men eftersom originalbildens bakgrundsfärg är vit, men formens bakgrundsfärg grå, är helhetssynen på vårt grafiska program inte optimal. Vi vill förbättra layouten genom att sätta även formens bakgrundsfärg till vit så att PictureBoxen inte längre syns. För att ändra formens bakgrundsfärg, markera formen, så att dess Properties-fönster visas, gå till formfönstrets BackColor-egenskap. När du med enkel musklick markerar egenskapen BackColor dyker upp till höger en liten pil. När du 66

7 klickar på pilen öppnas ett nytt litet fönster med tre flikar. Välj fliken Custom för att få fram en färgpalett. Välj där den vita färgen. Formens bakgrund färgas vit så att bildens vita bakgrundsfärg smältas in i den. Dessutom får även Labeln automatiskt samma vita bakgrundsfärg som formen. I designläget, i vilken vi fortfarande befinner oss, ser man PictureBoxens rand som streckad linie, men den kommer att försvinna i körläget. Äntligen har vi kommit så långt att vi kan testköra vårt första grafiska program. Precis som en konsolapplikation kan man med Build Build Solution kompilera även en Windows Forms Application från menyraden längst upp. För att exekvera den, klickar man som vanligt på menyn Debug Start Without Debugging. Resultatet blir så här: Självklart är detta inte någon intressant grafisk applikation eftersom den är helt statisk och man inte kan göra något med den. De grafiska komponenterna i bilden ovan både Labeln och PictureBoxen är döda. Lika bra, dessutom mycket enklare, hade vi kunnat producera bilden i Paint, Photoshop eller något annat ritprogram. Men då hade vi varken lärt oss egenskaperna hos en Control eller att bygga en Windows Forms Application i Visual Studio en kunskap som vi nu ska vidareutveckla för att producera grafiska gränssnitt, vilket bilden ovan strängt taget inte är. Detta kommer vi att lära oss i nästa avsnitt. 67