03/08/20151 XAML (1) XAML – Extensible Application Markup Language Poznámka: –XAML je vyslovován jako [zæməl] Deklarativní značkovací jazyk založený na.

Prezentace na téma: "03/08/20151 XAML (1) XAML – Extensible Application Markup Language Poznámka: –XAML je vyslovován jako [zæməl] Deklarativní značkovací jazyk založený na."— Transkript prezentace:

1 03/08/20151 XAML (1) XAML – Extensible Application Markup Language Poznámka: –XAML je vyslovován jako [zæməl] Deklarativní značkovací jazyk založený na jazyku XML Mezi jeho úkoly patří: –zjednodušení tvorby uživatelského rozhraní –lepší oddělení uživatelského rozhraní od aplikační logiky Dovoluje lepší rozdělení práce mezi návrháře designu a programátora

2 03/08/20152 XAML (2) Při práci s jazykem XAML platí: –každý element v XAML je mapovaný na instanci třídy v.NET Frameworku: jméno elementu přesně odpovídá názvu třídy např. element dává pokyn k vytvoření ob- jektu na základě třídy Button –elementy mohou být do sebe vnořovány –vlastnosti objektu mohou být nastaveny pomocí atributů (u složitějších vlastností bývá nutné použít vnořené značky) –v době překladu je zápis v XAML konvertován do jazyka BAML (Binary Application Markup Lan- guage), který je připojen k výslednému programu

3 03/08/20153 XAML (3) Při vytvoření nového projektu ve WPF Visual Studio generuje následující XAML dokument:

4 03/08/20154 XAML (4) Obsahuje dva elementy: –Window : hlavní okno aplikace s titulkem MainWindow, výškou 350 DIP a šířkou 525 DIP –Grid : rozvržení (layout) sloužící pro umisťování ovládacích prvků může být nahrazen jiným typem rozvržení (např. Stack- Panel, WrapPanel, DockPanel, Canvas) Atributy xmlns slouží k deklaraci jmenných prostorů:

5 03/08/20155 XAML (5) –http://schemas.microsoft.com/ winfx/2006/xaml/presentation : hlavní jmenný prostor WPF zahrnuje všechny třídy WPF včetně ovládacích prvků sloužících k vytváření uživatelských rozhraní deklarován bez prefixu  jedná se o implicitní jmenný prostor pro celý dokument pokud není specifikováno jinak, pracuje se s tímto jmenným prostorem –http://schemas.microsoft.com/winfx /2006/xaml : jmenný prostor, který podporuje konstrukce jazyka XAML

6 03/08/20156 XAML (6) mapován na prefix x může být použit umístěním symbolu x a symbolu : před název elementu (atributu) Atribut Class : –je umístěn ve jmenném prostoru XAML –propojuje částečné třídy mezi XAML a kódem na pozadí –dává pokyn k vygenerování třídy se jménem MainWindow (definované ve jmenném prostoru WpfApplication1 ), která je odvozena od třídy pojmenované XAML elementem ( Window ) –tato třída zapouzdřuje chování hlavního okna aplikace

7 03/08/20157 XAML (7) Pro zpřístupnění ovládacích prvků z kódu na pozadí je zapotřebí v jejich elementech uvést atribut Name ( x:Name ): –např.: –poznámka: zápis x:Name je zapotřebí použít v případě, že odpoví- dající třída nedefinuje svou vlastní vlastnost Name

8 03/08/20158 Vlastnosti a události v XAML (1) Jednoduché vlastnosti (simple properties): –zapisovány pomocí odpovídajícího atributu –např.: nebo Tlačítko

9 03/08/20159 Vlastnosti a události v XAML (2) Složené vlastnosti (complex properties): –vlastnosti (typu třída), obsahující další vlastnosti –zapisovány přidáním dceřiných elementů se jmé- nem ve tvaru JmTypu.JmVlastnosti –dceřiný element nemůže obsahovat vlastní atributy –příklad 1:

10 03/08/201510 Vlastnosti a události v XAML (3) –příklad 2: (tlačítko obsahující zelený čtverec s červeným okrajem)

11 03/08/201511 Vlastnosti a události v XAML (4) Značkovací rozšíření (markup extensions): –používána např. při: nastavení vlastnosti podle již existujícího objektu dynamickém navázání vlastnosti na vlastnost jiného objektu –lze zapsat: ve formě atributů (uzavřené mezi symboly {} ) –ve tvaru {MarkupExtensionClass Argumenty} pomocí vnořených značek –např.:

12 03/08/201512 Vlastnosti a události v XAML (5) poznámka: x:Static označuje třídu StaticExtension ve jmenném prostoru XAML slovo Extension je obecně možné vynechat nebo:

13 03/08/201513 Vlastnosti a události v XAML (6) Připojené vlastnosti (attached properties): –definovány v jiné třídě, než je třída ovládacího prvku, jehož nastavení je prováděno –obvykle používány při práci s rozvržením –zapisovány ve tvaru JmTypu.JmVlastnosti –jsou převáděny na volání metod –např.:

14 03/08/201514 Vlastnosti a události v XAML (7) Události: –zapisovány pomocí atributů podobně jako jedno- duché vlastnosti –zápis se provádí ve tvaru: událost = ObslužnáMetoda –např.: předpokládá, že v kódu na pozadí existuje metoda btnTlacito_Click

15 03/08/201515 Vlastnosti a události v XAML (8) Poznámka: –nastavení vlastností a událostí u ovládacího prvku může být zapsáno v libovolném pořadí –překladač provádí přiřazení jejich hodnot vždy v následujícím pořadí: vlastnost Name (okamžitě po vytvoření objektu) události (přiřazení obslužných metod) zbývající vlastnosti (přiřazení hodnot) –tento mechanismus zabezpečuje, že mohou být vyvolány a obslouženy události vzniklé jako reakce na nastavení vlastnosti

16 03/08/201516 Layout (1) Layout (rozvržení, rozložení) – speciální ov- ládací prvky (kontejnery), do kterých je mož- né vkládat další dceřiné ovládací prvky Umožňují relativní umisťování ovládacích prvků (elementů): –zvyšuje schopnost adaptovat se na změny velikos- ti okna (displeje) Ovládací prvky mnohdy nemají explicitně na- stavenu velikost: –jejich velikost se přizpůsobuje jejich obsahu –velikost je možné omezit nastavením maximální, resp. minimální velikosti

17 03/08/201517 Layout (2) Ovládací prvky nejsou většinou umisťovány na konkrétní pozici zadanou souřadnicemi v okně: –jsou uspořádávány rozvržením v závislosti na velikosti, pořadí a informacích specifických pro dané rozvržení –přidání dodatečného místa mezi ovládací prvky se realizuje nastavením okrajů (vlastnost Margin ) Rozvržení mohou být do sebe vnořována: –jako primární rozvržení se většinou používá Grid, který může obsahovat další rozvržení pro organizaci menších skupin ovládacích prvků

18 03/08/201518 Layout (3) Zpracování rozvržení probíhá ve dvou fázích: –měření (measure): kontejner v cyklu prochází své dceřiné elementy a zjiš- ťuje jejich preferovanou velikost není-li možné respektovat preferovanou velikost (kon- tejner není dostatečně velký), dochází o oříznutí dceři- ného elementu –uspořádání (arrange): fáze, ve které jsou dceřiné elementy umístěny na ur- čenou (vypočítanou) pozici Všechna rozvržení ve WPF jsou odvozena od třídy Panel  poskytují např. vlastnosti:

19 03/08/201519 Layout (4) –Background : štětec použitý pro vykreslení pozadí není-li nastavena, pak rozvržení nereaguje na události myši –Children : kolekce položek, jež jsou v panelu uloženy každá položka může obsahovat další položky Jednotlivá rozvržení ve WPF jsou implemen- tována pomocí tříd ( Grid, StackPanel, WrapPanel, DockPanel, Uniform- Grid a Canvas ) definovaných ve jmenném prostoru System.Windows.Controls

20 03/08/201520 Grid (1) Nejčastěji používaný typ rozvržení Nabízen jako implicitní rozvržení při vygene- rování nového projektu v MS Visual Studiu Mřížka podobná tabulce v HTML Vnitřním prvkům se nastavuje pomocí připo- jených vlastností řádek a sloupec, do kterého patří Není-li u prvku nastavení řádku, resp. sloupce provedeno, pak se implicitně nastaví na 0 Většinou v jednom poli bývá jeden prvek

21 03/08/201521 Grid (2) Jestliže prvky nemají explicitně nastavenou velikost, pak jsou roztaženy přes celou buňku Definice řádků, resp. sloupců se provádí po- mocí vlastností: –RowDefinitions : představuje kolekci řádků jednotlivé řádky jsou definovány na základě třídy (jako elementy) RowDefinition –ColumnDefinitions : představuje kolekci sloupců jednotlivé sloupce jsou definovány na základě třídy (jako elementy) ColumnDefinition

22 03/08/201522 Grid (3) Poznámka: –při nastavení výšky řádku i šířky sloupce lze po- užít symbol ”*” vyjadřující, že řádek (sloupec) se bude proporcionálně zvětšovat (zmenšovat) Grid také umožňuje, aby ovládací prvek byl roztažen přes více řádků (sloupců) tabulky Tohoto lze dosáhnout použitím připojených vlastností: –RowSpan : specifikuje, přes kolik řádků se má prvek zobrazit –ColumnSpan : specifikuje, přes kolik sloupců se má prvek zobrazit

23 03/08/201523 StackPanel Jednotlivé ovládací prvky umisťuje jeden za druhým (horizontálně nebo vertikálně) Horizontální, resp. vertikální umisťování je dáno hodnotou vlastnosti Orientation Není-li specifikováno jinak (pomocí vlastnos- tí Margin, Width, Height, Horizon- talAlignment, VerticalAlignment ), jsou ovládací prvky roztaženy přes celou: –šířku: Orientation = ”Vertical” –výšku: Orientation = ”Horizontal”

24 03/08/201524 WrapPanel Pracuje „podobně“ jako rozvržení StackPanel Ovládací prvky jsou umísťovány: –vedle sebe na řádek –za sebou do sloupce Směr umisťování je dán opět hodnotou vlast- nosti Orientation Pokud se některý prvek na řádek (do sloupce) nevejde, pak dojde k zalomení a prvek je zobrazen na dalším řádku (v dalším sloupci)

25 03/08/201525 DockPanel Umožňuje připoutání prvku k jedné ze čtyř stran Strana, ke které bude ovládací prvek připou- tán se nastavuje pomocí připojené vlastnosti Dock Poznámky: –při použití DockPanelu závisí na pořadí, ve kte- rém jsou jednotlivé prvky připoutávány (vede to k různému uspořádání) –je možné, aby k jedné straně bylo připoutáno více prvků

26 03/08/201526 Canvas Dovoluje umístění prvku na absolutní pozici Používán většinou jako vykreslovací plátno Pozice v Canvasu se zadává pomocí připoje- ných vlastností Left a Top nebo Right a Bottom Lze také využít vlastnost ClipToBounds, která umožňuje ořezávání elementů na hranici Canvasu Pro nastavení pořadí překrývajících se elemen- tů se používá připojená vlastnost ZIndex