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

V minulej lekcii, Pozíciovanie v C # .NET WPF , sme sa naučili pozicový ovládacie prvky v okne. Dnes si v C# .NET tutoriálu 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 prvku Grid.

Doteraz sme Grid brali ako jednoduchý panel, do ktorého možno vkladať nejaké ďalšie prvky. Grid je však už podľa názvu mriež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 mriežky neskôr vložíme jednotlivé prvky formulára.

V XAML kóde sa vnútri elementu <Grid> 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 elementu <Grid> nastavíme vonkajší okraj Margin na 10 DIP. Vďaka tomu nebudú ovládacie prvky v mriež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

Ovládacie prvky

Do elementu <Grid> 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 mriežky sa má prvok 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 elementu <Grid>:

<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 y 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čí prvkom 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 elemente <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 elementov <ComboBoxItem> vložiť prakticky čokoľvek, napr. Obrázky alebo farby.

TextBlock

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

<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 ovládacie prvky 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">

V budúcej lekcii, Code Behind v C # .NET WPF a dokončenie kalkulačky , naprogramujeme logickú časť aplikácie a tiež si povieme ako WPF funguje pod pokrievkou.