winforms: gui programmering i .net
DESCRIPTION
WinForms: GUI Programmering i .NET. Kilde: Joe Hummel, kursus i .Net, jan. 2003. Mål. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/1.jpg)
WinForms: GUI Programmering i .NET
Kilde: Joe Hummel, kursus i .Net, jan. 2003
![Page 2: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/2.jpg)
2Nordjyllands Erhvervakademi - 2007
Mål
“.NET supports two types of form-based apps, WinForms and WebForms. WinForms are the traditional, desktop GUI apps. The great news is that Visual Studio .NET enables quick, drag-and-drop construction of form-based applications…”
• Event-drevet, code-behind programmering• Visual Studio .NET• WinForms• Controls
![Page 3: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/3.jpg)
3Nordjyllands Erhvervakademi - 2007
Del 1
• Event-drevet, code-behind programmering…
![Page 4: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/4.jpg)
4Nordjyllands Erhvervakademi - 2007
Event-driven applications
• Ideen er meget simpel:– “user actions” bliver til “events”– events overføres en for en til applikationen, som
processererer eventen vha. en eventhandler
– Sådan programmeres de fleste GUI’er…
GUI App
![Page 5: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/5.jpg)
5Nordjyllands Erhvervakademi - 2007
Eksempel på GUI-baserede events
• Mouse move• Mouse click• Mouse double-click• Key press• Button click• Menu selection• Change in focus• Window activation• etc.
![Page 6: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/6.jpg)
6Nordjyllands Erhvervakademi - 2007
Code-behind
• Events håndteres af metoder (eventhandlere) som ligger “bagved” den synlige GUI– I MS-termer kendt som "code-behind"– Vores job bliver at programmere disse metoder…
![Page 7: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/7.jpg)
7Nordjyllands Erhvervakademi - 2007
Call-backs
• Events er et call fra et objekt back til os…• Hvordan oprettes forbindelsen?
– Visual Studio etablerer forbindelsen via auto-genereret kode
![Page 8: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/8.jpg)
8Nordjyllands Erhvervakademi - 2007
Del 2
• Visual Studio .NET…
![Page 9: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/9.jpg)
9Nordjyllands Erhvervakademi - 2007
Visual Studio .NET (VS.NET)
• Ét IDE til alle former for .NET udvikling– Fra klassebiblioteker over form-baserede apps til web
services– Du kan bruge C#, VB, C++, J#, etc.
![Page 10: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/10.jpg)
10Nordjyllands Erhvervakademi - 2007
Basal operation
• Visual Studio opererer i 1 af 3 tilstande:
1) design
2) run
3) break
• Se VS title bar hvis du er i tvivl…
design run
break
![Page 11: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/11.jpg)
11Nordjyllands Erhvervakademi - 2007
Eksempel: en windows-applikation
• GUI apps baseres på forms og controls…– en form repræsenterer et vindue– en form indeholder 0 eller flere controls– en control interagerer med brugeren
• Lad os implementere en GUI app i en række skridt…
![Page 12: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/12.jpg)
12Nordjyllands Erhvervakademi - 2007
Step 1
• Opret et nyt projekt af typen “Windows Application”– VS. Opretter automatisk en form…
![Page 13: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/13.jpg)
13Nordjyllands Erhvervakademi - 2007
Step 2 — GUI design
• Vælg de ønskede controls fra toolbox’en…– placer musen over toolbox for at se controls– drag-and-drop til formen– placer og tilpas størrelsen på dine control
![Page 14: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/14.jpg)
14Nordjyllands Erhvervakademi - 2007
GUI design …
• En simpel regnemaskine:
• Placer og konfigurer controls– klik for at vælge– sæt properties via Propertiesvinduet
![Page 15: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/15.jpg)
15Nordjyllands Erhvervakademi - 2007
Step 3 — kodedesign
• Implementer formens “Code behind”…• Dobbeltklik på den control du vil implementere
– kodeviduet popper automatisk frem
![Page 16: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/16.jpg)
16Nordjyllands Erhvervakademi - 2007
Step 4 — run mode
• Kør!
![Page 17: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/17.jpg)
17Nordjyllands Erhvervakademi - 2007
Break mode?
• Igangsættes i denne app eksempelvis ved forkert indtastning…
![Page 18: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/18.jpg)
18Nordjyllands Erhvervakademi - 2007
Arbejde med Visual Studio
• I Visual Studio arbejder vi med
source files, projects & solutions
• Source files indeholder kode– extension .cs, .vb, etc.
• Et projekt repræsenterer 1 assembly– bruges af VS til at holde styr på source files– alle source files skal skrives i samme sprog– extension .csproj, .vbproj, etc.
• Solution (*.sln) files holder styr på projekter– så man kan arbejde med flere projekter
![Page 19: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/19.jpg)
19Nordjyllands Erhvervakademi - 2007
Del 3
• WinForms…
![Page 20: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/20.jpg)
20Nordjyllands Erhvervakademi - 2007
WinForms
• Et andet navn for traditionelle, Windowsagtige GUI-applikationer– i modsætning til WebForms,
som er web-baserede
• Implementeres vha. FCL– dvs. portabelt til enhver .NET platform
![Page 21: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/21.jpg)
21Nordjyllands Erhvervakademi - 2007
Abstraktion
• FCL fungerer som abstraktion– adskiller WinForm app fra den underlæggende platform
System.Windows.Forms.Form
CLR
Windows OS
instance of
FCL classobject
![Page 22: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/22.jpg)
22Nordjyllands Erhvervakademi - 2007
Form properties
• Form properties kontrollerer formens visuelle fremtræden:
– AutoScroll– BackgroundImage– ControlBox– FormBorderStyle (sizable?)– Icon– Location– Size– StartPosition– Text (fx window's caption)– WindowState (minimized, maximized, normal)
Form1 form;form = new Form1();form.WindowState = FormWindowState.Maximized;form.Show();
![Page 23: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/23.jpg)
23Nordjyllands Erhvervakademi - 2007
Form metoder
• Actions der kan udføres på en form:
– Activate: giv denne form fokus– Close: luk & frigør tilknyttede ressourcer– Hide: gem, men hold fast i ressourcerne til senere
visning. – Refresh: redraw– Show: gør formen synlig på skærmen & activate
form.Hide(); . . .
form.Show();
![Page 24: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/24.jpg)
24Nordjyllands Erhvervakademi - 2007
Form events
• Events du kan reagere på:– find propertiesvinduet– dobbeltklik på event-navnet
– Load: lige før formen vises første gang– Closing: når formen lukkes (mulighed for cancel)– Closed: når formen helt sikkert lukkes– Resize: når brugerer ændrer på formstørrelsen– Click: når brugeren klikker på formens baggrund– KeyPress: når brugeren trykker en tast mens formen
har fokus
![Page 25: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/25.jpg)
25Nordjyllands Erhvervakademi - 2007
Eksempel
• Spørg brugeren før formen lukkes:
private void Form1_Closing(object sender, System.ComponentModel.CancelEventArgs e){ DialogResult r;
r = MessageBox.Show("Do you really want to close?", "MyApp", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1); if (r == DialogResult.No) e.Cancel = true;}
![Page 26: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/26.jpg)
26Nordjyllands Erhvervakademi - 2007
Part 4
• Controls…
![Page 27: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/27.jpg)
27Nordjyllands Erhvervakademi - 2007
Controls
• Brugerinterfaceobjekter på formen:
– labels– buttons– text boxes– menus– list & combo boxes– option buttons– check boxes– etc.
![Page 28: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/28.jpg)
28Nordjyllands Erhvervakademi - 2007
Abstraction
• Som forms, er controls baseret på klasser i FCL:– System.Windows.Forms.Label– System.Windows.Forms.TextBox– System.Windows.Forms.Button– etc.
• Controls er objekter af disse klasser
object
object
object
object
object
object
![Page 29: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/29.jpg)
29Nordjyllands Erhvervakademi - 2007
Hvem opretter alle disse objekter?
• Hvem er ansvarlig for oprettelsen af control-objekter?– koden auto-genereres af Visual Studio– Efter formobjektet er oprettet oprettes control-objekterne…
![Page 30: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/30.jpg)
30Nordjyllands Erhvervakademi - 2007
Naming conventions
• Sæt dine controllers navne via Name property• The Microsoft Naming Convention:
– cmdOK refererer til en command-knap– lstNames refererer til en List Box Control– txtFirstName refererer til en Textbox Control
![Page 31: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/31.jpg)
31Nordjyllands Erhvervakademi - 2007
Labels
• Til statisk visning af tekst– bruges til at label andre ting på formen– eller til visning af read-only resultater
• Interesting properties:– Text: Det som brugeren ser– Font: Hvordan brugeren ser det
![Page 32: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/32.jpg)
32Nordjyllands Erhvervakademi - 2007
Command-knapper
• Til at klikke på og derved
få udført en handling
• Interessante properties:– Text: Knaptekst– Font: Hvordan knapteksten vises– Enabled: Kan den klikkes på?
– AcceptButton: Sat til at klikke knappen på ENTER– CancelButton: Sat til at klikke knappen på ESC
• Interessante events:– Click: Når der trykkes på knappen
![Page 33: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/33.jpg)
33Nordjyllands Erhvervakademi - 2007
Text boxes
• Mest almindelige control!– Til visning af text– til data fra eksempelvis db
• Masser af features…
![Page 34: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/34.jpg)
34Nordjyllands Erhvervakademi - 2007
Text box properties
• Basale properties:– Text: tekstboksens indhold (string)– Modified: er teksten modificeret af brugeren? (boolean)– ReadOnly: hvis brugeren ikke skal kunne modificere
• Multi-line text boxes?– MultiLine: True tillader flere linier– Lines: array of strings, en for hver linie i tekstboksen– ScrollBars: none, horizontal, vertical eller både horiz. &
vert.
– AcceptsReturn & AcceptsTab: skal brugeren kunne bruge
tabulator og return
![Page 35: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/35.jpg)
35Nordjyllands Erhvervakademi - 2007
Text box methods
• Interessante metoder:– Clear: fjern indholdet– Cut, Copy, Paste: interaktion med clipboard’et– Undo: undo sidste rettelse i
tekstboksen– Select, SelectAll: vælg noget af/alt indholdet
![Page 36: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/36.jpg)
36Nordjyllands Erhvervakademi - 2007
Text box hændelser
• Interesante hændelser:– Enter, Leave: forekommer, når fokus ændres– KeyPress: forekommer når en ascii tast aktiveres– KeyDown, KeyUp: forekommer ved alle taste
kombinationer– TextChanged: forekommer når teksten ændres
– Validating and Validated• Validating giver dig mulighed for at afvise invalide input
![Page 37: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/37.jpg)
37Nordjyllands Erhvervakademi - 2007
private void txtName_Validating(object sender, System.ComponentModel.CancelEventArgs e){ if (this.textBox1.Text.Trim() == "") { // invalid input! MessageBox.Show("Please enter name or id..."); e.Cancel = true; // cancel returns focus back to text box }}
Eksempel: input invalidation
• Text boxe kræver ofte validering– .NET tilbyder Validating event– bliver trigget når box’en mister focus
cmdOk.CausesValidation = True
cmdCancel.CausesValidation = False
![Page 38: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/38.jpg)
38Nordjyllands Erhvervakademi - 2007
Caveats• Validating event’en har nogle “punkter"…• Dels er den fejlbehæftet:
– hvis cancel knappen er sat til blive trigget af ESC, bliver den stadig valideret
– hvis brugeren klikker X for at lukke form’en, bliver den stadig valideret
• Dels, må boksen få fokus:– hvad hvis brugeren trigger OK via Enter (default)?– hvad hvis brugeren klikker OK før den får fokus?
![Page 39: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/39.jpg)
39Nordjyllands Erhvervakademi - 2007
Work-arounds…
• Skjul boksen• Lad være med at sætte form’ens CancelButton property• Sikre validation i OK knap:
private void cmdOK_Click(object sender, System.EventArgs e) { foreach (Control c in this.Controls) if (c is TextBox) { // check for valid input... c.Focus(); // give control focus, then validate if (!this.Validate()) return; }}
![Page 40: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/40.jpg)
40Nordjyllands Erhvervakademi - 2007
Radio buttons og Check boxes
• Tillader brugeren at vælge en eller flere options
• Radio buttons:– brugeren kan kun vælge én (mutually-exclusive)
• Check boxes:– brugeren kan vælge en eller flere (uafhængige)
• Properties & events:– Checked: True hvis valgt, False hvis ikke– CheckedChanged forekommer når "Checked"
ændres
![Page 41: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/41.jpg)
41Nordjyllands Erhvervakademi - 2007
Group boxes
• Visuel gruppering af controls• Tillader iteration gennem gruppens elementer…
foreach (RadioButton rb in this.groupBox1.Controls) if (rb.Checked) MessageBox.Show(rb.Name);
![Page 42: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/42.jpg)
42Nordjyllands Erhvervakademi - 2007
Customer[] customers; . . // create & fill array with objects... .
// display customers in list box foreach (Customer c in customers) this.listBox1.Items.Add(c);
List Boxes
• God til at vise /vedligeholde en liste af data– liste af strings– liste af object (list box kalder selv ToString())
// display name of selected customer (if any)Customer c;c = (Customer) this.listBox1.SelectedItem;if (c == null) return;else MessageBox.Show(c.Name);
![Page 43: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/43.jpg)
43Nordjyllands Erhvervakademi - 2007
Advarsler
1. Skriv ikke kode der afhænger af rækkefølgen af events…– rækkefølgen er aldrig garanteret– Hver event behandles uafhængigt af andre
2. Noget kode trigger events bagved koden…– en naturlig sideeffekt af event-drevet programmering
this.textBox1.Text = "new value" // triggers TextChanged
![Page 44: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/44.jpg)
44Nordjyllands Erhvervakademi - 2007
Kun toppen af isbjerget…
• Menuer, dialoger, toolbars, etc.
• Tusinder af andre controls– .NET and ActiveX– højreklik på Toolbox– "Customize Toolbox"
![Page 45: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/45.jpg)
45Nordjyllands Erhvervakademi - 2007
Opsamling
• Event-drevet programmering er meget intuitivt i GUI apps
• Forms er det første skridt i GUI design– hver form repræsenterer et vindue på skærmen– Konstruktion af GUI foregår ved drag-and-drop
• Brugeren interagerer primært med formens control-objekter– labels, text boxes, buttons, etc.– GUI programmering er control programmering!!!
![Page 46: WinForms: GUI Programmering i .NET](https://reader036.vdocuments.site/reader036/viewer/2022062301/5681310a550346895d973ce8/html5/thumbnails/46.jpg)
46Nordjyllands Erhvervakademi - 2007
Referencer
• Books:– S. Lippman, "C# Primer"– R. Grimes, "Developing Applications with Visual Studio .NET"
• De bedste bøger om GUI er pt VB-baserede:– J. Savage, "The VB.NET Coach" (introductory)– F. Balena, "Programming Microsoft VB .NET (Core
Reference)" (broad coverage, intermediate level)