2. díl - Jazyk XAML v C# .NET WPF

C# .NET WPF Jazyk XAML v C# .NET WPF American English version English version

V minulém dílu našeho seriálu tutoriálů o tvorbě okenních aplikací v C# .NET WPF jsme si uvedli základní informace o této technologii 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 dí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šiř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"/></TextBlock>

    </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 kontrolky) a v tomto panelu je vložený element TextBlock, což je nám již známý textový popisek.

Pozn.: 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 dílech seriálu 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ý seriál 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. 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 seriálu.

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í díl bude zas čistě praktický, naučíme se používat různé atributy elementů a také začneme tvořit zajímavější aplikace.


 

  Aktivity (4)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (12 hlasů) :
4.916674.916674.916674.916674.91667


 


Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF
Miniatura
Následující článek
Pozicování v C# .NET WPF

 

 

Komentáře

Avatar
Adam Ježek
Tým ITnetwork
Avatar
Adam Ježek:

Myslím že v tutoriálu je chyba, konkrétně ve vzorovém kódu pro okno s jedním textblockem, v řádku

<TextBlock HorizontalAlignment="Left" Margin="120,77,0,0" TextWrapping="Wrap" Text="Pozdrav z formuláře" VerticalAlignment="Top"/></TextBlock>

Je zapsán jako nepárový element, ale poté následně ukončen jako párový

Odpovědět  +3 21.2.2015 16:23
Programátor dělá co může. Počítač co chce. | Pokud mi dáš mínus, tak prosim, napiš proč!
Avatar
Libor Šimo (libcosenior):

Ahoj, ako sa tu pisu komentare?

Odpovědět 23.8.2015 12:23
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jan Vargovský
Redaktor
Avatar
Jan Vargovský:
<!--comment body-->

Stačí používat zkratky na komentář a nemusíš nikdy znát tu syntaxi.

 
Odpovědět  +2 23.8.2015 12:46
Avatar
Matýsek
Člen
Avatar
Odpovědět 1. března 16:48
Nezapomínej na středníky! ;
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.