3. HelloWPF2

3.2. XAML

Počáteční kroky pro vytvoření projektu jsou stejné jako v případě minulého příkladu HelloWPF. Jedná se tedy o vytvoření WPF aplikace, která nyní bude obsahovat tlačítka, pomocí nichž budeme prostřednictvím C# zdrojového kódu provádět různé operace. V okně pro vytvoření nového projektu do pole pro filtrování typu vytvářené aplikace zadáme text wpf.  Po té zvolíme položku WPF App (.NET Framework) - viz Obrázek 1.

VS - výběr programovacího jazyku a typu aplikace

Obrázek 1: VS - výběr programovacího jazyku a typu aplikace

V okně konfigurace našeho nového projektu zadáme v poli názvu projektu Project name = HelloWPF. Dále klikneme na tlačítko Create - viz Obrázek 2. 


Obrázek 2: VS - konfigurace nového projektu

V předchozí verzi našeho pozdravu jsme si popsali základní prvky jazyku XAML. Ze zadání nového příkladu vyplývá, že potřebujeme na formulář umístit tři tlačítka - Stiskni, Vymaž a Konec. Prvek Grid proto rozdělíme do čtyř řádků a tří stejně širokých sloupců. Vlastností prvku Grid, kterou využijeme, je vlastnost RowDefinition, pomocí níž rozdělíme Grid na jednotlivé řádky. K této vlastnosti přistoupíme pomocí tečkové notace, tzn. Grid.RowDefinition. U každého řádku - prvku RowDefinition - budeme definovat jeho výšku - vlastnost Height - viz Kód 1. Pro vlastnost Height u řádku byly použity následující hodnoty:

  • * - značí poměrové uspořádání řádků (nebo sloupců např. 2*, 1* znamená poměr 2:1)
  • Auto - výška řádku se přizpůsobuje obsahu (nebo šířka sloupce)

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

Kód 1: Tvorba řádků v prvku Grid

Pomocí XAML kód jsme vygenerovali čtyři řádky, z nichž řádky s vlastností Auto mají nulovou výšku, protože do nich zatím nebyly vloženy žádné prvky - viz Obrázek 3.

VS_Graficky_designer_Grid_radky

Obrázek 3: Řádky v prvku Grid

Nyní rozdělíme prvek Grid na 3 stejně široké sloupce, na jejichž spodní části následně umístíme příslušná tlačítka. Tímto přístupem budou zajištěny stejné šířky vložených tlačítek. Vlastností prvku Grid, kterou využijeme, je vlastnost ColumnDefinition. Tato vlastnost umožňuje rozdělit prvek Grid na specifikovaný počet sloupců - viz Kód 2. 

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

Kód 2: Tvorba sloupců v prvku Grid

Grid je nyní rozdělen na tři stejně široké sloupce - viz Obrázek 4.


Obrázek 4: Sloupce v prvku Grid

Jak jste již jistě všimli, tvorba kontrolky v jazyce XAML je jednoduchá a novou kontrolku lze vytvořit pomocí specifikace jejího typu uzavřeného do špičatých závorek. V případě tohoto příkladu potřebujeme vytvořit kontrolku ve formě TextBlock. Musíme tedy vepsat do XAML kódu počáteční značku tlačítka a musíme ji ukončit pomocí koncové značky obsahující lomítko - viz Kód 3. Takový zápis využijeme zejména tehdy, pokud budeme potřebovat vložit jinou kontrolku do kontrolky. Vložení kontroly v XAML provedeme specifikací kontrolky mezi počáteční a koncovou značkou kontrolky. Tento přístup už jsme použili při vkládání do kontrolky typu Grid.

<TextBlock></TextBlock>

Kód 3: Vygenerování prvku TextBlock

Další možností je vložení lomítka na konec počáteční značky - viz Kód 4.

<TextBlock/>

Kód 4: Vygenerování prvku TextBlock - kratší verze

Prvek TextBlock potřebujeme umístit do druhého řádku. Proto využijeme následující kód - viz Kód 5, kde využijeme následující vlastnosti prvku TextBlock:

  • Name - název prvku. Pokud jste pojmenovali prvek pomocí okna Properties, prvku se přiřadila vlastnost x:Name (jedná se o téměř totožný zápis. Na výslednou funkci prvku to nemá vliv) 
  • Grid.Row - specifikace indexu řádku, do kterého má být umístěn prvek (index prvního řádku v Grid je roven 0)
  • Grid.Column - specifikace indexu sloupce, do kterého má být umístěn prvek (index prvního sloupce v Grid je roven 0)
  • Margin - nastavení vnějších okrajů okolo prvku
  • TextAlignment - zarovnání textu v prvku
  • FontSize - velikost písma v prvku
  • FontWeight - stupeň „tučnosti“ písma
  • Grid.ColumnSpan - kolik sloupců má prvek vyplnit
  • Background - barva pozadí prvku

<TextBlock Name="TxbVypis"  Grid.Row="1" Grid.Column="0" Margin="20,5" TextAlignment="Center" FontSize="14" FontWeight="Bold" Grid.ColumnSpan="3" Background="#FFF3F3F3"/>

Kód 5: TextBlock - vygenerování a specifikace vlastností tohoto prvku

Je také vhodné zmínit, že pro výběr kontrolky může být použito např.:

  • Okno Document Outline
  • Kliknutí do řádky v XAML kódu, kde je definován prvek
  • Grafický designer, kde je vidět náhled formuláře (okna) s jednotlivými prvky

Vlastnosti jednotlivých kontrolek lze měnit nejen v kódu, ale také pomocí okna Properties. Abychom nemuseli zdlouhavě hledat příslušnou vlastnost pomocí klikání na jednotlivé kategorie, stačí do pole pod vlastností Type  napsat název vlastnosti a provede se filtrování této vlastnosti, např. vlastnosti Background u prvku typu TextBlock - viz Obrázek 5.


Obrázek 5: Hledání vlastnosti u prvku typu TextBlock

Pro vložení tlačítek do posledního řádku u všech sloupců použijeme následující kód - viz Kód 6. Pro tlačítko byly definovány vlastnosti, které známe již z předchozího kódu. Novou vlastností je obsah tlačítka, tedy Content. Pomocí této vlastnosti můžeme vkládat nejen text, ale i jiný obsah, např. obrázek.  

<Button Name="BtnStiskni" Content="Stiskni" Margin="5" Grid.Row="3" />
<Button Name="BtnVymaz" Content="Vymaž" Grid.Column="1" Grid.Row="3" Margin="5" />
<Button Name="BtnKonec" Content="Konec" Grid.Column="2" Grid.Row="3" Margin="5" />

Kód 6: Button - vygenerování tlačítek, včetně specifikace vlastností

Aby tlačítko plnilo svoji funkci, je pro něj zapotřebí specifikovat tzv. obsluhu události (Event Handler), která zajištuje provedení vytvořeného zdrojového kódu, když bude provedena nějaká událost, např. zmačknutí tlačítka. V XAML budeme definovat událost stisknutí tlačítka pomocí vlastnosti Click - viz Obrázek 6. Výběr nabízené vlastnosti provedeme dvojitým kliknutím na položku v nabízeném seznamu. Událost poznáme pomocí ikony blesku umístěné vedle názvu vlastnosti.


Obrázek 6: XAML kód pro vygenerování události pro tlačítko - první část

Po operátoru přiřazení za typem události musíme definovat obsluhu obslužnou rutinu události, tj. metodu, která bude provedena při nastalé události. Jak vidíme na obrázku, v seznamu můžeme zvolit vygenerování metody pomocí položky <New Event Handler> v nabízeném seznamu od IntelliSense (našeptávač Visual Studia). Obslužnou rutinu události (zkráceně metodu obsluhy události) zvolíte buď dvojitým kliknutím na položku, nebo stisknutí klávesy Tab) - viz Obrázek 7.  


Obrázek 7: XAML kód pro přiřazení typu události

Po zvolení položky pro vygenerování obsluhy pro událost stisknutí tlačítka je vygenerována metoda s názvem BtnStiskni_Click - viz Kód 7. 

<Button Name="BtnStiskni" Content="Stiskni" Margin="5" Grid.Row="3" Click="BtnStiskni_Click" />

Kód 7: XAML kód pro vygenerování metody BtnStiskni_Click

Pokud označíte v grafické designeru (záložka MainWindow.xaml) tlačítko BtnStiskni , přepnete se do okna Properties a stisknete tlačítko s ikonou blesku , tj. Event handlers for selected element, můžete se přesvědčit, že vygenerovaná metoda BtnStiskni_Click byla přiřazena k události Click. Jak vidíte na obrázku, seznam událostí pro tlačítko nezahrnuje jen událost stisku tlačítka, ale i jiné události - viz Obrázek 8. Z toho plyne, že další možností jak generovat obsluhu události, je dvojitý klik s kurzorem do pole vpravo vedle události definované pro kontrolku. Tímto dvojklikem bude vygenerována metoda obsluhy události. Mějte na paměti, že tělo metody pro obsluhu události je umístěno ve třídě v souboru MainWindow.xaml.cs a že událost a název metody pro obsluhu události jako vlastnost je také definována v XAML kódu v souboru MainWindow.xaml. Při smazání obsluhy události se tedy přesvědčte, že byly smazány atributy jak ve třídě v C# kódu, tak i v jazyce XAML.


Obrázek 8: Události pro tlačítko BtnStiskni

Obdobně budeme postupovat při generování obsluh události stisku tlačítka pro tlačítka BtnVymaz a BtnKonec - viz Kód 8.

<Button Name="BtnVymaz" Content="Vymaž" Grid.Column="1" Grid.Row="3" Margin="5" Click="BtnVymaz_Click"/>
<Button Name="BtnKonec" Content="Konec" Grid.Column="2" Grid.Row="3" Margin="5" Click="BtnKonec_Click"/>

Kód 8: Code Behind - obsluha události stisknutí tlačítka pro tlačítka BtnVymaz a BtnKonec


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 9.


Obrázek 9: Výsledný formulář WPF aplikace

Objekty na formuláři

Formulář obsahuje následující objekty (kontrolky):

  • Grid
  • TextBlock
    • TxbVypis
  • Button
    • BtnStiskni
    • BtnVymaz
    • BtnKonec

které jsou umístěny následujícím způsobem - viz Obrázek 10.


Obrázek 10: VS - okno Document Outline - seznam objektů