Lekce 2 - Jazyk XAML v C# .NET WPF

V minulé lekci, Úvod do WPF (Windows Presentation Foundation), jsme si uvedli základní informace o technologii WPF a vytvořili první jednoduchý formulář, který obsahoval pouze TextBlock. Také jsme si říkali, že možnosti grafického návrháře Visual Studia jdou dosti slabé a že proto budeme k návrhu formulářů používat zejména XAML kód. Právě na ten se zaměříme v dnešním C# .NET tutoriálu.

V dnešním WPF tutoriálu si popíšeme základy jazyka XAML, který se používá k návrhu formulářů v C# .NET WPF. Zmíníme elementy, jmenné prostory a entity.

XAML

Již víme, že jazyk XAML slouží ke kódování prezentační vrstvy aplikace. Laicky řečeno v jazyce XAML zapisujeme, jak má okno aplikace vypadat. XAML vychází z XML, což je značkovací jazyk navržený tak, aby si do něj každý mohl přidat své vlastní značky a používat ho úplně k čemukoli. XML je velmi rozšířené a mnoho z vás ho jistě zná např. jako XHTML, což je jeho podoba se značkami pro tvorbu webových stránek. Kdo umíte HTML, máte velkou výhodu, i když narazíme na pár odlišností od XML.

Zkratka XML označuje eXtensible Markup Language, tedy rozšiřitelný značkovací jazyk. XAML potom označuje eXtensible Application Markup Language, tedy jednoduše řečeno XML se značkami pro tvorbu aplikací.

Základní charakteristiky

XAML jsme již měli možnost vidět při tvorbě minulého příkladu, i když ho za nás vygeneroval grafický návrhář Visual Studia. Pro okno s jedním textovým blokem TextBlock by XAML kód vypadal asi takto:

<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="Pozdrav" Height="150" Width="300">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="100,35,0,0" TextWrapping="Wrap" Text="Pozdrav z formuláře" VerticalAlignment="Top"/>

    </Grid>
</Window>

Na tomto jednoduchém příkladu si vysvětlíme základní charakteristiky jazyka XML a tedy i XAMLu.

Stromová struktura

XML dokument se skládá z elementů. Struktura dokumentu je stromová. To znamená, že elementy v sobě mohou obsahovat libovolné množství dalších elementů a ty zas další elementy, a tak dále. Každý XML dokument však obsahuje právě jeden kořenový element, v něm jsou dále umístěny další podelementy. Vkládání elementů do sebe se říká nesting, což by se dalo přeložit jako hnízdění.

Dokument výše obsahuje kořenový element <Window> (okno), v něm je dále vložený element <Grid> (chápejme ho jako panel na ovládací prvky) a v tomto panelu je vložený element <TextBlock>, což je nám již známý textový popisek.

XML většinou obsahuje i hlavičku, ale ta se v jazyce XAML nepíše.

Elementy

Elementy (někdy také tagy = značky) zapisujeme do lomených závorek, ve kterých je vždy název elementu. Každý element je v XML nutné ukončit (to je rozdíl oproti HTML, kde je ukončení nepovinné). Elementy ukončujeme podle toho, zda jsou párové nebo nepárové. Nepárové elementy zapíšeme takto:

<TextBlock />

K ukončení nepárového elementu použijeme lomítko před zavírací lomenou závorkou.

Párové elementy ukončíme umístěním další značky s názvem elementu, kde je po levé lomené závorce lomeno. Dovnitř párových elementů se vkládá obsah nebo další elementy. Obsah elementem vlastně označíme a přidělíme mu nějaký význam, od toho zkratka XML. Níže označujeme text Pozdrav z formuláře a říkáme, že se jedná o obsah bloku TextBlock.

<TextBlock>Pozdrav z formuláře</TextBlock>

Obsah můžeme stejně dobře vložit i do atributu. Ty se zapisují stejně u párových i nepárových elementů, a to to uvozovek za název atributu a rovnítko:

<TextBlock Text="Pozdrav z formuláře" />

Vidíme, že element <TextBlock> můžeme zapsat jako párový i nepárový element a jeho obsah vložit buď pomocí atributu nebo jako obsah elementu. Jaké jsou názvy elementů, jejich párovost a atributy samozřejmě určuje specifikace konkrétního jazyka, zde jazyka XAML. V dalších lekcích kurzu si popíšeme ty nejzákladnější elementy.

Atributů může mít každý element libovolné množství, jedná se o vlastnosti daného elementu. Do atributů nelze vložit další element, pouze textovou hodnotu.

Jmenné prostory

Z kurzu Objektově orientované programování v C# .NET víme, že v C# existují tzv. jmenné prostory. Jedná se vlastně o balíčky, které v sobě obsahují jednotlivé třídy nebo další balíčky. Byly uvedeny z toho důvodu, že je v .NET frameworku opravdu obrovské množství tříd. Bez jmenných prostorů by musela mít každý třída unikátní název, a také bychom nemohli vytvořit svou třídu, která se jmenuje jako nějaká třída z .NETu. Tomuto problému se říká kolize názvů.

Pokud používáme jmenné prostory, uvedeme na začátku dokumentu, které komponenty z kterých jmenných prostorů budeme používat. Můžeme tak mít několik komponent se stejným názvem, což ničemu nevadí, pokud používáme v jeden čas jen jednu z jednoho jmenného prostoru. Pomocí tzv. aliasů můžeme komponentu pro daný dokument dospecifikovat, a tak používat více komponent se stejným názvem v jednu chvíli pod jiným označením.

V odstavci výše jsme mluvili obecně o komponentách. V C# .NET jmenné prostory obsahovaly zejména třídy, v XML jmenné prostory samozřejmě obsahují elementy. Jmennými prostory tedy říkáme, které "balíčky se značkami" budeme v dokumentu potřebovat. Často se uvádí příklad XML dokumentu, kde je element <table> jednou ze jmenného prostoru web, kde označuje tabulku, a jednou ze jmenného prostoru shop, kde označuje stůl.

Jmenné prostory, se kterými budeme pracovat, se v XAMLu nastavují v elementu <Window> a to pomocí atributu xmlns (jako XML Name Space). Designer nám ve vygenerovaném kódu připravil k použití několik "balíčků značek" (liší se dle verze WPF):

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"

I když jsou jmenné prostory označovány pomocí URL, není to skutečná webová adresa, jedná se pouze o název. První jmenný prostor obsahuje základní elementy pro tvorbu WPF aplikací. Jedná se o výchozí jmenný prostor. Jakmile napíšeme nějakou značku, bude se automaticky brát právě z tohoto prostoru (např. element <Window> nebo <TextBlock>).

Druhý jmenný prostor má již přidělený alias x a pokud budeme chtít používat značky z něj, musíme před jejich název vložit x:. V tomto jmenném prostoru jsou obsažené definice rozšiřujících parametrů. V příkladu kódu výše vidíme, že element <Window> má parametr x:Class. Ten určuje název třídy s C# kódem, který formulář obsluhuje (tzv. Code-Behind), o tom si řekneme více dále v kurzu.

Jmenné prostory se také využívají pro vkládání vlastních komponent, ale o tom až někdy dále.

Element Window obsahuje několik parametrů, které nastavují text jeho titulku a šířku a výšku okna. Element TextBlock obsahuje kromě vlastního textu i jeho pozicování v rámci okna.

Entity

Možná vás napadlo, co se stane, když do obsahu elementu nebo atributu vložíme lomenou závorku, uvozovku nebo jiný znak, který se v syntaxi XML používá. Dokument přestane být validní a někdy to i může zapříčinit chybu při běhu aplikace. Proto byly zavedeny tzv. entity, což jsou náhrady zejména za znaky <, >, &, ".

Zapisují se tímto způsobem:

• &lt – Less Than (menší než).
• &gt – Greater Than (větší než).
• &amp a &quot – ampersand a uvozovka určují, že se jedná o entitu.

Text 5 > 6 by tedy v bloku TextBlock vypadal takto:

<TextBlock>5 &gt; 6</TextBlock>

V příští lekci, Pozicování v C# .NET WPF, se naučíme pozicovat prvky v okně v C# .NET WPF aplikacích. Zmíníme absolutní a relativní pozici, DIP, Margin, Padding a velikost.