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:
![kalkulačka v WPF - WPF - Okenní aplikace v C# .NET](images/5/wpf_csharp/l4_1_kalkulacka.png)
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:
![rozdělení gridu - WPF - Okenní aplikace v C# .NET](images/5/wpf_csharp/l4_2_gr_navrh_grid.png)
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:
![kalkulačka roztažená - WPF - Okenní aplikace v C# .NET](images/5/wpf_csharp/l4_3_roztazeny.png)
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.