2. VypisRadyWPF

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="Výpis deseti čísel na obrazovku (4 varianty)" Height="350" Width="800">

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

Formulář rozdělíme na dva řádky, jejichž výšky jsou nastaveny následujícím způsobem - viz Kód 2. Výška řádku se bude přizpůsobovat roztažení okna. Druhý řádek se přizpůsobí obsahu vložených prvků.

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

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

První řádek Grid  (s indexem 0) bude obsahovat objektu typu TextBox, do kterého bude po stisknutí tlačítka vypsána příslušná řada deseti čísel oddělených čárkou. U tohoto objektu je nastavena fixní šířka a výška. Pokud bude text delší, než je šířka tohoto objektu, bude zbývající text umístěn na další řádek v tomto objektu (vlastnost TextWrapping). Do objektu budeme pouze vypisovat řady čísel, proto jej nastavíme jen pro čtení (vlastnost IsReadOnly) a zabarvíme pozadí (vlastnost BackGround). Objekt bude umístěn na střed prvního řádku. Všimněte si, že není zapotřebí specifikovat umístění objektu do prvního řádku (Grid.Row="0"). To je provedeno automaticky, pokud tato vlastnost není specifikována. Dále v kódu není specifikováno zarovnání v horizontální ose (vlastnost HorizontalAlignment), protože se standardně objekt rozprostře od středu do celého vnořeného objektu, v tomto případu řádku. My jsme však specifikovali fixní šířku a výšku a díky tomu objekt je pouze vycentrován. Text uvnitř objektu bude vypisován na střed (vlastnost HorizontalContentAlignment). Při počátečním spuštění bude v okně vypsán text "Výpis řady čísel" (vlastnost Text) - viz Kód 3.

<TextBox Name="TxtVypis" Height="70" Margin="5" TextWrapping="Wrap" Text="Výpis řady čísel" Width="400" HorizontalContentAlignment="Center"
         VerticalContentAlignment="Center" Background="AliceBlue" IsReadOnly="True"/>

Kód 3: Objekt typu TextBox určený pro výpis desítky čísel

Do druhého řádku Grid (s indexem 1) objekt typu StackPanel, do něhož vložíme dva objekty typu WrapPanel. První WrapPanel bude sloužit pro horizontální zarovnání tlačítek do řady. Všimněte si, že stačí pouze definovat výšku (vlastnost Height)  pouze u jednoho tlačítka a výška ostatních tlačítek se přizpůsobí této výšce. Tlačítka ve WrapPanel mají nastavenu pevnou šířku (vlastnost Width) a tloušťku obtékání (vlastnost Margin). 

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

Druhý WrapPanel zarovnáme k pravému okraji (vlastnost HorizontalAlignment). Do tohoto objektu umístíme tlačítko Konec - viz Kód 4.

<StackPanel Grid.Row="1">
            <WrapPanel HorizontalAlignment="Center">
                <Button Name="BtnFor" Content="1. deset For" Margin="5" Width="110" Height="30" Click="BtnFor_Click"/>
                <Button Name="BtnWhile" Content="2. deset While" Margin="5" Width="110" Click="BtnWhile_Click"/>
                <Button Name="BtnDoWhile" Content="3. deset Do While" Margin="5" Width="110" Click="BtnDoWhile_Click"/>
                <Button Name="BtnBezCyklu" Content="4. deset bez Cyklu" Margin="5" Width="110" Click="BtnBezCyklu_Click"/>
                <Button Name="BtnMazat" Content="Mazat" Margin="5" Width="110"/>
            </WrapPanel>
            <WrapPanel HorizontalAlignment="Right">
                <Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" Padding="5" Click="BtnKonec_Click"/>
            </WrapPanel>
        </StackPanel>

Kód 4: 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:

  • Grid
  • StackPanel
  • WrapPanel
  • TextBox
    • TxtVypis
  • 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ů