4. NejvetsiZe3CiselWPF

4.2. XAML

Formulář bude rozdělen do šesti řádků, jejichž výšky jsou nastaveny následujícím způsobem - viz Kód 1. První řádek je nastaven na fixní výšku 50 pixelů a výška druhého, třetího, čtvrtého a šestého řádku se bude přizpůsobovat obsahu vložených prvků.

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

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

Grid bude rozdělen do dvou sloupců, které budou sloužit k oddělení popisků od prvků pro vložení celočíselných hodnot, které bude porovnány. Šířka prvního sloupce bude přizpůsobena obsahu popisků a šířka druhého sloupce vyplní zbytek formuláře - viz Kód 2.

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

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

Druhý, třetí a čtvrtý řádek bude každý obsahovat popisek (prvek typu Label) a vedle něj vpravo bude umístěn prvek pro vložení celočíselné hodnoty (prvek typu TextBox). U těchto prvků bude definována obsluha události přepnutí se na tento prvek (zaměření objektu - událost GotFocus) a opuštění tohoto prvku (LostFocus). Jednotlivé vlastnosti prvků jsou nastaveny následujícím způsobem - viz Kód 3.

<Label Content="A (první celé číslo):" Grid.Row="1" Margin="25,5,5,5"/>
<TextBox Name="TxtA" Grid.Row="1" Grid.Column="1" Margin="5" Text="0" VerticalContentAlignment="Center" GotFocus="TxtA_GotFocus" LostFocus="TxtA_LostFocus"/>
 
<Label Content="B (druhé celé číslo):" Grid.Row="2" Margin="25,5,5,5" />
<TextBox Name="TxtB" Grid.Row="2" Grid.Column="1" Margin="5" Text="0" VerticalContentAlignment="Center" GotFocus="TxtB_GotFocus" LostFocus="TxtB_LostFocus"/>
 
<Label Content="C (třetí celé číslo):" Grid.Row="3" Margin="25,5,5,5"/>
<TextBox Name="TxtC" Grid.Row="3" Grid.Column="1" Margin="5" Text="0" VerticalContentAlignment="Center" GotFocus="TxtC_GotFocus" LostFocus="TxtC_LostFocus"/>

Kód 3: Prvky typu Label a TextBox umístěné v jednotlivých řádcích 

Pro vložení dvou řad pro tlačítka použijeme prvek typu StackPanel, který umístíme do poslední řádky. Tento prvek bude obsahovat prvek typu WrapPanel, do něhož bude vložena jednotlivá tlačítka, která budou spouštět různé metody pro porovnání zadaných čísel. Vlastnost horizontálního zarovnání (HorizontalAlignment) nastavíme na střed, tzn. tlačítka budou zarovnána do řady, jejíž střed bude vycentrován vůči formuláři. 

Pro tlačítka vygenerujeme obsluhu události stisknutí tlačítka (událost Click) pomocí nastavení vlastnosti Click a zvolení položky <New Event Handler>. 

Do druhého WrapPanel vložíme tlačítko Konec, které zavře formulář. Toto tlačítko umístíme k pravému okraji formuláře, tj. nastavíme vlastnost horizontálního zarovnání vpravo - viz Kód 4.

<StackPanel Grid.Row="5" Grid.ColumnSpan="2">
    <WrapPanel HorizontalAlignment="Center">
        <Button Name="BtnPorovnej1"  Content="Porovnej varianta 1" Margin="5" Padding="5" Click="BtnPorovnej1_Click"/>
        <Button Name="BtnPorovnej2" Content="Porovnej varianta 2" Margin="5" Padding="5" Click="BtnPorovnej2_Click"/>
        <Button Name="BtnPorovnej3" Content="Porovnej varianta 3" Margin="5" Padding="5" Click="BtnPorovnej3_Click"/>
        <Button Name="BtnPorovnej4" Content="Porovnej varianta 4" Margin="5" Padding="5" Click="BtnPorovnej4_Click"/>
        <Button Name="BtnPorovnej5" Content="Porovnej varianta 5" Margin="5" Padding="5" Click="BtnPorovnej5_Click"/> 
    </WrapPanel>
    <WrapPanel HorizontalAlignment="Right">
        <Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" Padding="5" Click="BtnKonec_Click"/>
    </WrapPanel>
</StackPanel>

Kód 4: Vložení tlačítek do prvků typu WrapPanel

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
  • StackPanel
  • WrapPanel
  • Label
  • TextBox
    • TxtA
    • TxtB
    • TxtC
  • Button
    • BtnPorovnej1
    • BtnPorovnej2
    • BtnPorovnej3
    • BtnPorovnej4
    • BtnPorovnej5
    • 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ů