Tehdään WPF-sovellus - 17 - Selkeytetään syötekenttiä

- 1 min

Kursorilla elementtien korostaminen

Voisimme ratkaista tekstinsyöttökenttien käytettävyysongelman muutamallakin eri tavalla:

  1. Lisäämällä Hover-efektin, kun kursori on elementin päällä
  2. Lisäämällä pienen tietolaatikon (ToolTip), kun kursori on elementin päällä
  3. Lisäämällä jonkinlaiset reunat elementille

Valitaan näistä ensimmäinen vaihtoehto, koska toinen toisi vain kahdennettua tietoa käyttäjälle ja kolmas rikkoisi sovelluksemme tyylin.

Hover-efektin lisääminen triggerillä

Käytetään triggeriä hover-efektin tuottamiseksi. Lisäsimme jo aiemmin vastaavan painikkeelle, joten tämä on suoraviivaista tehdä:

<Style TargetType="TextBox">
    ...
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#31142F" />
        </Trigger>
    </Style.Triggers>
</Style>
App.xaml - Triggerin lisäys TextBox-tyylille.

Tyylittely on valmis ja “loppusanat”

Hienoa! Nyt sovelluksemme näyttää nätiltä ja toimii halutulla tavalla 🎉

Olemme matkan aikana tarkentaneet sovelluksen määrittelyä, parantaneet sen ulkoasua. Toivottavasti olet myös oppinut jotain käyttöliittymän tekemisestä WPF:llä!

Mainitsen tähän “loppuun” vielä tärkeän asian: olemme vasta raapaisseet pintaa. Tässä blogipostaussarjassa ollaan käyty läpi vasta hyvin pintapuolisesti, että mitä sovelluksen tekeminen WPF:llä oikeastaan onkaan.

Periaatteessa sovellus voisi olla valmis tässä tilassa kuin se nyt on, mutta en voisi päästää sinua villiin luontoon vain näiden oppien siivittämän. Ee-hei. En alkuunsakaan. Sinänsä tuntuu pahalta, että sovellus on periaatteessa valmis ja täysin toimiva, mutta jokin asia kalvaa mieltäni: sovelluksen arkkitehtuuri.

En ole maininnut sanallakaan termiä MVVM. Jätän vain tämän linkin tähän ja katsotaan jatkossa, että josko muuntaisimme painoindeksisovelluksemme käyttämään kyseistä designia. En ole urallani vielä törmännyt yhteenkään WPF-sovellukseen, joka ei olisi käyttänyt MVVM:ää (tai jotain sen sovitelmaa) pohjanaan. Komennot, bindaukset ja viewmodelit ovat tekemisen suola MVVM:llä.

Olemme kuitenkin saaneet nyt jotain täysin toimivaa ja käytettävää aikaiseksi, joka on jo saavutus sinänsä!

Jos pääsit tänne asti, niin onnittele itseäsi vielä kertaalleen. Hieno homma! Kettu kuittaa 🦊

Anssi Kettunen

Anssi Kettunen

Ohjelmistokehittäjä suorittamassa tehtävää 🦊

rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora