Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

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

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Pozicování v C# .NET WPF, jsme se naučili pozicovat ovládací prvky v okně. Dnes si v C# .NET tutoriálu 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 C# .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 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řte 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 v C# .NET WPF aplikaci

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.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 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. 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ůř :)

Ovládací prvky

Do elementu <Grid> 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 mřížky se má prvek 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 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ž 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čí 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">=</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 ovládací prvky se krásně přizpůsobují díky své relativní pozici.

Kalkulačka v C# .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">

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


 

Stáhnout

Staženo 974x (137.75 kB)

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
15 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Pozicování v C# .NET WPF
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF
Aktivity (4)

 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
Michal Štěpánek:26.5.2015 8:44

Doprostřed se umisťuje automaticky u W8. U W7 a nižších se zobrazuje právě vedle ikony...

Odpovědět 26.5.2015 8:44
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
cisco
Člen
Avatar
cisco:18.10.2015 12:03

Super návod Díky ;-)

 
Odpovědět 18.10.2015 12:03
Avatar
Michal Gros
Redaktor
Avatar
Michal Gros :18.12.2015 21:45

Musím poděkovat umisťovaný do tabulky je super když jsem wpf zkoušel bez tohoto návodu nadával jsem jak špaček na rozmisťování děkuji moc.

Odpovědět 18.12.2015 21:45
Jestli jste dobří nahrnou na Vás spoustu práce. Jestli jste sakra dobří, tak se jí dokážete zbavit.
Avatar
Petr Vocel
Redaktor
Avatar
Petr Vocel:5.7.2016 20:35

Trochu mne zmátly obrázky, kde je označení okna "Kalkulačka" ve středu obrazovky a nepodařilo se mi najít, zda to lze a jak nastavit. Ve staženém příkladu to máš taky zprava.

 
Odpovědět 5.7.2016 20:35
Avatar
Viktor Abel
Člen
Avatar
Viktor Abel:10.12.2016 0:06

Tak Microsoft tomu říká Controls, mě se překlad jako kontrolky líbí :)

 
Odpovědět 10.12.2016 0:06
Avatar
Viktor Abel
Člen
Avatar
Odpovídá na Michal Štěpánek
Viktor Abel:10.12.2016 0:24

Já mám Win10 a také ten název mám hned vedle ikony..Nejde to nějak nastavit?

 
Odpovědět 10.12.2016 0:24
Avatar
Honza Rada
Člen
Avatar
Honza Rada:16.5.2017 7:41

Super tutoriál jen si budu muset na XAML zviknout

Odpovědět 16.5.2017 7:41
#c#
Avatar
Odpovídá na Honza Rada
Neaktivní uživatel:16.5.2017 18:01

Zvykneš si časom . Ale mne to trvalo pretože som začal s WF

Odpovědět 16.5.2017 18:01
Neaktivní uživatelský účet
Avatar
Honza Rada
Člen
Avatar
Honza Rada:17.5.2017 6:04

Jo taky sem začal s WF

Odpovědět 17.5.2017 6:04
#c#
Avatar
Vladimír Kuchař:1. března 11:15

Mám W7 a taky mám umístěno title vlevo, ale nevadí začátky jsou těžké.

 
Odpovědět 1. března 11:15
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 16. Zobrazit vše