Hello World

1. HelloWorld

Vytvořte program pro konzolovou aplikaci, který vypíše na obrazovku zprávu Hello, World!

Účel příkladu

• Základní ukázka výpisu textu pomocí programu a běhu programu pomocí konzolové aplikace
  

Typ aplikace

• Konzolová aplikace

Popis úkolu 

• Vypsání textu "Hello, World!" v hlavní metodě

Funkčnosti

• Výpis textu

Výstup programu

Výstup programu: Ukázka výpisu v hlavní metodě programu HelloWorld

1.1. Analýza a návrh řešení

Příklad Hello, World! je prvním příkladem, který lze nalézt v téměř všech učebnicích programovacích jazyků. Často se také tento nejjednodušší program používá jako test správnosti instalace daného programovacího jazyka. My si díky tomuto příkladu vyzkoušíme spustit příkaz, který vypíše text (řetězec znaků) na řádek v konzolové aplikaci.

Vývojový diagram

Podívejme se na vývojový diagram tohoto programu. V bloku hlavního programu je uzavřen v mezních značkách příkaz výstupu (Output), který nám zajišťuje výpis textu Hello, World! na řádek. Tento text je parametrem tohoto příkazu. Ve vývojových diagramech se parametry zapisují vpravo vedle textu v bloku příkazu. Nad blokem příkazu výpisu je vpravo umístěn čárkovaný blok, který označuje komentář (popisek toho, co se děje v navazujícím bloku).

U konzolové aplikace je zapotřebí v C# kódu umístit další příkaz čtení, který umožňuje uživateli přečíst si výpis, jinak by program po vypsání byl automaticky ukončen. Tento krok však není zapotřebí provádět u všech programovacích jazyků, proto tento krok nebudeme umísťovat do vývojového diagramu. 

Obrázek 1: Vývojový diagram algoritmu HelloWorld

1.2. C# kód

Konzolová aplikace

V následujících odstavcích si popíšeme, jak vytvořit naši první konzolovou aplikaci odpovídající zadání příkladu.

Vytvoření projektu

Nejprve spustíme aplikaci Visual Studio 2019 - viz Obrázek 1. Dále bude uváděna jen zkratka VS. 

Obrázek 1: Logo Visual Studio 2019

Přepnutí VS do angličtiny

VS má možnost instalace různých jazykových sad včetně češtiny. My však tuto možnost záměrně nevyužijeme za účelem osvojení anglických technických termínů z prostředí programování. Zároveň nám anglické termíny umožní snadnější vyhledávání např. v nápovědě, ve fórech, nebo v internetovém vyhledávači.

Pokud máme zapnutou českou jazykovou sadu, při spuštění prostředí VS se nám otevře okno v češtině, které se týká nastavení projektu např. v jakém jazyce má být projekt programován, pro které platformy je určen a jaký typ aplikace má být vytvořen. Pro přepnutí jazyku, nepotřebujeme vytvářet nový projekt, proto zvolíme možnost Pokračovat bez kódu v dolní pravé části okna - viz Obrázek 2. 

Obrázek 2: VS - okno nabídky projektů - čeština

 Tím se přepneme do prostředí VS. V horní hlavní nabídce pro změnu jazyka musíme nastavit VS následujícím způsobem: Nástroje → Možnosti → Prostředí → Mezinárodní nastavení → Jazyk = English - viz Obrázek 3.

Obrázek 3: VS - nastavení prostředí - čeština

Změna v nastavení jazyka VS se projeví až při opětovném spuštění VS - viz Obrázek 4. 

Obrázek 4: VS - změna jazyku - potvrzení

Zavřete VS a znovu otevřete VS.

Vytvoření projektu

Po spuštění VS se znovu spustí okno pro tvorbu, nebo spuštění již vytvořeného projektu. Nyní je však nabídka tohoto okna v angličtině - viz Obrázek 5. 

Obrázek 5: VS - okno nabídky projektů - angličtina

V pravé dolní části okna zvolíme tlačítko Create a new project - viz Obrázek 6.

Obrázek 6: VS - tlačítko vytvořit nový projekt

Pokud jste aktuální okno s projekty zavřeli, je možné projekt vytvořit pomocí horní hlavní nabídky VS - viz Obrázek 7. 

Obrázek 7: VS - hlavní nabídka

V této nabídce klikneme na File → New → Project... → 

V okně s projekty vybereme programovací jazyk, pomocí něhož budeme vytvářet naši první aplikaci: Language → jazyk C# - viz Obrázek 8.

Dále vybereme platformu, pro kterou budeme vytvářet naši aplikaci: Platform  → Windows

Jako poslední vybereme typ aplikace: Project type → Console

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

Z vyfiltrovaných typů aplikací vybereme Konzolová aplikace (.NET Framework) - viz Obrázek 9.

Obrázek 9: VS - výběr konzolové aplikace - .NET Framework

V okně konfigurace nového projektu vyplníme následující atributy: Project name = HelloWorld - viz Obrázek 10.

Pokud nám nevyhovuje umístění adresáře projektu, lze definovat jinou cestu v Location. 

Solution name (soubor s příponou *.sln) ponese stejné jména jako název našeho projektu. 

Framework ponecháme automaticky detekovanou pomocí VS. 

Klikneme na tlačítko Create (tím se vygeneruje projektu, do kterého budeme moci vpisovat náš zdrojový kód).

Obrázek 10: VS - konfigurovat nový projekt

C# kód

VS nám vygenerovalo v našem projektu zdrojový soubor Program.cs (cs představuje CSharp, tedy C#), který je zobrazen v okně Editoru kódu - viz Obrázek 11. Pojďme si v rychlosti popsat GUI (grafické uživatelské rozhraní) VS. S hlavní nabídkou jsme se již setkali při změně jazyku. Pod touto nabídkou je v našem případě zobrazen panel Standard. Pomocí tohoto panelu lze ukládat kód, spouštět program, komentovat, atd. V okně editoru kódu vidíme automaticky vygenerovaný kód pro naší konzolovou aplikaci. Ve stromové struktuře v panelu Solution Explorer vidíme rozpad jednotlivých souborů umístěných v našem projektu. Vidíme, že náš soubor Program.cs obsahuje třídu Program a v ní vnořenou hlavní metodu Main.

Obrázek 11: VS - GUI - uživatelské prostředí

Pojďme si tento kód zběžně prozkoumat. Náš zdrojový kód programu začíná klíčovým slovem using (předdefinované rezervované slovo), které specifikuje využití určitých knihoven (systémových tříd), které mohou být využity ve jmenném prostoru, tj. namespace. Klíčové slovo namespace, definuje jmenný prostor HelloWorld. Jmenný prostor deklaruje obor obsahující sadu souvisejících objektů. 

Samotná metoda Main (jedná se o proceduru, tzn. nemá žádný výstup - void) je součástí třídy Program - viz Kód 1. Třída slouží jako předpis pro vznik objektu (tzv. instance třídy). Metoda Main označuje vstupní bod programu (lze ji vnímat jako hlavní program). Za metodou Main jsou uvedeny kulaté závorky, které značí parametr metody (vstup/y) ve formě pole s textovými řetězci. Parametr args není povinné uvádět, takže můžeme tento parametr uvnitř závorky smazat v případě, že ho nepotřebujeme. Zdrojový kód, který má být v rámci metody Main vykonán, se umísťuje do složených závorek { }. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
        }
    }
}

Kód 1: Program HelloWolrd - deklarace těla hlavní statické metody Main 

Za první složenou závorku umístíme příkaz WriteLine pro samotný výpis textu na obrazovku - viz Kód 2. Tento příkaz (v podstatě se jedná o metodu uvnitř třídy Console) přijímá text, který je uveden uvnitř kulatých závorek mezi dvojitými uvozovkami. Text představuje řetězec za sebou jdoucích znaků - datový typ string. Poněvadž by po provedení příkazu výpisu textu nastalo ukončení programu a neměli bychom možnost si přečíst vypsaný text, přidáme do programu další příkaz, který čeká na stisk klávesy a po té je program následně ukončen. Jedná se o příkaz ReadKey, který načte nějaký vstup, který by následně mohl být dále zpracován. My si však tento vstup nikam neukládáme a ani s ním dále nechceme pracovat. Po stisku klávesy tedy následně dojde k ukončení programu. 

Vzhledem k tomu, že je možné, že se k programu někdy později vrátíme a už bychom si nepamatovali, o co jsme se v kódu pokoušeli, je vhodné náš kód doplnit tzv. komentáři, tedy poznámkami, které nemají vliv na provádění kódu. Jednořádkový komentář umístíme za dvojité lomítko nad kód, kterého se týká.

//výpis textu
Console.WriteLine("Hello, World!");
//čekání na ukončení, tj. načtení vstupu z klávesnice
Console.ReadKey();

Kód 2:  Příklad zdrojového kódu pro vypsání textu a čekání na ukončení programu 

1.3. Výsledný kód

C# kód

Výsledný kód programu pro konzolovou aplikaci, který je umístěn v souboru Program.cs, bude vypadat následovně - viz Kód 1. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            //výpis textu
            Console.WriteLine("Hello, World!");
            //čekání na ukončení, tj. načtení vstupu z klávesnice
            Console.ReadKey();
        }
    }
}

Kód 1: Program HelloWolrd - deklarace hlavní statické metody Main 

Spuštění programu

Aby mohl být programu spuštěn musí být provedena komplikace zdrojového kódu pomocí kompilátoru VS. To provedeme pomocí tlačítka Start v panelu nad oknem editoru kódu - viz Obrázek 1. 

Obrázek 1: VS - spuštění programu

Nebo lze využít horní hlavní nabídky Debug → Start Debugging, nebo stiskem klávesy F5 (pokud uživatel nenastavil VS jinak). 

Spuštěná aplikaci může být zavřena pomocí:

• Zavíracího tlačítka v pravém horním rohu aplikace
• Horní hlavní nabídky Debug → Stop Debugging
• Stiskem kláves Shift a F5
• Stiskem tlačítka Stop Debugging - viz Obrázek 2

Obrázek 2: VS - ukončení spuštěného programu

Výstup programu

Na následujícím obrázku vidíme výstup z našeho prvního programu, který vypsal text Hello, World! - viz Výstup programu - Kód 1 . Po provedení výpisu konzolová aplikace čeká na stisk klávesy, aby se po stisku mohla následně ukončit. 

Výstup programu - Kód 1: Ukázka výpisu v hlavní metodě programu HelloWorld

2. HelloWPF

Vytvořte WPF aplikaci, která vypíše na obrazovku v ovládacím prvku typu TextBlock zprávu Hello, World!

Účel příkladu

• Základní ukázka výpisu textu pomocí programu a běhu programu pomocí WPF aplikace
  

Typ aplikace

• WPF aplikace

Popis úkolu 

• Vypsání textu "Hello, World!" (v objektu typu TextBlock)

Funkčnosti

• Výpis textu

Výstup programu

Výstup programu: Ukázka výpisu textu do objektu typu TextBlock programu HelloWPF

2.1. Analýza a návrh řešení

V podstatě se jedná o stejnou ideu původního příkladu HelloWorld pro konzolovou aplikaci, ve které jsme požadovali, aby se na obrazovku v konzole vypsal text "Hello, World!" Nyní však budeme používat modernější zobrazovací technologii WPF (Windows Presentation Foundation). Vytvoříme tzv. prezentační vrstvu, ve které zobrazíme požadovaný text. 

Podstata příkladu, tedy i vývojového diagramu, je totožná s předchozím příkladem. Na rozdíl od konzolové aplikace není zapotřebí načtení nějakého znaku na konci, abychom si mohli vypsaný text přečíst. Na další obrázku vidíme návrh grafického uživatelského rozhraní tzv. GUI, jak by mohla vypadat naše vytvořená aplikace, která bude zobrazovat text uprostřed okna (formuláře).

Obrázek 1: Návrh GUI pro aplikaci HelloWPF

Formulář bude obsahovat následující objekty (kontrolky), které budou vnořeny následujícím způsobem:

• Grid
• TextBlock

2.2. XAML

Technologie WPF používá tzv. rozšiřitelný značkovací jazyk XAML (eXtensible Application Markup Language), který slouží primárně pro tvorbu grafického rozhraní aplikací. 

Jak již známe z minulého příkladu, při spuštění VS se nám automaticky spustí okno, ve kterém si zvolíme, jaký typ aplikace budeme vytvářet. V tomto okně však nyní nebudeme filtrovat typ jazyku, platformu, nebo typ projektu, ale vepíšeme do pole pro vyhledávání (obdélník umístěný v horní části okna) text: wpf - viz Obrázek 1. Provede se následně filtrování všech možných typů projektů založených na WPF. 

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

My budeme využívat při tvorbě aplikace prostředí .NET Framework. Zvolíme tedy položku WPF App (.NET Framework)  - nikoliv .NET Core, ani .NET Standard - viz Obrázek 2.

Obrázek 2: VS - výběr WPF aplikace .NET_Framework

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

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

Nový projekt obsahuje různé soubory (jejich seznam ve formě stromové struktury nalezneme v Solution Exploreru). My se nyní zaměříme na soubor MainWindow.xaml. V horní části VS je okno grafického designeru (v horní části okna VS je zvolena záložka MainWindow.xaml), kde je vidět grafický návrh formuláře založeného na XAML. V levé části VS jsou umístěny záložky, Toolbox (slouží pro vložení prvků na formulář) a Document Outline (seznam prvků na formuláři). Tyto záložky využijeme později. Pokud označíte (kliknete) na formulář v grafickém designeru, v pravé dolní části VS se vám zobrazí panel vlastností zvoleného objektu - Properties - viz Obrázek 4. 

Obrázek 4: VS - GUI - popis prostředí

XAML kód umístěný v souboru MainWindow.xaml nalezneme v dolním okně, kde je zobrazeno rozložení našeho formuláře v jazyce XAML, tj. všechny prvky, které náš formulář obsahuje - viz Kód 1.

<Window x:Class="HelloWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

Kód 1: XAML kód formuláře - Window

Prvním prvkem je okno, které uvozuje značka <Window> a další koncová značka </Window> uvozuje konec specifikace okna. Toto okno aplikace je primárně spuštěno jako první, když aplikaci spustíme. 

Okno má své atributy, které lze nastavit jako je např. titulek Title, výška Height a šířka Width. Pro nastavení vlastností můžeme použít přímo XAML kód, nebo okno Properties. 

K jednoznačnému výběr prvku na formuláři použijeme okno Document Outline (umístěného v levém panelu VS) ve kterém nalezneme seznam prvků našeho formuláře - viz Obrázek 5.

Obrázek 5: VS - okno Document Outline - seznam prvků na formuláři

Pro výběr samotného okna klikneme na Window. Po té nastavíme vlastnosti tohoto vybraného okna v okně Properties - viz Obrázek 6. V tomto okně nastavíme ve skupině Common vlastnost Title = "HelloWPF".  

Obrázek 6: VS - okno Properties - nastavení vlastností formuláře

V okně XAML kódu vidíme, že mezi značkami okna se provedla změna kódu titulku (záhlaví) formuláře.

Title="HelloWPF" 

Kód 2: Nastavení vlastnosti Title - titulku formuláře

V okně XAML kódu také vidíme, že mezi značky pro okno (<Window></Window>) je vložen tzv. mřížkový panel <Grid> </Grid> na formuláři, do kterého se umísťují ovládací prvky - kontrolky (anglicky Controls). 

Pro zobrazení textu "Hello, World!" použijeme kontrolku typu TextBlock, kterou vložíme do Gridu na formuláři pomocí okna panelu nástrojů - Toolbox. Kontrolku nalezneme ve skupině Common WPF Controls - viz Obrázek 7. 

Obrázek 7: VS - okno Toolbox - kontrolka TextBlock

Vložení kontrolky provedeme přetažením zvolené kontrolky v Toolboxu  na formulář v grafickém designeru (souřadnice umístění kontrolky závisí na poloze, kam jsme umístili kontrolku na formulář - v našem případu se jedná o souřadnice 278, 188). Pokud chceme zvětšit vložený TextBlock umístíme kurzor na hranu (nebo na střed hrany) TextBlocku a přidržením levého tlačítka myši roztáhneme na požadovanou velikost - viz Obrázek 8.

Obrázek 8: VS - grafický designer formuláře - kontrolka Textblock

Umístění kontrolky na formulář způsobí změnu XAML kódu, který do mezních značek Gridu umístil kód pro generování kontrolky typu TextBlock.

<TextBlock HorizontalAlignment="Left" Margin="278,188,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

Kód 3: Nastavení vlastností kontrolky TextBlock

Došlo zároveň pomocí XAML k nastavení vlastností kontrolky:

• HorizontalAlignment - horizontální zarovnání vůči okraji, k nimž je kontrolka připojena
  
• Margin - nastavení vnějších okrajů okolo kontrolky
  
• TextWrapping - režim zalamování textu v případě využití víceřádkového textu
  
• Text - text, který má být zobrazen
  
• VerticalAlignment - vertikální zarovnání vůči okraji, k nimž je kontrolka připojena
  

Nyní si nastavíme ve skupině Text  velikost písma na 40 px u námi vloženého TextBlock - viz Obrázek 9. 

Obrázek 9: VS - okno Properties - nastavení vlastnosti Text - velikost písma

Jako poslední krok provedeme nastavení vlastnosti Text = "Hello, World!" a tím se nám zobrazí ve vloženého TextBlock požadovaný text - viz Obrázek 10.

Obrázek 10: VS - okno Properties - nastavení vlastnosti Common - Text

Gratuluji, Vaše první aplikace ve WPF je hotová - viz Obrázek 11. 

Obrázek 11: VS - grafický designer - formulář - vyplněný Textblock

Objekty na formuláři

Formulář obsahuje následující objekty (kontrolky). Jejich přehled získáte v okně Document Outline ve Visual Studio - viz Obrázek 11:

• Grid
• TextBlock

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

2.3. XAML - prvky formuláře

Nastavení formuláře

Title="HelloWorldWPF" Height="450" Width="800">

<TextBlock HorizontalAlignment="Left" Margin="278,188,0,0" TextWrapping="Wrap" Text="Hello, World!" VerticalAlignment="Top" FontSize="40"/>

2.4. Výsledný kód

XAML kód

Výsledný XAML kód programu bude vypadat následovně - viz Kód 1. 

<Window x:Class="HelloWorldWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloWorldWPF"
        mc:Ignorable="d"
        Title="HelloWorldWPF" Height="450" Width="800">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="278,188,0,0" TextWrapping="Wrap" Text="Hello, World!" VerticalAlignment="Top" FontSize="40"/>
    </Grid>
</Window>

Kód 1: Výsledný XAML kód WPF aplikace

Spuštění programu

Zkusme si nyní naši aplikaci spustit pomocí tlačítka Start - viz Obrázek 1. Tzv. "spuštění" znamená, že Visual Studio zkompiluje kódy, pokusí se odhalit chyby a zobrazí výslednou aplikaci. 

Obrázek 1: VS - spuštění programu

Spuštění lze také provést pomocí stisku klávesy F5 (pokud uživatel nenastavil VS jinak), nebo pomocí hlavní nabídky Debug →  Start Debugging.

Výstup programu

Na následujícím obrázku vidíme výstup našeho programu s použitím WPF, který vypsal text "Hello, World!". V závislosti na umístění kontrolky TextBlock se bude lišit formátování našeho formuláře - viz Výstup programu - Kód 1.

Výstup programu - Kód 1: Výpis textu do TextBlock

3. HelloWPF2

Vytvořte WPF aplikaci, která po stisknutí tlačítka na formuláři vypíše do ovládacího prvku typu TextBlock zprávu Hello, World!

Účel příkladu

• Základní ukázka použití ovládacích prvků na formuláři, výpisu textu pomocí programu a běhu programu pomocí WPF aplikace
  

Typ aplikace

• WPF aplikace

Popis úkolu 

• Vypsání textu "Hello, World!" 

Funkčnosti

• Při stisku tlačítka Stiskni (objekt typu Button) se provede vypsání textu "Hello, World!" (do objektu typu TextBlock)
  
• Při stisku tlačítka Vymaž se provede vymazání zobrazeného textu  
  
• Při stisku tlačítka Konec se provede ukončení aplikace 
  

Výstup programu

Výstup programu: Ukázka výpisu textu do objektu typu TextBlock programu HelloWPF2

3.1. Analýza a návrh řešení

Na rozdíl od předchozího příkladu, kde byl text stále zobrazen v prvku typu TextBlock umístěného na formuláři, se v tomto případě vydáme cestou obsluhy události, tedy provedení námi vytvořeného kódu při zachycení akce (události - Event), v našem případu stisknutí tlačítka Stiskni - viz Obrázek 1. Budeme tedy definovat metodu (podprogram ve formě procedury), která zajistí zobrazení textu "Hello, World!" v prvku typu TextBlock. 

Obrázek 1: Návrh GUI pro aplikaci HelloWorldWPF2

Pro určení pozice jednotlivých vkládaných prvků využijeme rozdělení objektu Grid na jednotlivé řádky a sloupce. Díky tomuto rozdělení budeme moci definovat pozici, do kterého řádku a sloupce objektu Grid daný vložený objekt patří např. pole pro výpis textu - typ TextBlock. Následující obrázek ukazuje rozmístění jednotlivých objektů v mřížce formuláře - viz Obrázek 2.

Obrázek 2: Návrh GUI - rozložení prvků v mřížce formuláře

Formulář bude obsahovat následující objekty (kontrolky), které budou vnořeny následujícím způsobem:

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

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.

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.

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ů

3.3. XAML - prvky formuláře

Nastavení formuláře

Title="HelloWPF2" Height="250" Width="600">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Name="TxbVypis"  Grid.Row="1" Grid.Column="0" Margin="20,5" TextAlignment="Center" FontSize="14" FontWeight="Bold" Grid.ColumnSpan="3" Background="#FFF3F3F3"/>
        <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" />

3.4. C# kód

Možná jste si všimli, že pokud v okně Solution Explorer  kliknete na ikonu pro detailnější rozpad stromové struktury projektu u souboru MainWindow.xaml, zobrazí se další soubor s názvem MainWindow.xaml.cs. Jedná se o tzv. Code Behind, který obsahuje kód bsluhující veškeré události vyvolané uživatelem při manipulaci s aplikací, a také sám s kontrolkami manipuluje. My v tomto souboru budeme definovat obsluhu události při stisku některého z tlačítek. Tento soubor obsahuje veřejně přístupnou částečnou třídu (partial) MainWindow odvozené od základní třídy Window se stejným jmenným prostorem HelloWPF2 (prozatím nás tato detailní fakta ještě nemusí zajímat, protože jsme zatím nezískali potřebné teoretické znalosti týkající se třídy, dědění, modifikátorů přístupu, atd.) - viz Kód 1. 

V XAML jsme definováním události a připojením handleru (obsluhy) události pro stisk tlačítka (událost Click) u kontrolek typu Button, tj. BtnStiskni, BtnVymaz a BtnKonec vygenerovali v této třídě soukromé metody bez návratu (private void) s příslušným názvem tlačítek doplněné o podtržítko s názvem události např. BtnStiskni_Click. Do těla těchto metod budeme vkládat zdrojové kódy v C# pro obsluhu události stisknutí tlačítka (jednoduše řečeno, když stiskneme tlačítko, provede se kód v této metodě). Pro doplnění uveďme, že argumenty těchto metod jsou dva. První parametr sender typu Object představuje objekt, který událost vyvolal a parametr e typu RoutedEventArgs obsahuje informaci a data o události, která byla vyvolána.

namespace HelloWPF2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void BtnStiskni_Click(object sender, RoutedEventArgs e)
        {

        }
 
        private void BtnVymaz_Click(object sender, RoutedEventArgs e)
        {

        }
 
        private void BtnKonec_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

Kód 1: Code Behind - obsluha události stisknutí tlačítek

Nyní bychom měli definovat kód, který bude proveden po stisku tlačítka BtnStiskni, tj. tělo metody BtnStiskni_Clik. V této metodě budeme psát zdrojový kód pro výpis textu kontrolky TxbVypis (kontrolka typu TextBlock). Dříve jsme text definovali pomocí vlastnosti Title v okně Properties. Nyní provedeme to samé, ale pomocí C# kódu, který umístíme do obsluhy události, tedy do těla metody BtnStiskni_Clik. Jak již bylo řečeno, obsluha události je metodou třídy MainWindow. Tato třída obsahuje jak metody, tak i samotné kontrolky (představují objekty třídy). Abychom se podívali do obsahu třídy, lze využít klíčové slovo this. Toto klíčové slovo využijeme v těle metody BtnStiskni_Clik, kde si pomocí tečkové notace vybereme z nabízeného seznamu kontrolku TxbVypis - viz Obrázek 1. Seznam, který se objeví po zadání this., obsahuje tzv. datové složky (anglicky Fields) a metody této třídy.

Obrázek 1: Přístup k obsahu třídy pomocí klíčového slova this

Po výběru tlačítka si pomocí tečkové notace vybereme vlastnost kontrolky Text - viz Obrázek 2.

Obrázek 2: Přístup k vlastnosti kontrolky TxbVypis

Pomocí operátoru přiřazení následně přiřadíme do kontrolky textový řetězec "Hello, World!" a ukončíme výraz středníkem - viz Kód 2. Pro větší přehlednost kódu jsme doplnili o řádek výše komentář, co se ve výrazu děje. Komentáře oceníte zejména tehdy, pokud se ke kódu vracíte po delší době.

private void BtnStiskni_Click(object sender, RoutedEventArgs e)
{
    //výpis textu
    this.TxbVypis.Text = "Hello, World!";
}

Kód 2: Metoda BtnStiskni_Click

Další metodou, jejíž tělo musíme specifikovat, je metoda BtnVymaz_Click. V této metodě bude provedeno vymazání textu z kontrolky TxbVypis. Výmaz textu zajistíme přiřazením prázdného textového řetězce, tj. nic mezi dvěma uvozovkami - viz Kód 3.

private void BtnVymaz_Click(object sender, RoutedEventArgs e)
{
    //vymazání textu v kontrolce
    this.TxbVypis.Text = "";
}

Kód 3: Metoda BtnVymaz_Click

Jako poslední musíme vytvořit zdrojový kód pro metodu BtnKonec_Click. Zde budeme požadovat zavření formuláře (okna), které obsahuje všechny kontrolky. To provede pomocí metody Close(). Prázdné závorky značí, že tato metoda nepotřebuje žádný argumenty (vstupní parametry) - viz Kód 4.

private void BtnKonec_Click(object sender, RoutedEventArgs e)
{
    //zavření formuláře
    this.Close();
}

Kód 4: Metoda BtnKonec_Click

3.5. Výsledný kód

XAML kód

Výsledný XAML kód formuláře (MainWindow.xaml) - viz Kód 1.

<Window x:Class="HelloWPF2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloWPF2"
        mc:Ignorable="d"
        Title="HelloWPF2" Height="250" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="TxbVypis"  Grid.Row="1" Grid.Column="0" Margin="20,5" TextAlignment="Center" FontSize="14" FontWeight="Bold" Grid.ColumnSpan="3" Background="#FFF3F3F3"/>
        <Button Name="BtnStiskni" Content="Stiskni" Margin="5" Grid.Row="3" Click="BtnStiskni_Click" />
        <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"/>
    </Grid>
</Window>

Kód 1: Výsledný XAML kód vytvořeného formuláře

C# kód

Code Behind - C# kód pro veškeré události vyvolané uživatelem při manipulaci s aplikací (MainWindow.xaml.cs) - viz Kód 2.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace HelloWPF2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void BtnStiskni_Click(object sender, RoutedEventArgs e)
        {
            //výpis textu
            this.TxbVypis.Text = "Hello, World!";
        }
 
        private void BtnVymaz_Click(object sender, RoutedEventArgs e)
        {
            //vymazání textu v kontrolce
            this.TxbVypis.Text = "";
        }
 
        private void BtnKonec_Click(object sender, RoutedEventArgs e)
        {
            //zavření formuláře
            this.Close();
        }
    }
}

Kód 2: Výsledný C# kód vytvořeného formuláře a metod jeho prvků

Spuštění programu

Zkusme si nyní naši aplikaci spustit pomocí tlačítka Start - viz Obrázek 1.

Obrázek 1: VS - spuštění programu

Výstup programu

Na následujícím obrázku vidíme výstup našeho programu s použitím prvků WPF. Po stisku tlačítka Stiskni je do kontrolky TxbVypis vypsán text "Hello, World!" - viz Výstup programu - Kód 1 a 2. Vypsaný text lze vymazat pomocí stisku tlačítka Vymaž. Aplikaci lze ukončit pomocí tlačítka Konec, nebo pomocí zavíracího tlačítka umístěného v pravém rohu aplikace.

Výstup programu - Kód 1 a 2: Výpis textu do kontrolky TxbVypis typu TextBlock pomocí tlačítka