2. PrevodSekundWPF

2.1. Analýza a návrh řešení

V podstatě se jedná o stejnou ideu původního příkladu PrevodSekund pro konzolovou aplikaci, ve které jsme požadovali, aby se na obrazovku v konzoli vypsal počet hodin, minut a sekund, které byly vypočteny ze zadaného celkového počtu sekund. Za tímto účelem využijeme modernější zobrazovací technologii WPF (Windows Presentation Foundation), ve které vytvoříme prezentační vrstvu. Pro formulář využijeme jak kód v XAML, tak i Code Behind. 

Zadání celkového počtu sekund bude uživatel realizovat pomocí objektu typu TextBox, který umožňuje jak čtení tak i výpis - viz Obrázek 1. Dříve jsme používali pro výpis textu objekt typu Label. V tomto typu objektu lze pouze vypisovat, proto objekty typu Label použijeme pro nadpisy u jednotlivých vypočtených hodnot u hodin, minut a sekund. Label bude také umístěn nad objektem typu TextBox sloužícímu pro zadání celkového počtu sekund. 

Jednotlivé výpočty bude prováděny pomocí zdrojového kódu v C# umístěného v Code Behind. Tyto kódy budou prováděny při události stisknutí tlačítka Převod (objektu typu Button). Při stisknutí tlačítka Konec se WPF aplikace zavře. 


Obrázek 1: Návrh GUI pro aplikaci PrevodSekundWPF

Pro určení pozice jednotlivých vkládaných prvků využijeme rozdělení objektu Grid na jednotlivé sloupce a řádky. Díky tomuto rozdělení budeme moci definovat pozici, do kterého řádku a sloupce (dá se říci buňky tabulky - Grid) daný vložený objekt patří. Jednotlivé objekty (např. popisek - typ Label a pole pro vložení hodnot - typ TextBox) budeme dále vkládat do objektu typu StackPanel, který nám zajistí, že prvky budou vloženy např. pod sebou (lze změnit rozložení prvků i horizontálně). Následující obrázek ukazuje rozmístění jednotlivých objektů v mřížce formuláře - viz Obrázek 2.



Obrázek 2: Návrh GUI - rozložení prvků v mřížce formuláře

Formulář bude obsahovat následující objekty (kontrolky), které budou vnořeny následujícím způsobem:

  • Grid
    • StackPanel
      • Label
      • TextBox: TxtCelkem
    • StackPanel
      • Label
      • TextBox: TxtHodin
      • Label
      • TextBox: TxtMinut
      • Label
      • TextBox: TxtSekund
    • Button: BtnPrevod
    • Button: BtnKonec

Na následujícím obrázku je vidět GUI při počátečním spuštění programu - viz Obrázek 3. 


Obrázek 3: GUI při počátečním spuštění programu