Transcript Visuell Programmering C# 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
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
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
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
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. xkoordinaten 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
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. 290. 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
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