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

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

V minulém dílu našeho seriálu tutoriálů o tvorbě okenních aplikací v C# .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 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 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 C# .NET WPF aplikaci

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

Příště naprogramujeme logickou část aplikace a také si řekneme jak WPF funguje pod pokličkou.


 

Stáhnout

Staženo 654x (137.75 kB)

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (10 hlasů) :
55555


 


Miniatura
Předchozí článek
Pozicování v C# .NET WPF
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF

 

 

Komentáře

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Pěkné :) Jen doplním, že kontrolkám, které mají být v prvním (resp. nultém) sloupci či řádku je zbytečné to tam dopisovat, bere to automaticky.

Odpovědět  +3 10.12.2013 19:06
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
tonda
Neregistrovaný
Avatar
tonda:

bude ta logika v duchu MVVM??

 
Odpovědět 10.12.2013 20:09
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na tonda
David Čápka:

U tohoto projektu ne, u dalších ano :)

Odpovědět 10.12.2013 20:21
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Andrej Farkaš:

David Čápka Si sa nejako rozbehol s tými WPF tutoriálmi :-) Ale super, chcel som sa na WPF vrhnúť.

Odpovědět 10.12.2013 21:10
Live. Love. Learn.
Avatar
pracansky
Člen
Avatar
pracansky:

Super návod.
Až na ty kontrolky :-), co takhle ovládací/zobra­zovací prvky :-).

 
Odpovědět 11.4.2015 17:23
Avatar
bem.jiri12
Člen
Avatar
bem.jiri12:

pěkné, ale nevím jak se podařilo nastavit název okna "Kalkulačka" do prostřed ? Automaticky se mi umístí vedle icony vlevo. Libí se mi to tak více ale stejně bych to rád uměl :).

 
Odpovědět  +1 26.5.2015 7:44
Avatar
Odpovídá na bem.jiri12
Michal Štěpánek:

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:

Super návod Díky ;-)

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

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:

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. července 20:35
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 10.