2. KvadratickaRovniceWPF

2.2. XAML

Popis v této kapitole bude stručný, vzhledem k tomu, že jsme již několikrát použili stejné prvky. Po nastavení minimální šířky (MinWidth) a výšky (MinHeight) okna (Window), na kterou lze okno zmenšit, rozdělíme formulář na čtyři řádky, jejichž výšky jsou nastaveny následujícím způsobem - viz Kód 1. První, druhý a čtvrtý řádek se bude přizpůsobovat obsahu vložených prvků. Třetí řádek se bude přizpůsobovat roztažení okna.

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

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

Druhý řádek bude obsahovat předpis kvadratické rovnice. Ten bude zapsán pomocí 3 objektů typu TextBlock vložených do WrapPanel (aby byly vypsány za sebou). Horní index specifikujeme pomocí nastavení obtékání objektu (Margin) nahoře (druhé číslo) pomocí záporné hodnoty. Nastavíme také menší velikost písma - viz Kód 2.

<WrapPanel Margin="5,20,5,5" HorizontalAlignment="Center">
    <TextBlock Text="A * x" FontSize="16"/>
    <TextBlock Margin="0,-3,0,0" FontSize="12">2</TextBlock>
    <TextBlock Text=" + B * x + C = 0" FontSize="16"/>
</WrapPanel>

Kód 2: Předpis kvadratické rovnice (horní index)

Do dalšího řádku, který se nachází ve druhém řádku Grid (index řádku je tedy roven 1), umístíme další WrapPanel. Tento panel bude obsahovat objekty typu TextBox, které jsou určeny pro vložení hodnoty jednotlivých koeficientů členů rovnice. Za každý objekt typu TextBox umístíme objekt typu TextBlock pro vizuální určení členu jehož hodnotu koeficientu budeme specifikovat ve zmiňovaném TextBox. Všimněte si, že pro horní index jsme využili prvek Span, jehož vlastnost pro umístění ve vertikální ose vkládaných textových objektů (BaselineAlignment) nastavíme na horní hranici tohoto prvku Span. V kombinaci s malým písmem pak tento prvek vypadá jako horní index.

<WrapPanel Grid.Row="1" Margin="10,5" HorizontalAlignment="Center">
    <TextBox Name="TxtA" Margin="0,6" TextWrapping="Wrap" Text="0" Width="30"  HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <TextBlock Text="x" Margin="3,6,0,3" />
    <TextBlock Margin="0,3,0,0">
        <Span BaselineAlignment="Top" FontSize="8">2</Span>
    </TextBlock>
    <TextBlock Text=" + " Margin="3,6,0,3"/>
 
    <TextBox Name="TxtB" Margin="0,6" TextWrapping="Wrap" Text="0" Width="30"  HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <TextBlock Text="x + " Margin="3,6,0,3"/>
 
    <TextBox Name="TxtC" Margin="0,6" TextWrapping="Wrap" Text="0" Width="30"  HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <TextBlock Text="= 0" Margin="3,6,0,3"/>
</WrapPanel>

Kód 3: Prvky typu TextBox (pro vložení hodnoty koeficientů) TextBlock (pro vizuální kontrolu) umístěné v objektu WrapPanel

Pro výpis kořene použijeme objekt typu TextBox určeného pouze pro čtení (vlastnost IsReadOnly, tzn. nelze do něj vkládat hodnoty), nad který umístíme popisek - objekt typu Label. Do podbarveného objektu typu TextBox umístíme "?" (vlastnost Text), aby při počátečním spuštění bylo zřejmé, že uživatel musí vyplnit hodnoty koeficientů - viz Kód 4. 

<StackPanel Grid.Row="2">
    <Label Content="Výsledek:" FontSize="16"/>
    <TextBox Name="TxtVysledek" IsReadOnly="True" Background="AliceBlue" Text="?" TextWrapping="Wrap" Padding="5" Margin="20,0,5,0"/>
</StackPanel>

Kód 4: Řádek s výsledkem obsahující popisek (Label) a hodnotu vypočteného kořene (TextBox) vložených do StackPanel

Poslední řádek Grid bude obsahovat StackPanel, který využijeme pro vložení dalších dvou objektů typu WrapPanel pro zarovnání vložených tlačítek do těchto objektů v horizontální ose. První WrapPanel umístíme na střed a druhý zarovnáme doprava - viz Kód 5. Pro tlačítka vygenerujeme obsluhu události stisknutí tlačítka (událost Click) pomocí nastavení vlastnosti Click a zvolení položky <New Event Handler>. 

<StackPanel Grid.Row="3">
    <WrapPanel HorizontalAlignment="Center">
        <Button Name="BtnVypocti" Content="Vypočti" Margin="5" Width="80" Padding="5" Click="BtnVypocti_Click"/>
    </WrapPanel>
    <WrapPanel HorizontalAlignment="Right">
        <Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" Padding="5" Click="BtnKonec_Click"/>
    </WrapPanel>
</StackPanel>

Kód 5: Umístění tlačítek v objektech typu WrapPanel 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:

  • Grid
  • StackPanel
  • WrapPanel
  • Label
  • TextBlock
  • TextBox
    • TxtA
    • TxtB
    • TxtC
    • TxtVysledek
  • Button
    • BtnVypocti
    • 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ů