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

V minulé lekci, Pozicování v C# .NET WPF, jsme se naučili pozicovat ovládací prvky v okně.

V dnešním WPF tutoriálu navrhneme formulář pro kalkulačku. Naučíme se přidávat sloupce a řádky do Gridu a představíme si prvky TextBox a ComboBox.

Návrh formuláře

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

Vytvoříme si nový projekt s názvem Kalkulacka, titulek okna nastavíme na Kalkulačka. Oknu přidáme atribut WindowStartupLocation="CenterScreen", aby se okno po spuštění aplikace zobrazilo 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 prvku Grid. Doposud jsme Grid brali jako jednoduchý panel, do kterého lze vkládat nějaké další prvky. Grid je však již podle názvu mřížka. 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říme tabulku o 2 řádcích a 5 sloupcích. Do buněk mřížky později vložíme jednotlivé prvky formuláře:

V XAML kódu se uvnitř elementu <Grid> 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.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

</Grid>

U samotného elementu <Grid> nastavíme vnější okraj Margin na 10 DIP. Díky tomu nebudou ovládací prvky v mřížce natěsnané až ke kraji okna.

V definici sloupců máme 5 sloupců, u kterých definujeme jejich šířku. Na formuláři hotové kalkulačky vidíme dvě 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 = by měla mít stále stejnou šířku. Proto mají tyto 2 sloupce pevně nastavenou velikost 50 DIP. Ostatní mají nastavenou hodnotu *, aby rovnoměrně vyplnily 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 je to značně pracnější. A bude hůř

Ovládací prvky

Do elementu <Grid> vložíme za konec definice řádků a sloupců několik dalších prvků.

Button

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

<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 mřížky se má prvek vložit. Asi nás nepřekvapí, že indexy jsou od nuly.

TextBox

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

Jelikož jsou prvky TextBox 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čí prvkům TextBox 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 elementu <ComboBox> 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 elementů <ComboBoxItem> vložit prakticky cokoli, např. obrázky nebo barvy.

TextBlock

Jako poslední umístíme do gridu nám již známé elementy TextBlock:

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

V prvním elementu je znaménko = mezi druhým číslem a výsledkem, v druhém je samotný text s výsledkem. Formulář máme hotový. Můžeme si ho zkusit spustit a roztáhnout. Všechny ovládací prvky se krásně přizpůsobují díky své relativní pozici:

Můžeme si ještě nastavit ikonu okna. Přetáhneme soubor typu .ico na projekt v okně Solution Exploreru. Nyní stačí přidat oknu atribut Icon s názvem tohoto souboru. Můžeme si rovnou nastavit minimální šířku a výšku okna, aby se okno nedalo příliš zmenšit:

<Window x:Class="Kalkulacka.MainWindow
    ...
    Title="Kalkulačka" Height="134" Width="388" MinWidth="388" MinHeight="134" WindowStartupLocation="CenterScreen" Icon="/kalkulacka.ico" >
    ...

V příští lekci, Code Behind v C# .NET WPF a dokončení kalkulačky, naprogramujeme logickou část aplikace. Vysvětlíme si, jak WPF funguje pod pokličkou.

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.