iPhone-käytettävyystestilaboratorio yhden kaapelin hinnalla

Käytettävyystesti on yksi menetelmä sovellusten käytettävyyden tutkimiseen. Testissä havainnoidaan käyttäjää, joka suorittaa ennalta määriteltyjä tehtäviä vakioiduissa olosuhteissa. Näin päästään usein kiinni ongelmiin, joita suunnittelijat itse eivät ole tulleet ajatelleeksi ja joita käyttäjät eivät osaa kyselyissä tuoda esiin.

Perinteiset käytettävyystestit ovat kehittyneet psykologian alan tarkan tieteellisistä tutkimuksista, ja niillä on yhä hieman kankea maine. Testin järjestääkseen ei kuitenkaan välttämättä tarvitse puoliläpäiseviä seiniä ja salaisia tarkkailuhuoneita – ei edes valkoista laboratoriotakkia.  Steve Krugin Rocket Surgery Made Easy on hyvä katsaus ketterään käytettävyystestaukseen.

Mobiilisovellusten erityispiirteet

Mobiilisovellukset aiheuttavat omat haasteensa testaukselle. Verkkosivustoja testattaessa on helppoa istuttaa testihenkilö tietokoneen taakse ja luottaa, että hän pysyy paikoillaan. Esimerkiksi Silverback-sovelluksella saa kätevästi nauhoitettua näytön tapahtumat hiiren klikkauksineen ja näppäimenpainalluksineen sekä samalla ikuistettua käyttäjän puheet ja ilmeet koneen web-kameran avulla. iPhonen näyttöä ei kuitenkaan voi tallentaa samalla tavalla.

iPhone-testausta varten on nähty erilaisia hökötyksiä, joilla web-kameran saa kiinnitettyä puhelimeen, mutta puhelimen tuntuma muuttuu merkittävästi tällaisesta ylimääräisestä virityksestä. Toinen vaihtoehto on pitää puhelin jokseenkin paikallaan pyödällä ja käyttää staattista kameraa, mutta kovin realistista kuvaa käytöstä tämäkään ei anna.

Ulkoinen näyttö avuksi

iPhone 4S sallii viimein näytön kuvan peilaamisen sellaisenaan ulkoiselle näytölle, mikä mahdollistaa testauksen huomattavasti kameratelineitä luonnollisemmin. Näin se käy:

Testikäyttäjä istuu pöydän päädyssä. Testin vetäjä istuu hänen vieressään. Puhelimen kuva  näkyy testikäyttäjän takana.

Puhelin on kiinni näytössä kaapelilla, jolloin puhelinta voi pitää luontevasti kädessä ja tilanne vastaa pitkälti tavanomaista puhelimen käyttöä – sovelluksesta riippuen tietty.

Pöydällä lojuvan tietokoneen web-kamera kuvaa yhtä aikaa testikäyttäjää ja hänen takanaan näkyvää kuvaa puhelimen tapahtumista. Lisäksi tallennetaan testikäyttäjän ja testin vetäjän käymä keskustelu.

Tilanteen voi nauhoittaa esimerkiksi Quicktime-sovelluksella. Kannattaa valita laaduksi Maximum. (Yllä olevassa kuvakaappauksessa se tosin unohtui tehdä.)

Halutessaan kuvan voi jakaa myös edelleen esimerkiksi Skypen avulla. Näin useampi tarkkailija tai vaikka asiakkaan edustajat pääsevät näkemään, kuinka käyttö sujuu. Koska samaa kameraa ei voida nauhoittaa ja jakaa yhtä aikaa, yksi vaihtoehto on kuvapuhelun soittamisen sijaan jakaa Skypellä työpöytää, johon on jätetty auki tallentava Quicktime-ikkuna.

Jos näyttö on tarpeen jakaa usean osallistujan kesken, yksi kätevä ilmaispalvelu on join.me.

Loppupohdinta

Käytännössä tämäkin asetelma on hieman raskas. Usein riittää, että antaa puhelimen käyttäjän käteen ja katsoo vierestä, kuinka käyttö sujuu.

Toteutuksen heikoin lenkki on tietokoneen kamera, jonka tuottama kuvanlaatu paljastaa huonosti yksityiskohtia. Käytännössä yksityiskohdat tulevat kuitenkin usein esiin testihenkilön ja testin vetäjän keskustelusta. Parempaa kuvanlaatua tarvittaessa voidaan toki yhdistää ulkoinen kamera tietokoneeseen ja jakaa tämä kuva eteenpäin. Ihmisillä vain on tapana jännittää kameraa enemmän kuin harmitonta sammutetun näköistä tietokonetta.

Jos tarkkailuhuone on lähellä testitilaa, voidaan myös vetää kaapeli huoneiden välille ja yhdistää puhelin suoraan tarkkailuhuoneen näyttöön. Siitä huolimatta on hyödyllistä olla myös videoyhteys käyttäjään, jotta ilmeet ja eleet pystyy näkemään.

Web-testaukseen verrattuna testin vetäjän havainnointi korostuu tässä menetelmässä, sillä käyttäjän painallukset eivät näy ulkoisella näytöllä. Näin testin vetäjä on ainoa, joka näkee mitä käyttäjä todella tekee.

Tämäkin menetelmä rajoittuu pitkälti staattisesti käytettäviin sovelluksiin ja olettaa, että käyttäjä pysyy paikallaan.

Vastaava toteutus soveltuu samoin rajoituksin myös iPad-sovellusten testaamiseen. iPadit tukevat näytön jakamista alkaen versiosta 2.

Mobiiliselaimen tunnistaminen CSS:llä

Selainten tunnistaminen tulee monesti kuvioihin silloin, kun joko sivun tyylejä, logiikkaa tai sisältöä muokataan sopimaan erikokoisille näytöille tai mobiiliselaimelle. Tähän on olemassa monenlaisia tekniikoita, ja tässä blogipostauksessa esittelen tavan tehdä tämä CSS-sääntöjen avustuksella.

Media Queryn käyttö

CSS:ssä pystyy määrittämään CSS-tyylien säännöt sen perusteella, minkä levyinen ikkuna tai laite on.Tämä onnistuu CSS:n media query -ominaisuuden avulla alla kerrotulla tavalla. Parametreina voidaan käyttää esimerkiksi laitteen leveyttä ja korkeutta sekä pikselitiheyttä.

1. CSS-tyylitiedoston aktivoiminen headissa ehtojen perusteella

<link rel="stylesheet" media="screen and (min-device-width: 320px) and (min-device-pixel-ratio:2)" href="retina-styles.css"/>

2. CSS-säännön aktivointi ehtojen perusteella

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:2) and (-moz-min-device-pixel-ratio:2) {
display:block;
}

3. CSS-tiedoston sisällyttäminen toiseen CSS-tiedostoon

@import url(styles-retina-iphone.css) screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:2) and (-moz-min-device-pixel-ratio:2)

Mobiilikehityksen kannalta tärkeimpiä parametrejä ovat:
min-device-width ja max-device-width, jotka rajoittavat tyylin käyttöä tietyn levyisille näytöille. Näillä saadaan sivuston tyylit mukautumaan mobiilinäytölle.

min-device-pixel-ratio tarkoittaa näytön “pikselitiheyttä”. Tyypillisen tietokoneen näytön ja peruspuhelimen arvo on 1, mutta esimerkiksi iPhone 4:llä ja iPhone 4S:llä tämä arvo on 2. Selitys tälle on ns. retina-näytössä: näytön koko on iPhone 3G:ssä ja iPhone 4:ssä on sama, mutta näytön leveys ja korkeus on kaksinkertainen. Tällöin sivustolla olevat kuvat näkyvät iPhone 4:n tarkemmalla näytöllä pikselöityneenä ja epätarkkoina, sillä käytetyn grafiikan resoluutio on liian pieni. Tämän säännön avulla voidaankin saada käyttöön tarkemmat grafiikat siihen pystyville näytöille.

@media handheld on kiinnostava parametri, mutta sen selaintuki on valitettavan rajallinen. Esimerkiksi Safari jättää tämän parametrin kokonaan huomiotta, joten parametri ei tunnista iPhonea. Tätä parametria en siis suosittele käytettävän.

orientation tarkoittaa puhelimen asentoa, eli onko puhelin vaaka- vai pystysuunnassa. orientation:landscape tarkoittaa että puhelinta pidetään vaakasuunnassa, kun taas orientation:portrait tarkoittaa pystysuuntaa.

Media query CSS3:n tuoma uusi ominaisuus, joka on jo kuitenkin nykyään erittäin laajasti tuettu. Ajantasaisen listan tuetuista selaimista löydät caniuse.com-sivustolta.

Media Queryt Qvikin kotisivuilla

Qvikin kotisivuilla on käytetty media queryjä sovittamaan sivuston ulkoasu näytön koon mukaiseksi. Sivustolla käytetään kolmea eri moodia: täysileveä, portrait ja mobiili. Täysileveässä moodissa käytettävät tyylit määritellään niin, että sen leveys on vähintään 1024 pikseliä:


@media screen and (min-device-width:1024px) {
...
}

Tällä leveydellä sivun kokonaisleveys on 1000 pikseliä. Yksi sivuston käyttöliittymäelementeistä on neljän, kiinteän leveyden laatikon ‘gridi’ joka näyttää kokoleveällä näytöllä tältä:

Jos tämä osuus näytettäisiin tällaisenaan pienemmällä näytöllä, boksit joko leikkaantuisivat, tai niitä joutuisi skrollaamaan ja zoomaamaan. Esimerkiksi tableteille (kuten iPad pystymoodissa, jonka leveys 768px) on tässä tapauksessa käytännöllistä esittää tämä gridi eri tavalla. Tyylitiedostossa nämä tyylit määritellään seuraavasti:


@media screen and (min-device-width:321) and (max-device-width:999) {

}

Tällä tavalla määritellyt tyylitiedostot näkyvät esimerkiksi iPhonen vaakatilassa ja iPadin pystytilassa. Alla kuvankaappaus Qvikin kotisivuilla:

Laatikot on asetettu 2×2 gridiin, jolloin ne ovat luettavia. Koska laatikoiden tarkoitus on tässä tapauksessa pysyä tasalevyisenä, niin ne eivät vie enää koko ruutua tilaa. On kuitenkin täysin mahdollista tehdä niin, että kaksi laatikkoa veisivät aina sen 50% ikkunan leveydestä. Tällöin niiden leveys määritellään CSS:ssä prosenttilukuna sen containerista.

Qvikin sivut on tehty myös näyttämään käytännölliseltä myös mobiililaitteella, eli 320px tai kapeammilla näytöillä:

Lisätietoa media queryjen käytöstä löytyy englanniksi W3C:n sivuilta.

Reaaliaikaista kuvankäsittelyä OpenGL ES 2.0:lla

Näytönohjaimen (GPU) shader prosessorit tarjoavat hyvän mahdollisuuden tehdä tehokasta – ja toteutuksesta riippuen rinnakkaista – laskentaa CPUn ohella. Nykyisten mobiililaitteidenkin shaderit ovat huomattavan tehokkaita; niiden on kyettävä pyörittämään 3D-pelejä ~30fps jotta käyttökokemus ei kärsi, ja tämä puolestaan tarkoittaa hurjaa määrää laskutoimituksia sekunnissa. Kuten edeltävässä postauksessani mainitsin, signaalinkäsittely on yksi luonnollinen sovelluskohde. Tässä postauksessa katsotaan hieman miten valjastaa GPU reaaliaikaisen kuvankäsittelyn käyttöön ja toteutetaan geneerinen konvoluutiomatriisi shaderilla. Toteutus on iPhone-spesifinen mutta helposti portattavissa muille alustoille.

Esimerkkiämme varten kuvadata haetaan laitteen kameralta; aina kun saadaan uusi kuva, se uploadataan OpenGL:lle tekstuuriksi. Tämä tekstuuri sitten renderöidään konvoluutioshaderin läpi toiseen tekstuuriin. Tämän uuden tekstuurin data luetaan ulos OpenGL:ltä ja käytetään – esimerkin vuoksi vain näytetään ruudulla. Pelkästään tähän käyttöön tuloksen kierrättäminen tekstuurin / UIImage kautta on tietysti kamalan tehotonta, kun se voitaisiin suoraan piirtää näyttömuistiin.  Tämänkaltainen toteutus kuitenkin mahdollistaisi monenlaista käsittelyä tulosdatalle. Lisäksi koodiesimerkki näyttää kuinka OpenGL ES 2.0:lla renderöidään tekstuuriin. Katso prosessin kuvaava tilakaavio alla:

Konvoluutiofiltterit

Konvoluutio ja kuvankäsittelyyn käytetyt matriisit (“kernel”) ovat tämän artikkelin laajuuden ulkopuolista asiaa – katso linkit postauksen lopussa – mutta esittelen toimintaperiaatteen nopeasti niin shaderin koodi aukeaa ehkä paremmin.

Käytän tässä 3×3 kerneleitä suorituskyvyn ja koodin selkeyden vuoksi; 5×5 kernelillä saadaan aikaan huomattavasti parempia tuloksia. Otetaan käsittelyyn helppotajuisin käytetyistä kerneleista, blur kerneli:

|  1/9     1/9     1/9   |
|  1/9     1/9     1/9   |
|  1/9     1/9     1/9   |

Tehdessä muunnosta tälläisellä matriisilla, jokainen kuvan pikseli käsitellään asettamalla matriisin keskimmäinen alkio sen kohdalle, jolloin matriisin muut alkiot asettuvat ympäröivien pikselien “kohdalle”; sitten keskipikselille lasketaan uusi arvo kertomalla jokainen pikseli arvolla joka matriisissa on sen kohdalla ja laskemalla näiden kertolaskujen tulokset yhteen. Blur-matriisin tapauksessa pikseli ja kaikki sen naapurit kerrotaan 1/9:llä, jolloin pikselin arvoksi tulee 9 pikselin keskiarvo. Konvoluutiokerneleillä voi toteuttaa vaikkapa viivantunnistusta, blurreja ja sharpenointia.

Esimerkkitoteutus

Toteutus sisältää geneerisen convolution kernel shaderin (Convolution.fsh) ja neljä eri kerneliä: emboss, blur, gradient, sharpen. Käytettyä kerneliä voi vaihtaa lennosta täppäämällä ruutua. Sovellus syöttää kuvia iPhonen pääkameralta GLSLn läpi ja piirtää tuloksen ruudulle. Ohessa muutama screenshot:

Macbook Pro piirrettynä Embossinging filterin läpi
Macbook Pro piirrettynä Embossinging filterin läpi
Macbook Pro piirrettynä Sharpening filterin läpi
Macbook Pro piirrettynä Sharpening filterin läpi

Siinäpä tämänkertainen anti, ensi episodissa sitten taas jotain aivan muuta!

Lisää luettavaa

Esimerkkitoteutuksen koodi (36kB)

Mobiilisovellus web-tekniikoilla: perusteet

Perinteisillä web-tekniikoilla on nykyään mahdollista tehdä natiivisovelluksen kaltaisia, puhelimen tai tabletin näytöllä paremmin käytettäviä sovelluksia. Tällöin sovellus on käytettävissä puhelimen web-selaimella, tai se voidaan paketoida natiiviapplikaatioksi esimerkiksi PhoneGap -kirjaston avulla. Web-applikaation ero (mobiilioptimoituun) web-sivustoon on natiiviapplikaation kaltaiset komponentit, mahdollinen offline-tila sekä animoidut siirtymät näkymien välilä. Lisäksi web-applikaatio voi sisältää puhelimen natiiviominaisuuksia hyödyntäviä toimintoja, kuten esimerkiksi kameraa tai kiihtyvyysanturia.

Tässä artikkelissä kuvataan mobiiliapplikaation kehityksen perusteet – olettaen että lukija on tutustunut web-kehityksen saloihin etukäteen. Jos et ole ennen tehnyt web-sivustoja, niin Google on listannut oivia web-tutoriaaleja, joilla pääsee helposti alkuun. Suomenkielistä sisältöä kaipaaville sisältöä on vähän hankalammin löydettävissä, mutta esimerkiksi Haaga-Helian verkkojulkaisusivuilta löytyy aiheesta kohtuullisesti suomenkielistä sisältöä.

Mobiiliapplikaation luonti

Esimerkiksi iOS- ja Android-ympäristöt tarjoavat mahdollisuuden lisätä web-applikaation työpöydälle. Tällöin iOS:llä web-applikaatio näkyy ohjelmanvaihtonäkymässä, ja sillä on ikoni ja ns. splashscreen natiivisovelluksen tapaan. Alla on esimerkkipohja puhtaalle mobiiliapplikaatiolle:

<!DOCTYPE html>
<html>
    <head>
        <title>Testiohjelma</title>
        <meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1;user-scalable=no;">

        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

        <link rel="apple-touch-startup-image" href="images/startup.png">

        <link rel="apple-touch-icon" href="phone-icon.png"/>
        <link rel="apple-touch-icon" sizes="72x72" href="pad-icon.png"/>
        <link rel="apple-touch-icon" sizes="114x114" href="phone-icon-retina.png"/>
        <link rel="apple-touch-icon" sizes="144x144 href="pad-icon-retina.png"/>
    </head>
    <body>
        Tekstiä.
    </body>
</html>

Web-applikaation asetukset laitetaan <head> -tagien sisälle. Tämä esimerkki määrittää web-applikaatiota seuraavasti:

<meta name="viewport" content=""> määrittää sovelluksen näkyvän alueen asetukset: sivu on aina laitteen näkymän levyinen, sekä pysty- että vaakasuunnassa käytetty. Tyypillisellä web-sivustolla on zoomausominaisuus, joka kuitenkin on monesti mobiiliapplikaatiossa epätoivottu ominaisuus. Tässä esimerkissä tämä toiminnallisuus on disabloitu määrittämällä viewportille user-scalable=no. Lisää viewport-metatagin käytöstä löytyy esimerkiksi Mozilla developer networkin dokumentaatiosta (englanniksi).

<meta name="apple-mobile-web-app-capable"> ja <meta name="apple-mobile-web-app-status-bar-style"> ovat Applen iPhonessa ja iPadeissa toimivat meta-tägit. Näistä ensimmäinen aktivoi applikaatiomaisen käytön, jolloin ohjelmaa käytettäessä Safari piilottaa sen osoitepalkin. Lisäksi kun ohjelma lisätään kotinäytölle ja avataan klikkaamalla ko. lisättyä applikaatioikonia, ohjelma avataan kokoruutunäkymään ilman ylä- ja alapalkkia.

<link rel="apple-touch-icon"> määrittää ohjelman ikonin kun sen lisää työpöydälle. Nimestään huolimatta se toimii myös Android-laitteilla versiosta 2.1 eteenpäin. Esimerkissä on lisätty ikoni useammalle eri koolle – esimerkiksi 114×114 on ikoni iPhonen retina-näytölle, jossa ikonin standardikoko on juuri 114 x114. Uuden retina-iPadin kuvakkeen koko on oletettavasti 144×144, mutta tätä tietoa ei ole vielä vahvistettu. Lisätietoa ikoneiden määrittämisestä ja muista Mobile Safarin web-applikaatioiden asetuksista löytyy Applen Safari Web Content Guidesta.

Mobiiliohjelman kehitys

Mobiilisovelluksen käyttöliittymät ohjelmoidaan käyttäen HTML, CSS ja JavaScript -tekniikoita. HTML on kuvauskieli, joka jäsentää sisällön ja CSS luo sisällölle tyylit. JavaScriptillä tuodaan sisältöön elämää – esimerkiksi animaatiota tai transitioita. On teoriassa mahdollista kehittää mobiiliohjelmistoja puhtaasti käyttämällä näitä tekniikoita, mutta käytännössä kannattaa kuitenkin ottaa käyttöliittymän luonnin tueksi jokin valmiista mobiilikehitysframeworkeista.

Suosituimpia mobiiliframeworkeja ovat Sencha Touch, jQuery Mobile, The M-Project ja jQTouch. Nämä kaikki tarjoavat erilaisen valkoiman komponentteja, jotka tuovat mobiilimaisen vaikutelman web-applikaatioon: näkymien välisiä transitioita, erilaisia listanäkymiä, ajax-lomakkeita jne.

Web-applikaatioiden perinteisenä heikkoutena on nähty se, ettei niistä pääse käsiksi ohjelmistojen natiiveihin ominaisuuksiin. Tähän on kuitenkin ilmestynyt JavaScript-työkaluja, joiden avulla pääsee yleisimpiin ominaisuuksiin – näistä tunnetuimpia ovat PhoneGap ja Trigger.io. Molemmista pystyy esimerkiksi avaamaan puhelimen kameran ja yhteystiedot. Dokumentaatiota kannattaa kuitenkin tutkia tarkkaan, sillä jokainen ominaisuus on tuettu vain tietyillä alustoilla.

Windows Phone – Listbox animaatiot

Taustaa

Animaatiot ja siirtymät (transitiot) ovat olennainen osa Windows Phone sovellusten maailmaa. Liikkeen ja vasteen lisääminen näytössä oleviin kohteisiin on sinänsä yksinkertaista, kunhan vain hallitsee työkalut ja menetelmät. Listauksiin (Listbox) kajoaminen on kuitenkin hiukan monimutkaisempaa kuin yksittäisten kohteiden, kuten esimerkiksi kuvan liikuttelu. Alla perehdytään Listbox-listausvalikon elävyttämiseen.

Rakennetaan ohjelman runko

Tarvitsemme Listbox-esimerkin, jota voimme animoida. Kohteena voi käyttää omaa Listbox:ia tai alla olevaa esimerkkiä. MVVM:ää ei ole käytetty esimerkissä yksinkertaisuuden vuoksi.

  • Luo uusi projekti (Silverlight for Windows Phone)
  • Kopioi alta koodikatkelmat uuden projektin MainPage.xaml- ja MainPage.xaml.cs-tiedostoihin.

MainPage.xaml:

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Listaus" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Kaupunkeja" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Margin="45,151,33,43" x:Name="lista">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Margin="8,8,1,0">
                                <StackPanel Background="White" Width="380">
                                    <TextBlock Margin="8,8,1,0" Foreground="Black"  Text="{Binding}"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

MainPage.xaml.cs:

List<string> nameList;

// Constructor
public MainPage()
{
InitializeComponent();
nameList = new List<string>();
nameList.Add("Helsinki");
nameList.Add("Oulu");
nameList.Add("Turku");
nameList.Add("Joensuu");
nameList.Add("Lahti");
nameList.Add("Tampere");
lista.ItemsSource = nameList;
}

Suorita ohjelma. Näkymän pitäisi olla alla olevan kuvan mukainen:

Kuva 1. Alkutilanne.

Lisätään vastetta listauksen kohteisiin – osa 1

Listauksen kohteiden koskettaminen ei anna erikoisempaa visuaalista vastetta kuvan 1 tilanteessa. Lisätään “tilt”-efekti erittäin vähällä vaivalla.

  • Lataa ja asenna Silverlight toolkit
  • Lisää projektiin viittaus (reference) Visual studiossa “Microsoft.Phone.Control.Toolkit.dll”-tiedostoon, joka ladattiin edellisessä kohdassa.
  • Lisää koodit:

MainPage.xaml-sivun alkuun:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

sekä toolkit:TiltEffect.IsTiltEnabled=”True”- lisäys ListBox-määrittelyyn:

<Grid>
<StackPanel Margin="8,8,1,0" toolkit:TiltEffect.IsTiltEnabled="True">
<StackPanel Background="White" Width="380">
<TextBlock Margin="8,8,1,0" Foreground="Black"  Text="{Binding}"/>
</StackPanel>
</StackPanel>
</Grid>

Suorita ohjelma. Kosketa ListBoxin kohteita. Voidaan huomata, että listaus on muuttunut paljon elävämmäksi, koska listauskohta “antaa myöten” kosketukselle.

Lisätään vastetta listauksen kohteisiin – osa 2

Osa 1:ssä luotiin pieni kosketusvaste listauskohteisiin olemassa olevan työkalusetin (toolkit) avulla, mutta entäpä oman animaation lisääminen tai määrittely? Se onnistuu seuraavasti:

  • Avaa Expression Blend 4 (klikkaa hiiren oikeaa nappia MainPage.xaml-tiedoston kohdalta Visual Studiossa: “Open in Expression Blend”).
  • Valikosta (kuva 2) “Objects and Timeline” valitse “lista”, eli määritetty ListBox

Kuva 2. ListBox Blendissä.

  • Klikkaa oikeaa hiiren nappia lista:n kohdalla ja valitse “Edit Additional Templates” ja “Edit Generated Item Container (ItemContainerStyle)”, sekä viimeiseksi “Edit a Copy”.
  • “Create Style Resource”-ikkuna avautuu. Voit nimetä tyylin haluamaksesi. Muuta “Define in -> This document”-kohta “ListBox: lista”-vaihtoedoksi ja paina OK.
  • Valitse “ContentContainer” “Objects and Timeline”-lehdykästä.
  • Properties valikko ilmaantuu näkyviin (alavalikkoja: Brushes, Appearance, Layout, Common properties, Transform etc).
  • Viereisestä lehdykästä “States” valitse “Selection States”-kohdasta “Selected”.
  • Valitse jälleen “Objects and Timeline”-lehdykkä.
  • Paina “Show Timeline”-nappia ja aikanäkymä aukeaa. Siirrä keltaista pystyviivaa vetämällä sitä oikealla haluamasi määrä. Valitaan tällä kertaa 0:00,500.

  • Aukaise Transform-valikko Properties-ikkunasta painamalla kolmiota otsikon vieressä. Aseta Projection kohdasta Y:n arvoksi 360.

  • “Object and Timeline”-lehdykässä voit kokeilla saatua efektiä painamalla “Play”-kolmiota aikajanan yläkulmassa.
  • Tallenna työ: File/Save all.
  • Avaa Visual Studio. Työkalu huomauttaa, että tiedostoa on muutettu. Hyväksy muutokset (Yes to all).

Vilkaisemalla MainPage.xaml-tiedostoa voidaan huomata, että koodin määrä on lisääntynyt huomattavasti. Blend-työkalu on generoinut animaatiotoiminnallisuuden automaattisesti.

Suorita ohjelma. Klikkaamalla listauksen yhtä kohdetta voidaan huomata, että valittu kohde pyörähtää akselinsa ympäri ja palautuu alkupaikkaansa. Uudelleen samaa kohdetta painettaessa ei tapahdu mitään, koska valitsemisaktivointi on Selection-tilatyyppiä. Erilaisia aktivointi-triggereitä ja animointisekvenssejä voidaan määritellä helposti soveltamalla yllä annettua ohjetta.