2. FaktorialWPF

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 dva řádky a dva sloupce. Výška prvního řádku se bude přizpůsobovat roztažení okna. Druhý řádek se přizpůsobí obsahu vložených prvků. - viz Kód 1. 

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

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

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

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

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

Do prvního řádku Grid  (s indexem 0) a prvního sloupce umístíme objekt typu WrapPanel. První objekt typu Label je popisek dalšího vloženého objektu typu TextBox. V TextBox budeme zadávat hodnotu, pro níž bude vypočten faktoriál pomocí stisknutí některého z tlačítek. Číslo (číslice) vepsané do TextBox je vystředěno jak v horizontální tak i vertikální ose - viz Kód 3.

<WrapPanel Margin="5,20,5,5" HorizontalAlignment="Center">
    <Label Content="Zadejte číslo:" Margin="5" />
    <TextBox Name="TxtCislo" Margin="5" TextWrapping="Wrap" Text="0" Width="120" HorizontalContentAlignment="Center" 
             VerticalContentAlignment="Center"/>
</WrapPanel>

Kód 3: WrapPanel s popiskem (Label) a zadávanou hodnotou (v TextBox), pro níž bude vypočten faktoriál

V dalším WrapPanel v prvním řádku a ve druhém sloupci Grid bude také umístěn popisek (objekt typu Label) a objekt TextBox, do nějž budeme vypsána vypočtená hodnota faktoriálu. Tento TextBox zamkneme pro vkládání dat (vlastnost IsReadOnly) a podbarvíme (Background). Umožníme také zalamování textu do více řádků (vlastnost TextWrapping). Hodnota faktoriálu vypsaného do TextBox bude vystředěna jak v horizontální tak vertikální ose - viz Kód 4.

<WrapPanel Margin="5,20,5,5" Grid.Column="1" HorizontalAlignment="Center">
    <Label Content="Faktoriál:" Margin="5" />
    <TextBox Name="TxtFaktorial" Margin="5" TextWrapping="Wrap" Text="0" Width="200" IsReadOnly="True" 
             Background="AliceBlue" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</WrapPanel>

Kód 4: WrapPanel s popiskem (Label) a vypisovanou hodnotou (v TextBox) vypočteného faktoriálu

Do druhého řádku řádku Grid umístíme StackPanel, do něhož umístíme dva objekty typu WrapPanel. Do prvního WrapPanel umístíme tlačítka pro výpočet faktoriálu. Do druhého WrapPanel umístíme tlačítko pro ukončení aplikace. Pro 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 5.

<StackPanel Grid.Row="1" Grid.ColumnSpan="2">
    <WrapPanel HorizontalAlignment="Center">
        <Button Name="BtnFor" Content="For" Margin="5" Width="110" Height="30" Click="BtnFor_Click"/>
        <Button Name="BtnWhile" Content="While" Margin="5" Width="110" Click="BtnWhile_Click"/>
        <Button Name="BtnDoWhile" Content="Do While" Margin="5" Width="110" Click="BtnDoWhile_Click"/>
        <Button Name="BtnRekurze" Content="Rekurze" Margin="5" Width="110" Click="BtnRekurze_Click"/>
        <Button Name="BtnMazat" Content="Mazat" Margin="5"  Width="110" Click="BtnMazat_Click"/>
    </WrapPanel>
    <WrapPanel HorizontalAlignment="Right">
        <Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" Padding="5" Click="BtnKonec_Click"/>
    </WrapPanel>
</StackPanel>

Kód 5: StackPanel - umístění tlačítek v objektech typu WrapPanel v posledním řádku Grid

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
    • TxtCislo
    • TxtFaktorial
  • Button
    • BtnFor
    • BtnWhile
    • BtnDoWhile
    • BtnBezCyklu
    • BtnMazat
    • 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ů