Windows 10 – nové prvky používateľského rozhrania (XAML)
V tomto pokračovaní série príspevkov venujúcich sa vývoju Windows 10 aplikácií sa bližšie pozrieme na možnosti tvorby používateľského rozhrania s využitím značkovacieho jazyka XAML (Extensible Application Markup Language).
XAML sa stáva platformou používateľského rozhrania číslo jedna pre Windows aplikácie. XAML bolo možné využiť už aj v minulosti, pri programovaní desktopových WPF aplikácií, no jeho využitie sa odvtedy značne rozšírilo a dostal sa aj do Win RT aplikácií a následne aj do UWP. Je však nutné podotknúť, že množina XAML prvkov pre WPF nie je zhodná s množinou XAML prvkov pre UWP. Jazyk XAML využívajú dokonca niektoré grafické súčasti operačného systému Windows 10, napríklad File Explorer alebo Štart obrazovka. XAML využívajú taktiež aplikácie z Office balíčka a MSN store aplikácie.
Štruktúra XAML je postavená na formáte XML, čo znamená, že vzhľad používateľského rozhrania definujete hierarchiou vhniezdených elementov a každý XAML súbor musí byť validný XML dokument. Čo sa týka tvorby používateľského rozhrania, máme tri možnosti a síce písať ho ručne, využiť editor, ktorý nám ponúka Visual Studio a Blend alebo kombinovať spomenuté prístupy. Osobne odporúčam využiť tretí prístup, kedy je s pomocou editora možné rýchlo vytvoriť rozhranie a následne ho doladiť prostredníctvom kódu (napr. nastavenie šírky, odsadenia elementu a pod.). Okrem Visual Studia sme spomenuli aj nástroj Blend. Tento nástroj je určený primárne na pokročilé editovanie používateľského rozhrania. To znamená, že v ňom viete veľmi jednoducho implementovať animácie, štýly, zmeniť základné šablóny jednotlivých prvkov používateľského rozhrania atď. Návody ako používať Blend môžete nájsť na tejto stránke.
XAML prvky používateľského rozhrania
XAML vám na tvorbu používateľského rozhrania ponúka mnoho rôznych prvkov a v prípade potreby vám taktiež umožňuje vytvoriť vlastné prvky, ktoré môžu byť založené na viacerých existujúcich prvkoch. Množinu dostupných prvkov používateľského rozhrania môžete taktiež rozšíriť s využitím knižníc vytvorených tretími stranami. Príkladom je projekt MyToolkit, ktorý ponúka veľké množstvo rozširujúcich prvkov (dostupný na Githube). Projekt je dostupný aj ako nuget.
Úplný prehľad implicitne dostupných XAML prvkov a ich vlastností môžete nájsť v XAML UI Basics aplikácii dostupnej na Githube.
V rámci tohto príspevku si však predstavíme nové zaujímavé prvky používateľského rozhrania, ktoré vo Win RT chýbali.
RelativePanel
Tento prvok patrí do skupiny tzv. „layout prvkov“. Prvky z tejto skupiny určujú rozloženie elementov, ktoré sú do nich vnorené. Samotný RelativePanel slúži ako kontajner umožňujúci vzájomné kotvenie vhniezdených elementov. RelativePanel ponúka tzv. pripojené vlastnosti – „attached properties“ , ktoré umožňujú jednak umiestňovať elementy v rámci RelativePanelu, ale taktiež umiestňovať prvky relatívne jeden na druhý. Čo sa týka umiestnenia elementov v rámci RelativePanelu, sú tieto attached properties iba akýmsi ekvivalentom klasického zarovnania s využitím vlastnosti align, ktorá je používaná pri ostatných layout prvkoch ako napríklad Grid. Prehľad týchto vlastností uvádzame v nasledujúcej tabuľke.
Attached property |
Predvolená hodnota |
Align ekvivalent |
RelativePanel.AlignBottomWithPanel |
False |
VerticalAlignment=”Bottom” |
RelativePanel.AlignTopWithPanel |
True |
VerticalAlignment=“Top“ |
RelativePanel.AlignHorizontalCenterWithPanel |
False |
HorizontalAlignment=“Center“ |
RelativePanel.AlignVerticalCenterWithPanel |
False |
VerticalAlignment=“Center“ |
RelativePanel.AlignLeftWithPanel |
True |
HorizontalAlignment=“Left“ |
RelativePanel.AlignRightWithPanel |
True |
HorizontalAlignment=“Right“ |
Ako sme spomenuli, sila RelativePanelu prichádza s možnosťou umiestňovať elementy relatívne jeden na druhý a teda využiť kotvenie. To umožňujú nasledovné attached properties.
Attached property |
Popis |
RelativePanel.Above |
Element ukotví nad kotviaci element |
RelativePanel.Bellow |
Element ukotví pod kotviaci element |
RelativePanel.RightOf |
Element ukotví na pravú stranu kotviaceho elementu |
RelativePanel.LeftOf |
Element ukotví na ľavú stranu kotviaceho elementu |
RelativePanel.AlignLeftWith |
Zarovná elementy vzhľadom na ľavý okraj kotviaceho elementu |
RelativePanel.AlignRightWith |
Zarovná elementy vzhľadom na pravý okraj kotviaceho elementu |
RelativePanel.AlignHorizontalCenterWith |
Zarovná elementy vzhľadom na horizontálny stred kotviaceho elementu |
RelativePanel.AlignVerticalCenterWith |
Zarovná elementy vzhľadom na vertikálny stred kotviaceho elementu |
RelativePanel.AlignTopWith |
Zarovná elementy vzhľadom na horný okraj kotviaceho elementu |
RelativePanel.AlignBottomWith |
Zarovná elementy vzhľadom na spodný okraj kotviaceho elementu |
Uvedené vlastnosti je možné medzi sebou kombinovať. Kód nižšie a vytvorené rozhranie je ukážkou využitia viacerých vlastností:
<RelativePanel>
<Border x:Name="ElementOne" Width="200" Height="200" Background="Red"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"/>
<Border Background="Green" Width="50" Height="50"
RelativePanel.LeftOf="ElementOne"
RelativePanel.AlignVerticalCenterWith="ElementOne"/>
<Border Background="Blue" Width="50" Height="50"
RelativePanel.RightOf="ElementOne"
RelativePanel.AlignBottomWith="ElementOne"/>
</RelativePanel>
Obrázok 1: Relatívne rozmiestnenie prvkov v RelativePanel
RelativePanel je vhodné využiť pri tvorbe adaptívneho rozhrania, keď potrebujete napríklad pri znížení dostupného rozlíšenia presunúť element spolu s elementami, ktoré sú naň ukotvené. Tento scenár môžete vidieť ilustrovaný na obrázku nižšie.
Obrázok 2: Presunutie elementov v rámci RelativePanelu (Zdroj: Developer's Guide to Windows 10 MVA)
Viac detailov ohľadom RelativePanel môžete nájsť v tomto príspevku na stránke visuallylocated.com.
SplitView
SplitView je taktiež prvok z rady „layout prvkov“. Ako už názov naznačuje SplitView umožňuje rozdeliť aplikačné okno na dve časti. Jednu časť pre hlavný obsah stránky a druhú vysúvaciu časť, v ktorej môže byť umiestnené napríklad menu alebo iné elementy súvisiace s kontextom hlavnej stránky. SplitView tak ponúka možnosť, ktorá v rámci Windows a Windows Phone aplikácií doteraz chýbala, a síce vytvoriť tzv. vysúvacie hamburgerové menu. SplitView má štyri zobrazovacie módy, ktoré môžete vidieť ilustrované na obrázku nižšie. Modrou farbou je znázornená hlavná obsahová časť a fialovou vysúvací panel.
Obrázok 3: SplitView zobrazovacie módy
Detailný návod na implementáciu hamburgerového menu môžete nájsť na blogu Jerryho Nixona.
CalendarView a DatePicker
CalendarView je v rámci store aplikácií taktiež novým prvkom. Vo Windows Store aplikáciách sa síce zobrazoval ako súčasť prvku DatePicker a slúžil na výber dátumu, no pre Windows Phone tento prvok neexistoval. V UWP je tento prvok úplne samostatným prvkom dostupným ako pre desktop, tak aj pre telefóny a ostatné rodiny Windows 10 zariadení. Použitie prvku CalendarView je veľmi jednoduché a umožňuje navigáciu v rámci kalendára prostredníctvom výberu roku, mesiaca a dňa. Jeho vzhľad je takmer totožný so vzhľadom systémového kalendára, ktorý môžete zobraziť kliknutím na čas na lište úloh.
Obrázok 4: CalendarView
Prvok DatePicker ponúka možnosť výberu dátumu, bez zobrazenia celého kalendára. Tento prvok síce nový nie je, no určité zmeny sa dotkli aj tohto prvku. Tí z vás, kto ste vyvíjali univerzálne aplikácie pre Win RT a použili ste tento prvok, viete, že na Windows Phone sa pri výbere dátumu zobrazila samostatná obrazovka, v ktorej bolo potrebné scrollovaním nastaviť správny rok, mesiac a deň, zatiaľ čo vo Windows aplikácií sa v rámci aktuálnej obrazovky zobrazil kalendár. Práve táto odlišnosť bola odstránená a prišlo k zjednoteniu DatePicker prvku naprieč rodinami zariadení. DatePicker teraz ponúka rovnaký používateľský zážitok, ktorý je mierne prispôsobený forme používateľského vstupu. Nový DatePicker zobrazený na desktope a na telefóne môžete vidieť na obrázkoch nižšie (vľavo zobrazenie na desktope, vpravo zobrazenie na telefóne). Rozdiel, ktorý si môžete všimnúť je, že na desktopovej verzii, na ktorej sa predpokladá ovládanie myšou, pribudli tlačidlá – šípky, umožňujúce scrollovanie a výber správneho dátumu. Tlačidlo sa zobrazí vždy iba pod a nad stĺpcom, v ktorom na nachádza kurzor myši. Scrollovať je možné aj scrollovacím kolieskom myši. Vo verzii pre telefón sa predpokladá scrollovanie prostredníctvom prsta a preto sa tlačidlá nezobrazujú. Z obrázku to možno nie je úplne viditeľné, no keďže ovládanie dotykom/prstom je nepresnejšie, ako ovládanie myšou, sú na telefóne medzi jednotlivými dňami, rokmi, mesiacmi v zozname väčšie rozostupy.
Obrázok 5: DatePicker desktop a telefón
InkCanvas
Tento prvok, ako mnoho iných prvkov prichádza do store aplikácii z technológie WPF, ktorá sa využíva na tvorbu desktopových aplikácií. InkCanvas vám poskytuje kresliacu plochu, do ktorej môžete písať a kresliť nielen dotykovým perom, no je optimalizovaná aj na vstup myšou alebo dotykom. Vďaka InkCanvas môžete do vašej aplikácie veľmi jednoducho implementovať napríklad funkcionalitu umožňujúcu vytvorenie podpisu, no v prípade potreby vám taktiež umožní vytvoriť kresliaci editor s rozličnými funkciami. InkCanvas vám umožní nastavenie farby,hrúbky, tvaru pera, gumovanie obsahu, rozpoznávanie písaného textu a mnoho ďalšieho.
Ak využijete InkCanvas vo vašej aplikácií a chcete umožniť vstup myšou alebo dotykom, je potrebné v kóde tieto vstupy povoliť, pretože predvolené nastavenie umožňuje vstup iba dotykovým perom. Toto nastavenie vykonáte nasledovne:
inkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
Zároveň v aktuálnej verzii UWP (10.0.0.0) nie je možné vpisovať/kresliť do InkCanvas v prípade, že InkCanvas prvku nastavíte výšku a šírku. Je to zrejme pôvodne neodhalená chyba aktuálnej verzie UWP a ak chcete nastaviť rozmery, je potrebné využiť obaľujúci element (napr. Border). Viac o InkCanvas môžete nájsť na tomto msdn blogu.
V tomto príspevku sme si predstavili niektoré nové prvky používateľského rozhrania. Ak sa chcete vrhnúť do vývoja a chcete získať informácie aj o iných prvkoch používateľského rozhrania, ešte raz odporúčam XAML ukážkovú aplikáciu obsahujúcu popis všetkých implicitne dostupných XAML prvkov pre UWP - a samozrejme kurz vývoja Windows 10 aplikácií na Microsoft Virtual Academy.
V ďalšom diely si ukážeme, ako vytvoriť adaptívne používateľské rozhranie a povieme si, čo sú to adaptive triggers.
Marek.