Hello World

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ů