WPF-sovellukset Visual Studiolla

WPF on on Microsoftin uuden sukupolven UI framework rikkaan käyttäjäkokemuksen sovellusten luontiin. Se on osa .NET Framework 3.0 ja uudempia. WPF yhdistää sovellusten UI:t, 2D grafiikan, 3D grafiikan, dokumentit ja multimedian yhteen frameworkkiin. Sen vektoripohjainen renderöintimoottori käyttää nykyaikaisten grafiikkakorttien kiihdyttimiä. Tällä saadaan UI nopeammaksi, skaalautuvaksi ja resoluutioriippumattomaksi.

Ensimmäinen WPF-sovellus

Luo uusi projekti

Avaa Visual Studio ja luo uusi projekti, valitse VisualC#|Windows|WPF Application.

Solutionin sisältö

Tämän jälkeen Visual Studio luo käyttöösi projektin, joka mahdollistaa WPF-sovelluksen toteuttamisen. Huomaa, että solutioniin muodostuu vain yksi projekti. Oletuksena projekti sisältää vain yhden ikkunan (Windows). Tämä sovelluksen on "oletusikkuna" (MainWindow.xaml), joka näytetään loppukäyttäjälle sovelluksen käynnistyäessä.Ikkunoihin liittyvä ohjelmointi toteutetaan aina kunkin ikkuna CodeBehind-tiedostoon, esim. MainWindow.xaml.cs-tiedostoon. Lisäksi projekti sisältää App.xaml -tiedoton, jossa voidaan määritellä esim ensimmäiseksi avautuva ikkuna. Sovellus voi koostua useammasta ikkunasta. Sovelluksessa voidaan siirtyä ikkunasta toiseen. Ikkunat voidaan nimetä halutulla tavalla.

MainWindow muokkaaminen

Ikkunan 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 MainWindow.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 MainWindow.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.

Kontrollien lisääminen

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

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

Lisättyjen kontrollien ominaisuuksien muuttaminen

Kontrollien ominaisuuksia voidaan muuttaa Properties Window:n kautta (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:

Windows ja yleensä GUI-ohjelmointi on hyvien paljon tapahtumien ohjelmointia. UI-kontrolleilla ,jotka ovat ohjelmointiteknisesti tarkalleen ottaen oliota, voi tapahtua tapahtumia (event). Tapahtuma voi laukaista tapahtumakäsittelijän (event handler), joka on ohjelmointiteknisesti olion metodi, jolle välitetään tapahtuman argumentit (event arguments). Lisäämme seuraavaksi Button-kontrollille tapahtuman käsittelijän. * 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 MainWindow.xaml.cs-tiedoston editointiin ja tarkemmin Button-olioon liitetyn tapahtumankäsittelijän ohjelmointiin. Huomaa generoidun metodin nimi (infoButton_Click). Suuremmissa ohjelmissa on erittäin tärkeä nimetä käyttöliittymäkontrollit tarkoin ja systemaattisesti, jotta generoitu ohjelmointikoodi pysyy myös hyvin nimettynä (ja hallussa). Kysy opettajalta lisää infoa kontrollien hyvistä nimeämiskäytännöistä.
check_circleTapahtumankäsittelijät nimetään aina seuraavasti: kontrollinnimi_käsiteltävätapahtuma, siis kuten edellä infoButton-kontrollin Click-tapahtuman tapahtumankäsittelijä nimi on infoButton_Click.

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 = "Hello World and whole Universum this is my first WPF app!";
    }
    

Sovelluksen kääntäminen ja suorittaminen

Tallenna tähän astinen tuotoksesi, käännä projekti Build|Build Solution toiminnolla (tai vastaavalla pikanäpääin yhdistelmällä F6 tai Ctrl+Shift+B riippuen VS:n asetuksista). Sovelluksesta tehdään käännös MSIL:ksi ja bin\Debug-kansioon syntyy projektinnimeä vastaava .exe-tarkenteinen tiedosto, jonka voi nyt suorittaa Start debugging (F5) toiminnolla.

Ensimmäinen ei-niin-kaunis mutta toimiva Windows-sovelluksesi on valmis.

 

Lisätietoa:

Create a "Hello, world" WPF app (XAML)
Create a "Hello, world" UWP app (XAML)