XAML ja käyttöliittymä

Käyttöliittymä yleisesti

Visual Studio ja XAML mahdollistavat näyttävien graafisten käyttöliittymien toteuttamisen. Tarjoilla on useita eri kontrolleja, joilla jokaisella on oma käyttötarkoituksensa. Osa kontrolleista on itsenäisesti toimivia (kuten Button) ja osa kontrolleista ryhmittelevät toisia kontrolleja omalla määräämällä käyttötavallaan. Sovelluksen käyttöliittymä voidaan suunnitella absoluuttisesti, jolloin käyttöliittymän objektit sijoitellaan tarkasti halutuille paikoilleen. Näin ollen käyttöliittymästä tulee hyvin kiinteä ja käyttöliittymä ei reagoi eri näyttökokoihin automaattisesti. Tuolloin joudutaan tekemään kaikille näyttökoille omat käyttöliittymät. Toinen vaihtoehto on suunnitella käyttöliittymä siten, että se reagoi automaattisesti eri näyttökokoon ja ryhmittelee sisällön sen mukaisesti.

Opintojaksolla ei ainakaan tässä vaiheessa keskitytä rakentamaan täysin skaalautuvia käyttöliittymiä, vaan opetellaan perusteita. Katsotaan miten aikaa jää syvällisempään GUI-suunnitteluun jatkossa.

Kontrollien hierarkia

Sovelluksen muodostama käyttöliittymä voidaan XAML-dokumentaatiossa ajatella koostuvan hierarkisesta rakenteesta eli puusta. Osa käytettävissä elementeistä tavallaan ryhmittelee sisälleen määriteltyjä komponentteja niiden määräämällä tavalla. Erittäin pitkälle vietynä näiden rakenteiden avulla voidaan toteuttaa hienoja responsiivia kaikilla näyttölaitekoolla toimiva Windows-sovelluksia. Tässä vaiheessa opintojaksolla esitellään muutamia eri kontrolleja, joiden avulla voidaan kätevästi ryhmitellä toisia kontrolleja.

Grid

Grid määrittelee Windows-sovelluksien käyttöliittymän käyttämään joustavaa ruudukkoa, joka koostuu sarakkeista ja rivistä. Gridin määrittelemät lapset asettuvat käytettävään tilaan niiden määräämien row/column-määreiden mukaisesti (Grid.Row, Grid.Column). Jos Grid-elementille ei määritellä jälkeläisinä Grid.RowDefinitions- tai Grid.ColumnDefinitions-arvoja, voidaan tällöin käyttää eri kontrolleilla esim. Margin-määritteitä kontrollin sijoittelussa (näin tapahtuu oletuksena, kun vedät ja tiputat kontrollin Toolboxista design-näkymään). Tässä tapauksessa kontrollit on kiinteästi määritelty tiettyyn paikkaan käyttöliittymää ja responsiivista kaikilla näyttölaitteilla toimivaa hienoa käyttöliittymää ei voida saavuttaa.

Alla olevassa esimerkissä on määritelty Grid-elementin avulla käyttöliittymässä kaksi saraketta. Ensimmäinen sarake on aina 400 px leveä ja loppu tila otetaan käyttöön niin leveänä kuin mitä käytössä olevasta näyttölaitteesta on saatavilla.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0"...
        <StackPanel Grid.Column="1"...
        ...
    </Grid>
    

Vasemmalla desing-näkymä, keskellä kapeampi näyttö ja oikealla leveämpi. Huomaa kuinka tekstit saavat enemmän tilaa oikealla olevassa näkymässä.

Käytettävien sarakkeiden ja rivien mittoina voidaan käyttää: Auto, * tai kiinteitä numeroarvoja:

• Auto, ottaa tilaa sen verran kuin kontrolli tarvitsee
• *, Auto-arvojen laskennän jälkeen, annetaan loppu tila
• 50, ottaa tilaa 50 pikseliä (eli numeroarvo, 50 tässä esimerkkinä)
• 2*, ottaa tilaa 2 kertaa enemmän kuin aikaisempi *

StackPanel

StackPanel määrittelee sisältämänsä kontrollit yhteen riviin, joka voi olla horisontaalinen tai vertikaalinen. Kontrollin avulla on helppo saada halutut kontrollit järjestykseen/riviin ilman, että tarvitsee tarkasti määritellä jokaisen kontrollin sijaintia.

Alla olevassa esimerkissä keskitetään kolme TextBlock-kontrollia keskelle näyttöä StackPanelin avulla. Määrittelemällä StackPanelille Orientation="Horizontal", saadaan kontrollit vaakatasoon.

Vasemmalla kontrollit vertikaalisti ja oikealla horizontallisesti.

DockPanel

DockPanel tarjoaa helpon tavan asemoida elementtejä vasemmalle, oikealle, ylös ja alas sekä keskelle.

		<DockPanel LastChildFill="True">
		<Button Content="Dock=Top" DockPanel.Dock="Top"/>
		<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
		<Button Content="Dock=Left"/>
		<Button Content="Dock=Right" DockPanel.Dock="Right"/>
		<Button Content="LastChildFill=True"/>
		</DockPanel&glt;
	

RelativePanel (vain UWP)

RelativePanel määrittelee alueen, jonka sisällä kontrollien sijaintia voidaan määritellä suhteellisesti toisiinsa tai itse paneliin nähden.

Alla olevassa esimerkissä sijoitetaan Button-kontrolleja TextBox-kontrollin oikealle puolelle. Toinen Button-kontrolleista toisen alapuolelle.

Huomaa kuinka Button-kontrollit ovat TextBoxin oikealla puolella alekkain.

 

Lisätietoa:
Create a UI with XAML
Define layouts with XAML