2. PrevodSekundWPF

2.2. XAML

Po založení projektu s názvem PrevodSekundWPF můžeme využít nabídky šablon posledních vytvořených projektů, které jsou v okně tvorby nového projektu umístěny vlevo. Vybereme si položku pro tvorbu WPF aplikace pro prostředí .NET Framework . Pokud víme, že projektu tohoto typu budeme nadále využívat, je výhodné si nabídku zafixovat pomocí připínáčku zobrazeného vpravo u položky - viz Obrázek 1. Tím zajistíme, že při další tvorbě nového projektu bude tato nabídka k dispozici.


Obrázek 1: VS - okno pro tvorbu nového projektu - nabídka šablon posledních vytvořených projektů

Dále postupujeme stejným způsobem jako u předchozího příkladu - viz Obrázek 2. 


Obrázek 2: VS - konfigurace nového projektu

Po vygenerování formuláře jako první změníme jeho atributy - titulek formuláře (vlastnost Title), jeho výška (Height) a šířka (Width) - viz Kód 1.

<Window x:Class="PrevodSekundWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PrevodSekundWPF"
        mc:Ignorable="d"
        Title="Převod" Height="350" Width="500">
    <Grid>
        
    </Grid>
</Window>

Kód 1: Změna atributů formuláře

Následující kód umístíme do XAML kódu pro mřížku (objekt typu Grid), která řeší rozložení okna. Vytvoříme v ní dva sloupce pomocí vlastnosti ColumnDefinition, kterou vyvoláme pomocí tečkové notace - viz Kód 2. 

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Kód 2: Tvorba sloupců v prvku Grid

Oba sloupce budou ve stejném šířkovém poměru , tj. přiřadíme vlastnosti šířky hodnotu vyjádřenou pomocí * - viz Obrázek 3. 


Obrázek 3: Sloupce v prvku Grid

Dalším nezbytným krokem je definování výšky řádků. První a třetí řádek budeme řešit poměrově a druhý a čtvrtý řádek necháme přizpůsobit jeho obsahu (hodnota Auto), tj. přizpůsobení podle velikosti vkládaného prvku - viz Kód 3. Jak vidíte, nezáleží na tom, že jako první v Gridu definujeme sloupce a po té řádky.

<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

Kód 3: Tvorba řádků v prvku Grid

V našem vytvářeném XAML kódu pro tvorbu formuláře budeme nyní využívat různé typy ovládacích prvků jakými jsou Label, TextBox, Button. Tyto prvky umístíme do prvku typu StackPanel. Ten nám zajistí, že vkládané prvky budou umístěny pod sebou. U prvku StackPanel nastavíme vnější okraje okolo tohoto prvku na 20 po každé straně a umístíme jej do prvního sloupce a druhé řádky prvku Grid (pokud definici vlastnosti indexu sloupce, nebo řádku vynecháme, umístí se prvek do počátečního řádku, nebo do počátečního sloupce). První StackPanel použijeme pro umístění prvku typu Label s názvem pole pro zadávání celkového počtu sekund, jehož písmo bude tučné s velikostí 14. Počet sekund, který uživatel bude zadávat do prvku typu TextBox, bude umístěn pod vloženým prvkem typu Label - viz Kód 4. U prvku typu TextBox využijeme následující vlastnosti:

  • Name - název prvku
  • ToolTip - nápověda, která zobrazí při umístění kurzoru myši nad prvek ve spuštěné aplikaci

<StackPanel Grid.Row="1" Grid.Column="0" Margin="20,20">
    <Label Content="Celkem sekund:" FontWeight="Bold" FontSize="14"/>
    <TextBox Name="TxtCelkem" ToolTip="Zadejte celkový počet sekund"  />
</StackPanel>

Kód 4: StackPanel - umístění prvků typu Label a TextBox pod sebe dovnitř StackPanel

Na následujícím obrázku vidíme rozložení prvků ve StackPanel umístěném v prvním sloupci a druhém řádku prvku Grid - viz Obrázek 4.


Obrázek 4: StackPanel obsahující prvky Label a TextBox

Další prvek typu StackPanel umístíme taktéž do druhého řádku, nyní však do pravého sloupce prvku Grid. Do prvku typu StackPanel umístíme prvek typu Label, který bude sloužit jako popisek prvku typu TextBox, který bude vypisovat počet hodin vypočítaný ze zadaného celkového počtu sekund. Tento TextBox již nebude sloužit pro zadávání čísel, ale pouze pro výpis, proto pozadí tohoto prvku podbarvíme (vlastnost Background) a nastavíme vlastnost IsReadOnly (prvek je určen pouze pro čtení) na hodnotu True (tzn. uživatel nemá možnost zadat hodnotu do prvku např. pomocí klávesnice) - viz Kód 5.

<StackPanel  Grid.Row="1" Grid.Column="1" Margin="20,20">
    <Label Content="Hodin:" FontWeight="Bold" FontSize="14"/>
    <TextBox Name="TxtHodin" Background="AliceBlue" IsReadOnly="True" />
</StackPanel>

Kód 5: StackPanel - umístění prvků typu Label a TextBox (určeného pouze pro čtení) pod sebe

Do StackPanel následně vložíme další prvky pro výpis vypočtených hodnot minut a sekund. Tyto prvky umístíme pod již vložené prvky stejným způsobem jako v předchozím XAML kódu - viz Kód 6. Upozorněme ještě na nastavení vnějších okrajů okolo prvku typu Label, tj. vlastnosti Margin. První hodnotou určujeme velikost vnějšího levého okraje prvku, za čárkou určíme velikost horního vnějšího okraje, za další čárkou velikost pravého vnějšího okraje a za poslední čárkou velikost dolního vnějšího okraje.

<Label Content="Minut:" FontWeight="Bold" FontSize="14" Margin="0,10,0,0"/>
<TextBox Name="TxtMinut" Background="AliceBlue" IsReadOnly="True" />
 
<Label Content="Sekund:" FontWeight="Bold" FontSize="14" Margin="0,10,0,0"/>
<TextBox Name="TxtSekund" Background="AliceBlue" IsReadOnly="True" />

Kód 4: Prvky typu Label a TextBox pro výpis hodnot minut a sekund

Na následujícím obrázku vidíme rozložení prvků ve StackPanel umístěném ve druhém sloupci a druhém řádku prvku Grid - viz Obrázek 5.


Obrázek 5: StackPanel ve druhém sloupci prvku Grid obsahující prvky Label a TextBox

Jako poslední musíme vložit do posledního řádku dvě tlačítka. První pro výpočet hodin, minut a sekund ze zadaného celkového počtu sekund a další pro ukončení aplikace - viz Kód 5. K oběma tlačítkům připojíme metody pro obsluhy události Click, kterou budeme později definovat v CodeBehind v následující kapitole. 

<Button Name="BtnPrevod" Content="Převod" Grid.Row="3" Grid.Column="0" Margin="5,10" Width="100" VerticalAlignment="Center" Click="BtnPrevod_Click"/>
        <Button Name="BtnKonec" Content="Konec" Grid.Row="3" Grid.Column="1" Margin="5,10" Width="100" VerticalAlignment="Center" Click="BtnKonec_Click"/>

Kód 5: Button - tlačítka pro převod zadaného počtu sekund a ukončení aplikace


Výsledný formulář

Navržené rozložení prvků na formuláři, včetně formuláře samotného, je vidět na následujícím obrázku - viz Obrázek 6.


Obrázek 6: Výsledný formulář WPF aplikace

Objekty na formuláři

Formulář obsahuje následující objekty (kontrolky):

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

které jsou umístěny následujícím způsobem - viz Obrázek 7:

Obrázek 7: VS - okno Document Outline - seznam objektů