Universal Apps ja Visual Studio 2015

Universal Windows App Development

Visual Studioon on asennusvaiheessa (tai myöhemmin) liitettävä Universal Windows App Development -tools lisukkeet. Ilman näitä et voi toteuttaa UWP-sovelluksia. Sinun täytyy määritellä myös käytettävä Windows 10 -laite kehittäjätilaan (developer mode) Windowsin asetuksien kautta.

Ensimmäinen UWP-sovellus

UWP mallipohja (template)

Universal Apps / Visual Studio 2015 Tempalate mahdollistaa kehittäjien tehdä sovelluksia, joiden kohde on Windows 10 työpöytä/kauppa, tabletit tai esimerkiksi matkapuhelimet. Mallipohja (template) mahdollistaa saman sovelluksen julkaisemisen eri alustoille. Sovelluksen toteuttaminen on käyttöliittymän rakentamista valmiista komponenteista ja ohjelmointikoodin tuottamista.

Luo uusi projekti

Avaa Visual Studio ja luo uusi projekti. Käytä pohjana Visual C#:n Blank App (Universal Windows) mallipohjaa.

Solutionin sisältö

Tämän jälkeen Visual Studio luo käyttöösi projektin, joka mahdollistaa UWP-sovelluksen toteuttamisen. Huomaa, että solutioniin muodostuu vain yksi projekti. Oletuksena projekti sisältää vain yhden sivun (page), pääsivun. Tämä pääsivu (MainPage.xaml) on sivu, joka näytetään loppukäyttäjälle sovelluksestasi ensin. Sovelluksesi voi koostua useammasta näytöstä (pagesta). Pääsivuun liitetty ohjelmointi toteutetaan MainPage.xaml.cs-tiedostoon.

Pääsivun muokkaaminen

Pääsivun sisältöä voidaan muokata käyttämällä Visual Studion Design -editoria tai ohjelmoimalla pääsivuun liitettyä cs-tiedostoa. Pääsivu saadaan avautumaan Visual Studion Design -editoriin tuplaklikkaamalla MainPage.xaml-tiedostoa Solution Explorerista. Huomaa kuinka Visual Studio antaa muokkaus mahdollisuuden sekä visuaalisesti (yllä) tai XAML-koodiin suoraan koodinäkymän kautta (alla). Pääsivuun liitetty ohjelmointikoodi saadaan näkyville tuplaklikkaamalla MainPage.xaml.cs-tiedostoa Solution Explorerista.

Visual Studion tarjoama editori on kaksisuuntainen eli muutokset design-näkymässä muuttavat myös XAML-koodinäkymää ja päinvastoin.

Komponenttien lisääminen

Visual Studiossa on erittäin paljon valmiina erilaisia komponentteja, joita voidaan ottaa käyttöön omiin sovelluksiin. Komponentit löytyvät Visual Studion Toolbox-valinnan kautta (näkyvillä Visual Studiossa vasemmalla reunalla). Toolbox on jaoteltu Common XAML Controls ja All XAML Controls välilehtiin. Komponentti voidaan yksinkertaisesti vetää ja pudottaa sovelluksen design-editorissa näkyvään tilaan.

Vedä ja pudota sovellukseen seuraavat komponentit: Button ja TextBlock. Komponenttien sijoittelulla ei ole tällä kertaa väliä. Huomaa kuinka komponentit ovat näkyvillä design-editorin puolella sekä xaml-koodieditorin puolella. Tutki myös millaisia elementtejä ja arvoa muodostuu xaml-koodieditoriin puolelle.

Lisättyjen komponenttien ominaisuuksien muuttaminen

Komponenttien ominaisuuksia voidaan muuttaa Properties Window:n kautta (valitse: View > Properties Window, jos ei ole näkyvillä). Valitse esimerkiksi Button objekti näytöltä ja tutki mitä eri ominaisuuksia sillä on (samoin TextBlock).

Ominaisuuksien muuttaminen:
* muuta Button objektin nimeksi infoButton Name-arvon kautta
* muuta Button objekti näyttämään tekstiä "Click Me!" Content-arvon kautta
* muuta TextBlock objektin nimeksi infoTextBlock Name-arvon kautta
* muuta TextBlock objektin näyttämä teksti tyhjäksi (sisältö näytetään myöhemmin Button objektin klikkauksen jälkeen)

Tapahtumien lisääminen:
* valitse Button objekti näytöltä ja paina Properties Window:n oikeassa yläkulmassa olevaa salama-nappia
* tuplaklikkaa tapahtumista Click-tapahtumaa -> sovellus generoi ja liittää Button objektiin tapahtumankäsittelyn

Visual Studio siirtyy suoraan MainPage.xaml.cs-tiedoston editointiin ja tarkemmin Button objektiin liitetyn tapahtumankäsittelijän ohjelmointiin. Huomaa generoidun metodin nimi (infoButton_Click). Suuremmissa ohjelmissa on erittäin tärkeä nimetä käyttöliittymä objektit tarkoin, jotta generoitu ohjelmointikoodi pysyy myös hyvin nimettynä (ja hallussa).

Lisää alla oleva ohjelmointi infoButton objektin tapahtumankäsittelijään. Koodi muuttaa käytössä olevan infoTextBlock objektin sisältöä.

    private void infoButton_Click(object sender, RoutedEventArgs e)
    {
        infoTextBlock.Text = "My first UWP app!";
    }
    

Sovelluksen ajaminen

Valitse Visual Studion debug valinnan oikealta puolelta "Local Machine" ja sovelluksesi käännetään ja ajetaan paikallisessa koneessa. Mahdolliset kohteena olevat laitteet riippuvat siitä millaisia eri emulaattoreita tai oikeita laitteita on Windows 10 koneessasi käytössä.

Sovelluksesi pitäisi pienen hetken kuluttua olla ajossa Windowissasi.

Sovelluksen esikatselu eri laitteilla

Visual Studio mahdollistaa sovelluksen esikatselun suoraan Device drop/down -valinnan kautta. Opintojakson harjoitustyöt suunnitellaan toimivan 13.3' Desktop laitteilla ellei opiskelijalla ole erikseen halu toteuttaa sovellustaan jossain muussa koossa/laitteelle.

 

Lisätietoa:
Create a "Hello, world" app (XAML)