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

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

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

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.

Předchozí článek
Pozicování v C# .NET WPF
Všechny články v sekci
WPF - Okenní aplikace v C# .NET
Přeskočit článek
(nedoporučujeme)
Code Behind v C# .NET WPF a dokončení kalkulačky
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
123 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity