Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 4 - Návrh formuláře pro kalkulačku v VB.NET WPF

V minulém dílu, Pozicování v VB.NET WPF, jsme se naučili pozicovat kontrolky v okně.

Dnes si vytvoříme první plnohodnotnou aplikaci, bude se jednat o jednoduchou kalkulačku.

Návrh formuláře

Při programování aplikací se většinou začíná návrhem formulářů. Rovnou ukáži jak bude vypadat, vzápětí si ho nakódujeme.

Kalkulačka v VB.NET WPF - Okenní aplikace ve VB.NET WPF

Vytvořte si nový projekt s názvem Kalkulacka, titulek okna nastavte na "Kalkulačka". Oknu přidejte atribut:

WindowStartupLocation="CenterScreen"

Tím docílíte toho, že se okno po spuštění aplikace zobrazí ve středu obrazovky.

Grid

Ačkoli existuje několik způsobů, jak výsledné podoby formuláře dosáhnout, my celý formulář postavíme na kontrolce Grid.

Doposud jsme Grid brali jako jednoduchý panel, do kterého lze vkládat nějaké kontrolky. Grid je však již podle názvu tabulka. Ve výchozím nastavení má jen jednu buňku (jeden řádek a jeden sloupec).

My se nyní přesuneme do grafického návrháře a klikneme doprostřed okna. Tím se označí jeho vnitřní část, což je Grid. Ten obsahuje každé nově vytvořené okno, bez něj bychom totiž měli problém přidat na formulář více prvků. U označeného gridu se nad horním a levým okrajem zobrazí "kolejnice", na kterých můžeme myší označit bod, kde chceme rozdělit řádek nebo sloupec. Tímto způsobem vytvořte tabulku o 2 řádcích a 5 sloupcích. Do buněk tabulky později vložíme jednotlivé kontrolky formuláře.

Rozdělení Gridu v VB.NET WPF aplikaci - Okenní aplikace ve VB.NET WPF

V XAML kódu se uvnitř Gridu objevily 2 nové elementy: RowDefinitions a ColumnDefinitions. Jedná se samozřejmě o definice řádků a sloupců, které návrhář vygeneroval. V kódu je spoustu absolutních velikostí a proto ho upravíme do následující 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 vnější okraj Margin na 10 DIP. Díky tomu nebudou kontrolky v tabulce natěsnané až ke kraji okna.

V definici sloupců máme 5 sloupců, u kterých definujeme jejich šířku. Když se podíváte na formulář hotové kalkulačky, jsou zde 2 pole pro zadání čísel a jedno pro zobrazení výsledku. Pro počítání s velkými čísly potřebujeme více místa a formulář roztáhneme, grid by na to měl zareagovat a roztáhnout tyto 3 buňky i s jejich podelementy. Naopak pole s výběrem početní operace a se značkou "rovná se" by měla mít stále stejnou šířku. Proto mají tyto 2 sloupce pevně nastavenou velikost 50 DIP. Ostatní mají nastavenou hodnotu "*", ty poté rovnoměrně vyplní zbylé místo.

Někdy se nám hodí upřesnit i tuto výplň, např. aby byl některý vyplňující sloupec 2x tak široký než ostatní nebo poloviční. Zapsali bychom to jako "2*" nebo "0.5*".

U definic řádku je to obdobné, druhý řádek je vysoký přesně 30 DIP, první řádek vyplní zbytek okna.

Vše jde samozřejmě nastavit i přes grafický designer, ale již poznáte, že je to značně pracnější. A bude hůř :)

Kontrolky

Do Gridu vložíme za konec definice řádků několik dalších prvků.

Button

Začněme nám již známým tlačítkem:

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

Atribut Content udává textový popisek, dále nastavujeme šířku na 80 DIP a svislé zarovnání na střed. Vodorovné zarovnání nemusíme nastavovat, jelikož je pevně daná šířka, tlačítko se bude vodorovně centrovat.

Důležité jsou atributy Grid.Row a Grid.Column, které udávají do kterého řádku a sloupce gridu se má kontrolka vložit. Asi vás nepřekvapí, že indexy jsou od nuly.

TextBox

TextBox představuje pole pro zadání textu. Ta budeme potřebovat dvě, přidejte si jejich kód dále 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" />

Jelikož TextBoxy jsou vloženy v prvním řádku tabulky, jehož výška se roztahuje s formulářem, budeme je svisle centrovat. Pravý vnější okraj nastavíme na 10 DIP a text na 0 (což je výchozí vstup snad všech kalkulaček). Nezapomeneme také zadat správné souřadnice buňky gridu.

Pokud bychom chtěli v některé z budoucích aplikací zadávat víceřádkový text, stačí TextBoxu nastavit následující dva atributy:

TextWrapping="Wrap" AcceptsReturn="True"

ComboBox

ComboBox je rozbalovací seznam o několika položkách. V naší aplikaci poslouží k výběru operace z přednastavených typů, kterými jsou +, -, *, /.

Jeho kód bude následující:

<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 (zde první). Jednotlivé položky jsou vnořené v ComboBoxu jako elementy ComboBoxItem, kde atribut Content určuje jejich textový popisek. Pokud by nám nestačil textový obsah položek, můžeme místo ComboBoxItemů vložit prakticky cokoli, např. obrázky nebo barvy.

TextBlock

Jako poslední umístíme do gridu nám již známé 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>

První je znamínko "rovná se" mezi druhým číslem a výsledkem, druhý je samotný text s výsledkem.

Formulář máme hotový. Můžete si ho zkusit spustit a roztáhnout. Všechny kontrolky se krásně přizpůsobují díky své relativní pozici.

Kalkulačka v VB.NET WPF - Okenní aplikace ve VB.NET WPF

Můžete si ještě nastavit ikonku okna, to uděláte tak, že přetáhnete soubor typu ico na projekt v okně Solution Exploreru. Nyní stačí přidat oknu atribut Icon s názvem tohoto souboru. Můžete rovnou i nastavit minimální šířku a výšku okna, aby se okno nedalo příliš zmenšit.

<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">

Příště, Code Behind v VB.NET WPF a dokončení kalkulačky, naprogramujeme logickou část aplikace a také si řekneme jak WPF funguje pod pokličkou.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 132x (213.89 kB)
Aplikace je včetně zdrojových kódů v jazyce VB

 

Předchozí článek
Pozicování v VB.NET WPF
Všechny články v sekci
Okenní aplikace ve VB.NET WPF
Přeskočit článek
(nedoporučujeme)
Code Behind v VB.NET WPF a dokončení kalkulačky
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
3 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity