Julekalender 2004 om Whidbey


16. dec 2004 17:32

Dagens tip handler om Whidbeys to nye kontroller til styring af layouts i Windows applikationer.

Udviklingen af brugergrænseflader til Windows applikationer foregår for en stor del efter de forhåndenværende søms princip. Ved hjælp af paneler, anchoring og docking, og måske endda egne user controller når det går højt, kan man med tiden få grænsefladen til at se ud som ønsket. Og måske endda også få den til at blive ved med at se ud som ønsket, når brugeren ivrigt begynder at resize grænsefladen.

Med Whidbey bliver udviklingen af brugergrænseflader, der kan skaleres pænt, en hel del nemmere. Der kommer nemlig to nye kontroller til familien. Begger er til styring af grænsefladens layout, og begge er iøvrigt sub klasser af System.Windows.Forms.Panel klassen.
De to layout kontroller er

TableLayoutPanel

TableLayoutPanel er en Windows Forms pendant til tabeller, som man kender dem fra Html.
Ved hjælp af rækker og kolonner kan man lave et net af celler, som styrer indholdets horisontale og vertikale positionering i forhold til hinanden.

I designeren ser det således ud, når man anvender TableLayoutPanel:

TableLayoutPanelets rækker sættes ved hjælp af to properties. RowCount der angiver antallet af rækker, og RowStyles, der angiver properties for de enkelte rækker. Det er RowCount som bestemmer antallet af rækker i tabellen, også selvom antallet af RowStyles overstiger værdien af RowCount.

RowStyles editeres i en RowStyle Collection Editor, som ser ud som nedenstående

Som det fremgår er de properties, der kan sættes for en RowStyle: Height, som angiver højden af rækken, og SizeType, som angiver hvordan Height skal fortolkes.

SizeType kan være en af følgende

  • AutoSize - Rækkens højde justeres automatisk
  • Absolute - Height er angivet i pixels.
  • Percent - Height er en procentsats af panelets samlede højde.

Tilsvarende findes der for kolonner en ColumnCount og en ColumnStyles property til specificering af antallet og bredden på kolonner.

For de enkelte celler er der den begrænsning, at der kan kun være én kontrol i hver celle. Ønsker man at have f.eks. en label med en valutaangivelse efter en textbox (som i ovenstående eksempel), må man lave en kolonne mere til label'en.

Også de kontroller, der er placeret på et TableLayoutPanel har nogle properties, som styrer hvordan kontrollen er placeret i layoutet.

Row og Column angiver som navnene antyder hvilken celle i tabellen kontrollen er placeret i. RowSpan og ColumnSpan svarer til rowspan og colspan, som man kender det i tabeller i Html. Er ColumnSpan sat til 2 vil kontrollen spænde horisontalt over to celler. Er RowSpan sat til 2 vil kontrollen spænde vertikalt over to celler.

Anchor og Dock for kontroller, der ligger på et TableLayoutPanel, er i forhold til den omgivende celle.

FlowLayoutPanel

I et FlowLayoutPanel bliver kontroller placeret i rækkefølge efter hinanden. Hvad der menes med 'efter hinanden' kan tilpasses i det enkelte FlowLayoutPanel, hvor der er mulighed for at skrue lidt på et par properties.

I designeren ser kunne det se således ud, når man anvender FlowLayoutPanel

Eller det kunne se således ud

Som det kan ses kan man ændre den retning panelet bliver fyldt op i. Dette styres i FlowLayoutPanelet af en property ved navn FlowDirection.
FlowDirection kan sættes til en af fire forskellige værdier

  • LeftToRight - Fyld fra venstre mod højre
  • RightToLeft - Fyld fra højre mod venstre
  • TopDown - Fyld fra top til bund
  • BottomUp - Fyld fra bund til top

Udover FlowDirection har en property ved navn WrapContents også indflydelse på, hvordan panelet bliver fyldt.
Hvis FlowDirection er sat til LeftToRight har WrapContents følgende effekt. Er WrapContents er sat til true vil kontroller wrappe ned på en ny linie, når de overskrider panelets højre kant. Hvis WrapContents er sat til false bliver kontrollerne ikke wrappet ned på den næste linie.
Tilsvarende gælder hvis FlowDirection er sat til TopDown. Er WrapContents er sat til true vil kontroller wrappe op på øverste linie i en ny 'kolonne', når de overskrider panelets bund. Hvis WrapContents er sat til false bliver kontrollerne ikke wrappet.



Abonnér på mit RSS feed.   Læs også de øvrige indlæg i denne Blog.