Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Java. Zároveň využij akce až 80 % zdarma při nákupu e-learningu. Více informací:

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.

XAML

Již víme, že jazyk XAML slouží ke kódování prezentační vrstvy aplikace, laicky řečeno v XAMLu 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 TextBoxem 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"
        Title="Pozdrav" Height="150" Width="285">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="120,77,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 tom 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 XAMLu 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 TextBlocku.

<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 do to uvozovek za název atributu a rovnítko:

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

Vidíte, ž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 XAMLu. 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

Pokud jste dočetli zdejší objektový kurz o programování v C# .NET do konce, víte, ž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 jsem mluvil 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.

Mimochodem, všimněte si, že element Window obsahuje několik parametrů, které nastavují text jeho titulku a šířku a výšku okna.

Entity

Možná vás napadlo, co se stane, když do obsahu elementu nebo atributu vložíte 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;
&gt;
&amp;
&quot;

Text "5 > 6" by tedy v TextBlocku vypadal takto:

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

&lt; je zkratka Less Than (menší než), &gt; označuje Greater Than (větší než), ampersand a uvozovka určují, že se jedná o entitu.

Příští lekce, Pozicování v C# .NET WPF, bude zas čistě praktická, naučíme se používat různé atributy elementů a také začneme tvořit zajímavější aplikace.


 

Předchozí článek
Úvod do WPF (Windows Presentation Foundation)
Všechny články v sekci
WPF - Okenní aplikace v C# .NET
Přeskočit článek
(nedoporučujeme)
Pozicování v C# .NET WPF
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
96 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity