4. diel - Návrh formulára pre kalkulačku v VB.NET WPF

V minulom dieli, Pozíciovanie v VB.NET WPF , sme sa naučili pozicový kontrolky v okne.

Dnes si vytvoríme prvú plnohodnotnú aplikáciu, bude sa jednať o jednoduchú kalkulačku.

Návrh formulára

Pri programovaní aplikácií sa väčšinou začína návrhom formulárov. Rovno ukážem ako bude vyzerať, vzápätí si ho nakódujeme.

Vytvorte si nový projekt s názvom Kalkulacka, titulok okna nastavte na "Kalkulačka". Oknu pridajte atribút:

WindowStartupLocation="CenterScreen"

Tým docielite to, že sa okno po spustení aplikácie zobrazí v strede obrazovky.

Grid

Hoci existuje niekoľko spôsobov, ako výslednej podoby formuláre dosiahnuť, my celý formulár postavíme na kontrolke Grid.

Doteraz sme Grid brali ako jednoduchý panel, do ktorého možno vkladať nejaké kontrolky. Grid je však už podľa názvu tabuľka. V predvolenom nastavení má len jednu bunku (jeden riadok a jeden stĺpec).

My sa teraz presunieme do grafického návrhára a klikneme doprostred okná. Tým sa označí jeho vnútornú časť, čo je Grid. Ten obsahuje každé novovytvorené okno, bez neho by sme totiž mali problém pridať na formulár viacerých prvkov. U označeného gridu sa nad horným a ľavým okrajom zobrazí "koľajnice", na ktorých môžeme myšou označiť bod, kde chceme rozdeliť riadok alebo stĺpec. Týmto spôsobom vytvorte tabuľku o 2 riadkoch a 5 stĺpcoch. Do buniek tabuľky neskôr vložíme jednotlivé kontrolky formulára.

V XAML kóde sa vnútri Gridu objavili 2 nové elementy: RowDefinitions a ColumnDefinitions. Jedná sa samozrejme o definície riadkov a stĺpcov, ktoré návrhár vygeneroval. V kódu je veľa absolútnych veľkostí a preto ho upravíme do nasledujúcej podoby:

<Grid Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
</Grid>

U samotného Gridu nastavíme vonkajší okraj Margin na 10 DIP. Vďaka tomu nebudú kontrolky v tabuľke natesnané až ku kraju okna.

V definícii stĺpcov máme 5 stĺpcov, u ktorých definujeme ich šírku. Keď sa pozriete na formulár hotové kalkulačky, sú tu 2 polia pre zadanie čísel a jedno pre zobrazenie výsledku. Pre počítanie s veľkými číslami potrebujeme viac miesta a formulár roztiahneme, grid by na to mal zareagovať a roztiahnuť tieto 3 bunky aj s ich podelementy. Naopak pole s výberom početné operácie a so značkou "rovná sa" by mala mať stále rovnakú šírku. Preto majú tieto 2 stĺpce pevne nastavenú veľkosť 50 DIP. Ostatní majú nastavenú hodnotu "*", tie potom rovnomerne vyplní zvyšné miesto.

Niekedy sa nám hodí upresniť aj túto výplň, napr. Aby bol niektorý vypĺňajúci stĺpec 2x tak široký ako ostatní alebo polovičný. Zapísali by sme to ako "2 *" alebo "0.5 *".

U definícií riadku je to obdobné, druhý riadok je vysoký presne 30 DIP, prvý riadok vyplní zvyšok okna.

Všetko ide samozrejme nastaviť aj cez grafický designer, ale už poznáte, že je to značne pracnejšie. A bude horšie

Kontrolky

Do Gridu vložíme za koniec definície riadkov niekoľko ďalších prvkov.

Button

Začnime nám už známym tlačidlom:

<Button Content="Vypočítej" Width="80" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2"/>

Atribút Content udáva textový popis, ďalej nastavujeme šírku na 80 DIP a zvislé zarovnanie na stred. Vodorovné zarovnanie nemusíme nastavovať, pretože je pevne daná šírka, tlačidlo sa bude vodorovne centrovať.

Dôležité sú atribúty Grid.Row a Grid.Column, ktoré udávajú do ktorého riadku a stĺpca gridu sa má kontrolka vložiť. Asi vás neprekvapí, že indexy sú od nuly.

Textbox

TextBox predstavuje pole pre zadanie textu. Tá budeme potrebovať dve, pridajte si ich kód ďalej do gridu:

<TextBox VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" Text="0" />
<TextBox VerticalAlignment="Center" Grid.Row="0" Grid.Column="2"  Margin="0,0,10,0" Text="0" />

Keďže textbox sú vložené v prvom riadku tabuľky, ktorého výška sa rozťahuje s formulárom, budeme ich zvisle centrovať. Pravý vonkajší okraj nastavíme na 10 DIP a text na 0 (čo je predvolený vstup snáď všetkých kalkulačiek). Nezabudneme tiež zadať správne súradnice bunky gridu.

Ak by sme chceli v niektorej z budúcich aplikácií zadávať viacriadkový text, stačí textbox nastaviť nasledujúce dva atribúty:

TextWrapping="Wrap" AcceptsReturn="True"

ComboBox

ComboBox je rozbaľovací zoznam o niekoľkých položkách. V našej aplikácii poslúži k výberu operácie z prednastavených typov, ktorými sú +, -, *, /.

Jeho kód bude nasledujúce:

<ComboBox VerticalAlignment="Center" Grid.Row="0" Grid.Column="1"  Margin="0,0,10,0" SelectedIndex="0">
    <ComboBoxItem Content="+"/>
    <ComboBoxItem Content="-"/>
    <ComboBoxItem Content="*"/>
    <ComboBoxItem Content="/"/>
</ComboBox>

SelectedIndex označuje index vybrané položky (tu prvý). Jednotlivé položky sú vnorené v ComboBox ako elementy ComboBoxItem, kde atribút Content určuje ich textový popis. Ak by nám nestačil textový obsah položiek, môžeme miesto ComboBoxItemů vložiť prakticky čokoľvek, napr. Obrázky alebo farby.

TextBlock

Ako posledný umiestnime do gridu nám už známe TextBlocky:

<TextBlock Grid.Row="0" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">=</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center">0</TextBlock>

Prvá je znamienko "rovná sa" medzi druhým číslom a výsledkom, druhý je samotný text s výsledkom.

Formulár máme hotový. Môžete si ho skúsiť spustiť a roztiahnuť. Všetky kontrolky sa krásne prispôsobujú vďaka svojej relatívnej pozícii.

Môžete si ešte nastaviť ikonku okná, to urobíte tak, že pretiahnete súbor typu ico na projekt v okne Solution Exploreri. Teraz stačí pridať oknu atribút Icon s názvom tohto súboru. Môžete rovno aj nastaviť minimálnu šírku a výšku okna, aby sa okno nedalo príliš zmenšiť.

<Window x:Class="Kalkulacka.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kalkulačka" Height="134" Width="388" MinWidth="388" MinHeight="134" WindowStartupLocation="CenterScreen" Icon="kalkulacka.ico">

Nabudúce, Code Behind v VB.NET WPF a dokončenie kalkulačky , naprogramujeme logickú časť aplikácie a tiež si povieme ako WPF funguje pod pokrievkou.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.