6. diel - PRIPOMIENKOVÉ narodenín v VB .NET WPF - Návrh okien

V minulom dieli, Code Behind v VB.NET WPF a dokončenie kalkulačky , sme doprogramovali jednoduchú kalkulačku.

Počas nasledujúcich niekoľkých článkov si vytvoríme stredne pokročilú aplikáciu. Bude sa jednať o pripomienkovej narodenín priateľov. Hotová aplikácia bude vyzerať takto:

Vidíme, že aplikácia má 2 formulára, používa kontrolky pre prácu s dátumom a tiež obsahuje ukladanie dát do súborov. Vnútorne narazíme na architektúru Model-ViewModel, výnimky a binding. Nebude toho málo, ale všetko si postupne vysvetlíme a iste to zvládnete. Aplikácia je ešte pomerne jednoduchá a verím, že najlepšie sa látka naučí na praktickom príklade.

Návrh formulárov

Začnime tradične návrhom formulárov. Vytvorte si nový WPF projekt s názvom UpominacNarozenin.

Hlavný formulár

Formulári nastavte titulok okna, štartovaciu pozíciu na obrazovke a môžete aj nejakú ikonku.

Rozloženie

Možností ako dospieť toho istého výsledkov pri rozložení formulára je viac. My si jeho Grid rozdelíme nasledujúcim spôsobom:

Tabuľka má 2 stĺpce a 4 riadky. Riadky sú vysoké postupne: 20, 30, * a 30 DIP. Ten predposledný sa teda rozťahuje s oknom. Ľavý stĺpec má šírku *, pravý má pevnú šírku 200 DIP. Okolo celého Grid je Margin 10 DIP. Kód Gridu vyzerá teraz nasledovne:

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

Horný TextBlocky

V prvých dvoch riadkoch Gridu sú vložené TextBlocky s informácií o dnešnom dátume a najbližších narodeninách. Text sa tu skladá z niekoľkých častí a hoci možno v každom riadku použiť iba jeden TextBlock, do ktorého hodnotu zložíme, my si pre zjednodušenie vložíme niekoľko TextBlocků vedľa seba.

StackPanel

Pre skladanie kontroliek vedľa seba alebo pod seba slúži StackPanel. Jedná sa o kontajner na ďalšie kontrolky, rovnako ako Grid. Do každého riadku tabuľky vložíme jeden StackPanel. Budeme chcieť, aby sa StackPanel nevložil len do prvého stĺpca, ale zasahoval do celého riadku. Preto mu zadáme atribút ColumnSpan s hodnotou 2, čo znamená, že zasahuje cez 2 stĺpce. Je to podobné ako colspan v HTML alebo ako keď spájate bunky tabuľky v Exceli. Rovnako tak existuje rowspan, ktorý vláda element cez viac riadkov. StackPanelům ešte nastavíme atribút Orientation na hodnotu Horizontal, predvolená je totiž Vertical, teda radenie pod seba. Rovno do nich tiež vložíme jednotlivé TextBlocky, text tých, kde sa majú zobrazovať dáta, ponecháme zatiaľ prázdny.

<StackPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal">
    <TextBlock Text="Dnes je "/>
    <TextBlock Text="" />
</StackPanel>

<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
    <TextBlock Text="Nejbližší narozeniny má "/>
    <TextBlock Text=""/>
    <TextBlock Text=" za "/>
    <TextBlock Text=""/>
    <TextBlock Text=" dní."/>
</StackPanel>

Spodné tlačidlá

Úplne rovnakým spôsobom vložíme do posledného riadku okna dve tlačidlá. Opäť budú vo StackPanelu (pretože ich chceme vedľa seba) a ten bude opäť zasahovať cez 2 stĺpce. StackPanel sa bude centrovať. Tlačidlám rovno priradíme mená, pretože ich budeme používať v CodeBehind. Ľavému nastavíme pravý Margin, aby nebola nalepená úplne na sebe.

<StackPanel Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center">
    <Button Width="100" Margin="0,0,10,0" Name="pridatButton" Content="Přidat"/>
    <Button Width="100" Name="odebratButton" Content="Odebrat"/>
</StackPanel>

Váš formulár by mal teraz vyzerať asi takto:

Môžete si aplikáciu skúsiť spustiť a okno rozšíriť, aby ste skontrolovali, či sa všetko prispôsobuje.

Listbox

Uložené osoby budeme zobrazovať v kontrolke listbox. Ako už názov napovedá, jedná sa o nejaký zoznam položiek. Listbox je v podstate rozbalený ComboBox, pracuje sa s ním úplne rovnako. V našom prípade nebudeme položky definovať v XAML, ale načítame ich neskôr z logickej vrstvy aplikácie. Listbox vložíme do 1. stĺpca a 3. riadku, pomenujeme ho osobyListBox a nastavíme mu spodnú Margin na 10 DIP.

<ListBox Name="osobyListBox" Grid.Column="0" Grid.Row="2" Margin="0, 0, 0, 10"/>

Kalendár

Zostáva vložiť len kalendár a nad neho opäť niekoľko TextBlocků. Môžeme si v danej bunke buď urobiť ďalšie Grid alebo použiť StackPanel, ktorý je na radenie kontroliek pod seba robený. Tomu nastavíme ľavý Margin na 10 DIP. V každom riadku opäť potrebujeme 2 TextBlocky vedľa seba, budú teda v ďalších StackPanelech. Kalendár vložíme ako kontrolku Calendar, slúži síce skôr pre výber dátumu, ale my ju budeme používať pre jeho zobrazenie.

<StackPanel Grid.Column="1" Grid.Row="2" Margin="10, 0, 0, 0">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Narozeniny: "/>
        <TextBlock Text="" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Věk: "/>
        <TextBlock Text="" />
    </StackPanel>
    <Calendar Name="narozenCalendar" />
</StackPanel>

Hlavný formulár máme hotový.

Dialóg pre pridanie osoby

K projektu pridáme nové okno (kliknutie pravým na projekt v Solution Exploreru -> Add -> Window), ktoré pomenujeme OsobaWindow. Opäť si nastavte titulok, štartovaciu pozíciu a ikonku.

Ukážme si znovu obrázok hotových formulárov, teraz pracujeme na tom vpravo:

Rozloženie

Grid rozdelíme opäť na 2 stĺpce a 4 riadky. Výšky riadkov sú nasledujúce: 4 *, 30, 30, *. Prvý a posledný riadok sa teda rozťahujú s oknom, prvé zaberie 4x viac priestoru ako posledný. Oba stĺpce budú mať šírku *, tá je predvolený, nemusíme ju teda ani definovať. Okolo celého Gridu necháme opäť Margin 10. Výsledok vyzerá takto:

A jeho kód:

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

Image

Do prvého riadku vložíme nejaký obrázok, aby sme sa s nimi naučili pracovať. Veľa ikon voľne k stiahnutiu nájdete na webe http://www.iconfinder.com, vždy si prečítajte licenciu pre aké prípady môžete danú ikonu používať. Obrázok vložíme pomocou kontrolky Image. Súbor obrázka (najčastejšie png) musíme podobne ako ikonu najprv pridať do projektu. Potom jeho názov uvedieme v atribútu Source. Keď máte obrázkov v projekte už veľa, oplatí sa na ne vytvoriť nejakú zložku. Predvolené správanie obrázkov je, že sa rozťahujú tak, aby vyplnili rodičovskú kontrolku. To nám tu nevyhovuje a preto nastavíme Stretch na hodnotu None. Obrázok vložíme do celého riadku tabuľky pomocou ColumnSpan.

<Image Source="osoba_pridat.png" Stretch="None" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0"/>

Label

Do druhého stĺpca ďalších dvoch riadkov prídu kontrolky na zadanie mena a dátumu narodenia. Ku každej kontrolke umiestnime do prvého stĺpca popisok. Nepoužijeme k tomu však TextBlock, ale Label. Label je popis, ktorý sa vzťahuje k určitej kontrolke. Pokiaľ do textu jeho popisku vložíme podčiarknik pred nejaké písmeno, definujeme tak klávesovú skratku. Po stlačení ALT + tohto písmena sa zaktivní kontrolka, ku ktorej popisok patrí. Ak vás napadlo, ako v texte Label teda zapísať podčiarkovník, napíšete dve za sebou.

K zadanie mena použijeme samozrejme TextBox. K zadaní dátumu narodenia použijeme kontrolku DatePicker. Ukážme si kód:

<Label Content="_Jméno" Grid.Column="0" Grid.Row="1" Target="{Binding ElementName=jmenoTextBox}"/>
<Label Content="_Datum narození" Grid.Column="0" Grid.Row="2" Target="{Binding ElementName=narozeninyDatePicker}"/>
<TextBox Grid.Column="1" Grid.Row="1" Name="jmenoTextBox" Margin="0,0,0,5"/>
<DatePicker Grid.Column="1" Grid.Row="2" Name="narozeninyDatePicker" Margin="0,0,0,5"/>

Vidíme, že prepojenie Label s kontrolkou je realizované pomocou atribútu Target. Tu je výraz v zložených zátvorkách, ktorý začína slovom Binding. Binding označuje previazanie, tu label na kontrolku s určitým menom. Stretneme sa s ním ešte na mnohých miestach. Zvyšok kódu by nemal byť nič nové. Teraz ešte nemôžeme formulár v spustenej aplikácii zobraziť, ale až to pôjde a stlačíte na ňom ALT + J, zaktivní sa pole s menom. ALT + D zaktivní DatePicker.

Dialóg dokončíme vložením potvrdzovacieho tlačidla. To sa bude zobrazovať dole v stredu posledného riadku.

<Button Name="okButton" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="100" Content="OK"/>

Každému oknu môžeme vo WPF ešte priradiť čo majú robiť predvolené a ukončovacie klávesy. Predvolené klávesa je Enter a mala by vyvolať stlačenie tlačidla OK. Ukončovacie klávesa je Escape. Preto tlačidlu pridáme ešte atribút:

IsDefault="True"

Ak by sme chceli, aby sa dialóg zavrel stlačením Escape, najjednoduchšie je pridať Zatvárací tlačidlo a tomu nastaviť IsCancel na True.

Tak a máme hotovo. Myslím, že ste si užili navrhovaní formulárov v XAML do sýtosti naučili sa zas niečo nové.

Nabudúce, PRIPOMIENKOVÉ narodenín vo VB.NET WPF - Logická vrstva , to bude čisto o logické časti aplikácie a VB kódu. Navrhnutý formulár je ako vždy k stiahnutiu nižšie.

 

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š.