2. PrvocislaWPF

2.2. XAML

Na základě našich zkušeností s XAML bude již stručně popsán postup tvorby formuláře. Formulář rozdělíme na čtyřiřádky a dva sloupce. Výška prvního, druhého a čtvrtého řádku se bude přizpůsobovat obsahu vložených prvků. Třetí řádek se přizpůsobí roztažení okna - viz Kód 1. 

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

Kód 1: Rozdělení Grid na řádky

Šířka obou sloupců se budou poměrově přizpůsobovat roztažení okna - viz Kód 2. 

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

Kód 2: Rozdělení Grid na sloupce

Do prvního řádku Grid  (s indexem 0) umístíme popisek (objekt typu Label). Popisek zarovnáme na střed prvního řádku formuláře jak v horizontální, tak i vertikální ose, tzn. že popisek roztáhneme do obou sloupců (vlastnost Grid.ColumnSpan). Písmo nastavíme na tučné a nastavíme velikost podle následujícího kódu - viz Kód 3.

<Label Content="Výpis prvních n prvočísel" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" FontWeight="Bold" Grid.ColumnSpan="2"/>

Kód 3: Popisek (objekt typu Label)

Do druhého řádku Grid v prvním sloupci umístíme další popisek (Label). Do druhého sloupce ve stejném řádku umístíme TextBox, do kterého uživatel zadá počet prvočísel, která se mají na formuláři vypsat - viz Kód 4. Tento objekt vystředíme ve vertikální ose a doplníme ho textem "?", aby uživatel při spuštění aplikace tušil, že má do formuláře zadat počet vypisovaných prvočísel.

<Label Content="Zadejte n:" Grid.Row="1" HorizontalAlignment="Right" Margin="5"/>
<TextBox Name="TxtN" Text="?" Grid.Row="1" Grid.Column="1" Margin="5" VerticalAlignment="Center"/>

Kód 4: Druhý řádek Grid - popisek (Label) a vstupní pole pro zadání počtu prvočísel (TextBox)

Do dalšího řádku Grid umístíme TextBox, ve kterém budou po stisku tlačítka vypsána všechna prvočísla řady o specifikované délce.  Řada prvočísel může být delší, než šířka okna, proto umožníme v TextBox zalamování textu (vlastnost TextWrapping). Protože řada může být delší než výška okna, umožníme uživateli posouvat (scrolovat) obsah ve vertikálním směru (vlastnost VerticalScrollBarVisibility). Objekt TextBox roztáhneme do obou sloupců (Grid.ColumnSpan). Objekt nastavíme pouze pro výpis, podbarvíme pozadí a nastavíme další vlastnosti podle následujícího zdrojového kódu - viz Kód 5.

<TextBox Name="TxtPrvocisla" Grid.Row="2" Margin="5" TextWrapping="Wrap" Grid.ColumnSpan="2" FontSize="14" VerticalScrollBarVisibility="Auto" 
         IsReadOnly="True" Background="AliceBlue"/>

Kód 5: Třetí řádek Grid - výstupní pole pro výpis řady prvočísel (TextBox)

V posledním řádku se budou nacházet dvě tlačítka. První tlačítko bude po stisknutí zajišťovat testování a výpis řady nalezených prvočísel v definovém počtu. Tlačítko Vypiš prvočísla bude zarovnáno k levému okraji. Tlačítko však bude roztaženo do dvou sloupců (vlastnost Grid.ColumnSpan), kvůli tomu, aby se částečně nezakrývalo při zmenšení šířky formuláře na minimální rozměr (šířku sloupců Grid totiž rozdělíme poměrově). Druhé tlačítko Konec zarovnáme k pravému okraji a umístíme ho do druhého sloupce Grid. U obou tlačítek nastavíme vnitřní okraje (vlastnost Padding) a také vnější okraje (vlastnost Margin) u obou objektů.  Pro obě tlačítka vygenerujeme obsluhu události stisknutí tlačítka (událost Click) pomocí nastavení vlastnosti Click a zvolení položky <New Event Handler> - viz Kód 6.

<Button Name="BtnVypis" Content="Vypiš prvočísla" Width="120" Grid.Row="3" Grid.ColumnSpan="2" Margin="10" Padding="5" HorizontalAlignment="Left" Click="BtnVypis_Click"/>
<Button Name="BtnKonec" Content="Konec" Width="120" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" Margin="10" Padding="5" Click="BtnKonec_Click"/>

Kód 6: Čtvrtý řádek Grid - tlačítko pro výpis řady prvočísel a tlačítko pro 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 1.


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

Objekty na formuláři:

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

  • Grid
  • Label
  • TextBox
    • TxtN
    • TxtPrvocisla
  • Button
    • BtnVypis
    • BtnKonec
které jsou umístěny následujícím způsobem - viz Obrázek 2.


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