2. diel - Jazyk XAML vo WinUI 3 a C# .NET

V minulej lekcii, Úvod do Windows App SDK a WinUI 3 , sme si predstavili technológie Windows App SDK a WinUI 3. Naprogramovali sme si tiež svoju prvú jednoduchú desktopovú aplikáciu v C# .NET.

V dnešnom WinUI 3 tutoriále si popíšeme základy jazyka XAML, ktorý sa používa na návrh komponentov aplikácie. Spomenieme elementy, menné priestory a entity.

XAML

Už vieme, že jazyk XAML slúži na kódovanie prezentačnej vrstvy komponentov aplikácie. Laicky povedané v jazyku XAML zapisujeme, ako má okno aplikácie vyzerať. XAML vychádza z XML, čo je značkovací jazyk navrhnutý tak, aby si doň každý mohol pridať svoje vlastné značky a používať ho úplne k čomukoľvek. XML je veľmi rozšírené a mnoho z vás ho určite pozná napríklad ako XHTML, čo je jeho podoba so značkami na tvorbu webových stránok. Kto viete HTML, máte veľkú výhodu, aj keď narazíme na pár odlišností od XML.

Skratka XML označuje e X tensible M arkup L anguage, teda rozšíriteľný značkovací jazyk. XAML potom označuje e X tensible A pplication Markup L anguage, teda jednoducho povedané XML so značkami pre tvorbu aplikácií.

Základné charakteristiky

XAML sme už mali možnosť vidieť pri tvorbe nášho prvého príkladu. Pre okno s jedným textovým popisom TextBlock vyzerá XAML kód nasledovne:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="HelloWinUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock>Pozdrav z WinUI 3 aplikace</TextBlock>
    </StackPanel>
</Window>

Na tomto jednoduchom príklade si vysvetlíme základné charakteristiky jazyka XML a teda aj XAML.

Stromová štruktúra

XML dokument sa skladá z elementov. Štruktúra dokumentu je stromová. To znamená, že elementy v sebe môžu obsahovať ľubovoľné množstvo ďalších elementov a tie zas ďalšie elementy a tak ďalej. Každý XML dokument však obsahuje práve jeden koreňový element, v ňom sú ďalej umiestnené ďalšie podelementy. Vkladanie elementov do seba sa hovorí nesting, čo by sa dalo preložiť ako hniezdenie.

Dokument vyššie obsahuje koreňový element <Window> (okno), v ňom je ďalej vložený element <StackPanel> (chápajme ho ako panel na ovládacie prvky) av tomto paneli je vložený element <TextBlock>, čo je nám už známy textový popis.

XML a teda aj XAML dokument ďalej obsahuje aj hlavičku, ktorá určuje napríklad použité kódovanie textu. Hlavička nášho dokumentu vyzerá takto:

<?xml version="1.0" encoding="utf-8"?>

Elementy

Elementy (niekedy tiež tagy = značky) zapisujeme do lomených zátvoriek, v ktorých je vždy názov elementu. Každý element je v XML nutné ukončiť (to je rozdiel oproti HTML, kde je ukončenie nepovinné). Elementy ukončujeme podľa toho, či sú párové alebo nepárové. Nepárové elementy zapíšeme takto:

<TextBlock />

Na ukončenie nepárového elementu použijeme lomku pred zatváracou lomenou zátvorkou.

Párové elementy ukončíme umiestnením ďalšej značky s názvom elementu, kde je po ľavej lomenej zátvorke lomeno. Do vnútra párových elementov sa vkladá obsah alebo ďalšie elementy. Obsah elementom vlastne označíme a pridelíme mu nejaký význam, od toho skratka XML. Nižšie označujeme text Pozdrav z WinUI 3 aplikácia a hovoríme, že sa jedná o obsah textového bloku TextBlock:

<TextBlock>Pozdrav z WinUI 3 aplikácia</TextBlock>

Obsah môžeme rovnako dobre vložiť aj do atribútu. Tie sa zapisujú rovnako pri párových aj nepárových elementoch, a to do úvodzoviek za názov atribútu a znamienko rovnosti:

<TextBlock Text="Pozdrav z WinUI 3 aplikácia" />

Vidíme, že element <TextBlock> môžeme zapísať ako párový aj nepárový element a jeho obsah vložiť buď pomocou atribútu, alebo ako obsah elementu. Aké sú názvy elementov, ich párovosť a atribúty samozrejme určuje špecifikácia konkrétneho jazyka, tu jazyka XAML.

Názvy elementov vždy zodpovedajú názvom C# tried, ktorými sú zodpovedajúce komponenty tvorené. Napríklad textový popisok TextBlock je tvorený C# triedou TextBlock. V XAML kóde ho tak reprezentujeme elementom <TextBlock>.

Atribútov môže mať každý element ľubovoľné množstvo, jedná sa v skutočnosti o vlastnosti C# triedy, ktorú daný element reprezentuje. Do atribútov nie je možné vložiť ďalší element, iba textovú hodnotu.

Menné priestory

Z kurzu Objektovo orientované programovanie v C# .NET vieme, že v C# existujú tzv. menné priestory. Ide o balíčky, ktoré v sebe obsahujú jednotlivé triedy alebo ďalšie balíčky. Boli zavedené z toho dôvodu, že je v .NET naozaj obrovské množstvo tried. Bez menných priestorov by musela mať každá trieda unikátny názov a taktiež by sme nemohli vytvoriť svoju triedu, ktorá sa volá rovnako ako nejaká trieda z .NET. Tomuto problému sa hovorí kolízia názvov.

Pokiaľ používame menné priestory, uvedieme na začiatku dokumentu, ktoré komponenty z ktorých menných priestorov budeme používať. Môžeme tak mať niekoľko komponentov s rovnakým názvom, čo ničomu nevadí, pokiaľ používame v jeden čas len jeden z jedného menného priestoru. Pomocou tzv. aliasov môžeme komponent pre daný dokument došpecifikovať, a tak používať viac komponentov s rovnakým názvom v jednej chvíli pod iným označením.

V odseku vyššie sme hovorili všeobecne o komponentoch. VC# .NET menné priestory obsahujú najmä triedy, v XML menné priestory obsahujú elementy. Mennými priestormi teda hovoríme, ktoré „balíčky so značkami“ budeme v dokumente potrebovať. Často sa uvádza príklad XML dokumentu, kde je element <table> jednou z menného priestoru web, kde označuje tabuľku, a jednou z menného priestoru shop, kde označuje stôl.

Menné priestory v XAML

Menné priestory, s ktorými chceme pracovať, sa v XAML nastavujú v koreňovom elemente, u nás teda vo <Window>, a to pomocou atribútu xmlns (ako XML N ame S pace). Visual Studio nám vo vygenerovanom kóde pripravilo na použitie niekoľko "balíčkov značiek" (môžu sa líšiť podľa verzie WinUI 3):

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWinUI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Aj keď sú menné priestory označované pomocou URL, nie je to skutočná webová adresa, ide iba o názov. Prvý menný priestor obsahuje základné elementy na tvorbu WinUI 3 aplikácií. Ide o predvolený menný priestor. Akonáhle napíšeme nejakú značku, bude sa automaticky brať práve z tohto priestoru (napr. element <Window> alebo <TextBlock>).

Druhý menný priestor má už pridelený alias x a pokiaľ budeme chcieť používať značky z neho, musíme pred ich názov vložiť x:. V tomto mennom priestore sú obsiahnuté definície rozširujúcich parametrov. V príklade kódu vyššie vidíme, že element <Window> má atribút x:Class. Ten určuje názov triedy s C# kódom, ktorý okno obsluhuje (teda code behind).

Na mennom priestore s priradeným aliasom local môžeme vidieť, ako je možné pripojiť nejaký menný priestor z nášho projektu. Konkrétne sa tu pripája koreňový menný priestor HelloWinUI, v ktorom sa napríklad nachádza trieda okna MainWindow. Pred označením požadovaného menného priestoru v atribúte je potrebné uviesť ešte predponu using:. Označenie menného priestoru je potom rovnaké, ako sme zvyknutí zo C#. Pripojenie vlastného menného priestoru sa hodí predovšetkým na vkladanie vlastných komponentov.

Entity

Možno vás napadlo, čo sa stane, keď do obsahu elementu alebo atribútu vložíme lomenú zátvorku, úvodzovku alebo iný znak, ktorý sa v syntaxi XML používa. Dokument prestane byť validný a niekedy to aj môže zapríčiniť chybu pri behu aplikácie. Preto boli zavedené tzv. entity, čo sú náhrady najmä za znaky <, >, &, ".

Entity zapisujeme týmto spôsobom:

• < – L ess T han (menšie ako),
• > – G reater T han (väčší ako),
• & – ampersand (&),
• " – úvodzovka (").

Text 5 > 6 by teda v bloku TextBlock vyzeral takto:

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

V budúcej lekcii, Pozíciovanie vo WinUI 3 a C# .NET , sa naučíme pozicovať ovládacie prvky v okne. Spomenieme layouty, absolútnu a relatívnu pozíciu, DIP, vonkajšie a vnútorné okraje a veľkosť.