2. PrevodDoSoustavWPF

2.2. XAML

Na základě našich zkušeností s XAML bude již stručně popsán postup tvorby formuláře. Základní atributy (titulek, výšku a šířku) formuláře nastavíme následujícím způsobem - viz Kód 1.

Title="Převod čísla" Height="450" Width="500">

Kód 1: Nastavení atributů formuláře

Objekt typu Grid umístěného na formuláři rozdělíme na tři řádky. První a třetí řádek se přizpůsobí obsahu vložených prvků.  Výška druhého řádku se bude přizpůsobovat roztažení okna - viz Kód 2. 

Abychom následující XAML kód zjednodušili pro čtení a pochopení podstaty, využijeme komentáře v kódu XAML - viz Kód 3. Ten vytvoříme pomocí vložení dvou značek:

  • Počáteční značky, tj.  <!-- 
  • Koncové značky, tj. -->  
V kódu tak určíme sekce, které budeme postupně doplňovat.

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Vstupní data -->

<!-- Výstupní data -->

<!-- Tlačítka -->

Kód 2: Rozdělení Grid na řádky a komentáře jednotlivých sekcí

Pod komentář s textem Vstupní data vložíme do prvního řádku objekt typu GroupBox, který využijeme pro vymezení oblasti, která bude zahrnovat výběr typu soustavy, do které budeme číslo převádět, na kolik bytů bude převáděné číslo zobrazeno a vstupní pole pro zadání konvertovaného čísla - viz Kód 3. Abychom vizuálně oddělily vkládané prvky, umístíme do GroupBox další objekt typu Grid, který rozdělí plochu na dva sloupce. V dalším kódu uvidíme, jaké objekty vložíme pod komentáře Typ soustavy, počet bytů a Převáděné číslo. 

<!-- Vstupní data -->
<GroupBox Header="Vstupní data" Margin="5">
    <!-- Mřížka v sekci vstupní data  -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- Typ soustavy, počet bytů -->

        <!-- Převáděné číslo -->

        </Grid>
</GroupBox>

Kód 3: GroupBox - vložení objektu GroupBox do horního řádku a jeho rozdělení na dva sloupce pomocí objektu Grid

Pod komentář s textem Typ soustavy, počet bytů vložíme (do objektu Grid  v prvním řádku) objekt typu StackPanel,  má nastaven vnější obtékání 5 pixelů. Tento objekt bude umístěn do levého sloupce Grid (nemusíme nastavovat umístěn v Grid, protože je přednastavena tato pozice) - viz Kód 4.

<!-- Typ soustavy, počet bytů -->
<StackPanel Margin="5">
    <!-- Typ soustavy -->

    <!-- Počet bytů -->

</StackPanel>

Kód 4: Typ soustavy a počet bytů - StackPanel pro vložení dalších objektů StackPanel

Pod komentář Typ soustavy umístíme další StackPanel, který využijeme pro umístění titulku (Label) a rozevíracího seznamu (objekt ComboBox) pod sebe. Rozevírací seznam nazvaný cmbSoustava je určen pro výběr typu soustavy. Vložení položek do objektu ComboBox zajistíme pomocí prvků ComboBoxItem, u kterých budeme definovat obsah jednotlivých položek pomocí vlastnosti Content - viz Kód 5.

<!-- Typ soustavy -->
<StackPanel Margin="5,10,5,5">
    <Label Content="Soustava:" />
    <ComboBox Name="CmbSoustava" Margin="15,5,5,5">
        <ComboBoxItem Content="Dvojková"/>
        <ComboBoxItem Content="Šestnáctková"/>
    </ComboBox>
</StackPanel>

Kód 5: Typ soustavy - StackPanel - vložení titulku (Label) a rozevíracího seznamu (ComboBox)

Pod komentář Počet bytů umístíme další StackPanel, který využijeme pro umístění titulku (Label) a rozevíracího seznamu (objekt ComboBox) pod sebe. Rozevírací seznam nazvaný cmbBytu je určen pro výběr zobrazených počtu bytů u převedeného čísla (při zvolení malého počtu bytů může dojít k překročení rozsahu, tzn. že hodnota kterou potřebujeme uložit do proměnné je větší - přetečení). Vložení položek do objektu ComboBox znovu zajistíme pomocí prvků ComboBoxItem, u kterých budeme definovat obsah těchto položek pomocí vlastnosti Content - viz Kód 6.

<!-- Počet bytů -->
<StackPanel Margin="5,10,5,5">
    <Label Content="Počet bytů" />
    <ComboBox Name="CmbBytu" Margin="15,5,5,5">
        <ComboBoxItem Content="1"/>
        <ComboBoxItem Content="2"/>
        <ComboBoxItem Content="4"/>
        <ComboBoxItem Content="8"/>
    </ComboBox>
</StackPanel>

Kód 6: Počet bytů - StackPanel - vložení titulku (Label) a rozevíracího seznamu (ComboBox)

Pod komentář Převáděné číslo umístíme další StackPanel, který využijeme pro umístění titulku (Label) a vstupního pole pro zadání převáděného čísla (TextBox) pod sebe. Objekt StackPanel umístíme do levého sloupce Gridu - viz Kód 7. Do vstupního pole umístíme text "?" aby uživatel tušil, že má zadat hodnotu čísla určeného ke konverzi.

<!-- Převáděné číslo -->
<StackPanel Grid.Column="1" Margin="5">
    <StackPanel Margin="5,10,5,5">
        <Label Content="Číslo:" />
        <TextBox Name="TxtCislo" Text="?" Margin="15,5,5,5" FontSize="14" FontWeight="Bold"/>
    </StackPanel>
</StackPanel>

Kód 7: Převáděné číslo - StackPanel - vložení titulku (Label) a vstupního pole (TextBox)

Pod komentář Výstupní data vložíme do druhého řádku opět objekt typu GroupBox, který využijeme pro vymezení oblasti, která bude zahrnovat titulek (Label) a výstupní pole (TextBox) pro zobrazení výsledku, tj. převáděného čísla - viz Kód 8. Vypsaný výsledek v TextBox bude tučně (vlastnosti FontWeight), vycentrujeme jak v horizontální ose (HorizontalContentAlignment) tak i vertikální (VerticalContentAlignment). Podbarvíme pole modře (Background), zamkneme pro zadání hodnot (IsReadOnly), nastavíme vnější okraje (Margin) a vnitřní okraje (Padding) a umožníme zalamování obsahu na nový řádek (TextWrapping). 

<!-- Výstupní data -->
<GroupBox Header="Výstupní data" Grid.Row="1" Margin="5">
    <StackPanel>
        <Label Content="Výsledek:" FontWeight="Bold" FontSize="14" />
        <TextBox Name="TxtVysledek" Margin="20,5" Padding="5" Grid.Row="2" TextWrapping="Wrap" HorizontalContentAlignment="Center" 
                 VerticalContentAlignment="Center" FontSize="14" FontWeight="Bold" IsReadOnly="True" Background="AliceBlue"/>
    </StackPanel>
</GroupBox>

Kód 8: Výstupní data - StackPanel - vložení titulku (Label) a výstupního pole (TextBox)

Pod komentář Tlačítka vložíme StackPanel pro umístění dvou tlačítek pod sebe do posledního řádku Grid. Do objektu StackPanel proto umístíme dva objekty typu WrapPanel, do kterých umístíme jednotlivá tlačítka.

Do prvního objektu WrapPanel umístíme tlačítko Převod. Tento WrapPanel vystředíme v horizontální ose (HorizontalAlignment). 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>. U obou tlačítek nastavíme vnitřní okraje (vlastnost Padding) a také vnější okraje (vlastnost Margin) u obou objektů. 

Po stisknutí tlačítka Převod bude převedeno zadané číslo v dekadické soustavě do zvolené soustavy a zobrazeno v požadovaného počtu bytů. 

Druhé tlačítko Konec umístíme do druhého WrapPanel, který zarovnáme k pravému okraji - viz Kód 9.

<!-- Tlačítka -->
<StackPanel Grid.Row="2">
    <WrapPanel HorizontalAlignment="Center">
        <Button Name="BtnPrevod" Content="Převod" Margin="5" Width="100" Padding="5" Click="BtnPrevod_Click"/>
    </WrapPanel>
    <WrapPanel HorizontalAlignment="Right">
        <Button Name="BtnKonec" Content="Konec" Margin="5" Width="100" Padding="5" Click="BtnKonec_Click"/>
    </WrapPanel>
</StackPanel>

Kód 9: Tlačítka - StackPanel - tlačítko pro převod čísla 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
  • GroupBox
  • StackPanel
  • WrapPanel
  • Label
  • TextBox
    • TxtCislo
    • TxtVysledek
  • ComboBox
    • CmbSoustava
    • CmbBytu
  • Button
    • BtnPrevod
    • 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ů