Tehdään WPF-sovellus - 15 - Yksiköt paikoilleen

Saturday. April 24, 2021 - 2 mins

Yksikköjen asettelu vaatii uuden ruudukon

Käyttöliittymän asettelua tehdessä on hyvä muistaa, että yksinkertaisten asioiden kanssa on helppo työskennellä. Keep it simple. Aiemmissa osissa olemme käyttäneet Grid-elementtiä, joten jatketaan hyväksi todetulla linjalla. Saadaksemme yksiköt nätisti syötekenttien vierelle meidän tulee lisätä uusi Grid. Lisätään uudelle ruudukolle 3 saraketta, joista yhden varaamme syötekentälle ja yhden yksikölle (ensimmäinen saa jäädä tyhjäksi).

Tämä tarkoittaa sitä, että kiedomme TextBox-elementin uudella Grid-elementillä ja määrittelemme kolme uutta saraketta uudelle ruudukolle.

Eli muutamme painon osalta tämän:

<TextBox Name="WeightInput"
         Grid.Row="1"
         d:Text="123" />

Tähän:

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Name="WeightInput"
             Grid.Column="1"
             Margin="12,0"
             d:Text="123"
             TextAlignment="Center" />
    <TextBlock Grid.Column="2"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Text="kg" />
</Grid>

Suoritetaan sovellus ja kokeillaan syöttää iso lukema painolle:

Isot lukemat jäävät virheellisesti piiloon

Heti kolmannen numeron jälkeen syötekenttä alkaa käyttäytymään hankalasti, joten rajataan numeroiden lukumäärä johonkin kohtuulliseen.

Päätetään tässä vaiheessa, että teemme sovellusta ihmisten painoindeksien laskentaan. Pari hakutulosta myöhemmin voimme todeta, että yksikään ihminen ei ole (vielä eikä toivottavasti) painanut yli tuhatta kiloa, joten voimme rajata painon syötekentän 3-numeroiseksi arvoksi.

Lista painavimmista ihmisistä.

Voimme tehdä saman rajoituksen myös pituudelle, sillä kirjoitushetkellä pisin ihminen ei ole vielä ylittänyt 300 cm lukemaa.

Lista pisimmistä ihmisistä..

Sivuhuomiona pensasnorsu voi painaa yli 10 000 kg ja kirahvi voi olla korkeudeltaan yli 600 cm. Valitettavasti joudumme jättämään nämä eläinkunnan edustajat sovelluksemme toiminnan ulkopuolelle. Ei mulla muuta. Jatketaan.

Syötekentän pituuden voi rajata yksinkertaisesti antamalla sille MaxLength-arvon:

<TextBox Name="WeightInput"
         MaxLength="3"

MainWindow.xaml - Painon rajaaminen 3-numeroiseksi.

Tehdään samat temput pituudelle:

<!--  HEIGHT  -->
<Grid Grid.Row="1"
      VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Text="HEIGHT" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBox Name="HeightInput"
                 Grid.Column="1"
                 Margin="12,0"
                 d:Text="456"
                 MaxLength="3" />
        <TextBlock Grid.Column="2"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   Text="cm" />
    </Grid>
</Grid>