Programozás III. XAML alapok.

Az előadások a következő témára: "Programozás III. XAML alapok."— Előadás másolata:

1 Programozás III. XAML alapok

2 XML (w3schools.com) Hierarchikus adatleíró formátum
<?xml version="1.0"?> <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </bookstore> XAML elmagyarázása előtt tudni kell, mi az az XML… Hierarchikus adatleíró formátum XML deklarációk + elemek + attribútumok Elemek: <bookstore></bookstore>... = <tag></tag> Attribútumok: <book>-ban category=„…” …

3 XML Felépítését szigorú szabályok korlátozzák Mindegyik elemnek lehet:
Első sor: opcionális formátumspecifikáció, kiegészíthető karakterkódolással: <?xml version="1.0" encoding="ISO "?> <?xml version="1.0" encoding="UTF-8"?> Mindegyik elemnek lehet: Szöveges tartalma Alelemei Attribútumai, amelyek az adott elemhez adnak meg tulajdonságokat Kötelezően kell lennie egy gyökérelemnek, ami az egész dokumentumot közrefogja (<bookstore> elem) Minden elem lezárása kötelező (<tag></tag> vagy <tag />) Az egymásba ágyazás lezárásainak megfelelő sorrendben kell történniük Rosszul formázott: <a><b></a></b> Jól formázott: <a><b></b></a> A kis- és nagybetűk különbözőek Ezt igazából nem most akarjuk leadni.

4 XML <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> Egy objektum leírását a beágyazott elemek és attribútumok szolgáltatják Ugyanígy (a beágyazással) hierarchia, tartalmazás is reprezentálható! – XML értelmezésétől függ <?xml version="1.0"?> <bookstore> <book category="COOKING"> ... </book> <book category="WEB"> ... </book> </bookstore>

5 XAML (eXtensible Application Markup Language)
XML-alapú deklaratív nyelv, amelyben .NET objektumok hierarchiáját és állapotukat írhatjuk le Nem absztrakt és alapértelmezett konstruktort tartalmazó típusok használhatók Minden, ami XAML-ban leírható, C# kóddal is kifejezhető WPF-ben a felhasználói felület felépítésére használjuk Mi történik a XAML fájllal? msbuild.exe bináris adatra fordítja, ún. erőforrásként az assemblybe épül – .g.cs -> .baml A konstruktorból hívott InitializeComponent() tölti be Szerintem ez úgy néz ki, hogy a XAML-ból keletkezik a .g.cs, és a .xaml.cs és a .g.cs fordul IL kódba, plusz a XAML másik (objektumleíró) részéből keletkezik a .baml. De erre sehol nem találtam konkrét forrást. XAML is used extensively in .NET Framework 3.0 & .NET Framework 4.0 technologies, particularly Windows Presentation Foundation (WPF),Silverlight, Windows Workflow Foundation (WF) and Windows Runtime XAML Framework and Windows Store apps A XAML file can be compiled into a Binary Application Markup Language file having the .BAML extension.[2]), which may be inserted as a resource into a .NET Framework assembly. At run-time, the framework engine extracts the .BAML file from assembly resources, parses it, and creates a corresponding WPF visual tree or workflow. Having this format, the content is faster loadable during runtime. XAML is still parsed and constructed by the runtime Once upon a time, there was CAML. CAML was the exact IL version of the compiled XAML file. Unfortunately, the WPF team has decided to eliminate it, and keep the BAML version for the following reasons: 1. BAML is compact hence it can be downloaded faster (good for XBAP applications) 2. BAML is less security threat than code execution (good for XBAP applications) 3. BAML can be localized after compilation In the bottom line, BAML is a little slower than IL but has more advantages than CAML.

6 XAML XAML formátumú leírás: C# nyelvű leírás:
A XAML leírásban az elemek .NET típusokból való példányosítást jelentenek Az attribútumokkal a példány tulajdonságait vagy eseményeit állítjuk <CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True" Checked="checkBox1_Checked"/> CheckBox checkBox1 = new CheckBox(); checkBox1.Content = "Automatikus mentés"; checkBox1.IsChecked = true; checkBox1.Checked += checkBox1_Checked;

7 XAML Content beállítása – explicit beállítás:
Tulajdonságelem-szintaxis: <Típusnév.Tulajdonságnév> alelem Implicit beállítás: A XAML specifikációja szerint: minden osztály deklarálhat „tartalomtulajdonságot” (Content Property) – ekkor a közvetlen gyermekelem ennek a beállítására szolgál. A ContentControloknál ez a „tartalomtulajdonság” a Content… <CheckBox Content="Automatikus mentés" Name="checkBox1" IsChecked="True"/> <CheckBox Name="checkBox1" IsChecked="True"> <CheckBox.Content> Automatikus mentés </CheckBox.Content> </CheckBox> Basically, ez a pár dia (ez és a következő 3) arról akar szólni, hogy a xamlban látott al-elemek mit jelentenek. És azért pont a content a példa, mert ő egy tartalomtulajdonság is, azaz implicit gyerekkel is megadható -> el lehet vele magyarázni az implicit gyereket... (nem szöveges -> köv dián) With the exception of the root element, every object element in a XAML file that is nested as a child element of another element is really an element that is one or both of the following cases: a member of an implicit collection property of its parent element, or an element that specifies the value of the XAML content property for the parent element (XAML content properties will be discussed in an upcoming section). In other words, the relationship of parent elements and child elements in a markup page is really a single object at the root, and every object element beneath the root is either a single instance that provides a property value of the parent, or one of the items within a collection that is also a collection-type property value of the parent. <CheckBox Name="checkBox1" IsChecked="True"> Automatikus mentés </CheckBox>

8 XAML Implicit megadás / komplex(ebb) tartalom
Tulajdonságelem megadás / komplex(ebb) tartalom Szintaktikai hiba – NEM ContentControl utód, nincs Contentje (és nincs más tartalomtulajdonsága sem) <CheckBox Name="checkBox1" IsChecked="True"> <Button>Automatikus mentés</Button> </CheckBox> <CheckBox Name="checkBox1" IsChecked="True"> <CheckBox.Content> <Button>Automatikus mentés</Button> </CheckBox.Content> </CheckBox> <ScrollBar Name="scrollBar1"> <Button>Automatikus mentés</Button> </ScrollBar>

9 XAML … az ItemsControloknál a tartalomtulajdonság az Items…
… a Paneleknél (tartalommenedzserek) a tartalomtulajdonság a Children (a … kihagyott, a mostani téma szempontjából nem fontos részeket jelöl) <ListBox > <Button Content="Button" Width="75"/> </ListBox> A pirossal bekeretezett részeken Collection Syntax. <Window ... Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Button" Width="75" ... /> </Grid> </Window> Gyűjteményszintaxis (Collection Syntax)

10 XAML Gyűjteményszintaxis (Collection Syntax)
A XAML feldolgozó enged több gyermekelemet egymás után megadni, ha az éppen beállítandó tulajdonság egy gyűjtemény (IList, Array, IDictionary) Az előző példánál pl. a ListBox Items-énél és a Grid Children- jénél használtuk ezt: <ListBox > <Button Content="Button" Width="75"/> </ListBox> Grid.ColumnDefinitions, Grid.RowDefinitions jó példa olyanra, ami nem tartalomtulajdonság… <Grid> <Grid.RowDefinitions> <RowDefinition Height="1*"/> </Grid.RowDefinitions> ... </Grid>

11 XAML További (egyelőre kevésbé fontos) szintaktikai lehetőségek...
Csatolttulajdonság-szintaxis (Attached Property Syntax) Stb. <Grid> <Grid.RowDefinitions> <RowDefinition Height="107*"/> <RowDefinition Height="115*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="66*"/> <ColumnDefinition Width="67*"/> </Grid.ColumnDefinitions> <Button Content="Button1" Grid.Column="0" Grid.Row="0"/> <Button Content="Button2" Grid.Column="1" Grid.Row="0"/> <Button Content="Button3" Grid.Column="0" Grid.Row="1"/> </Grid> Ezt még azért érdemes említeni, mert: Plusz szükséges a grafikánál (Canvas miatt, X Y koordináta állításnál), llletve abban az esetben, amikor szülőben akarunk kezelni gyerekelemhez tartozó eseményt, amennyiben a szülő nem rendelkezik azzal az eseménnyel. Pl gridben akarjuk kezelni a button clickeket, de a gridnek ugye nincs clickje.

12 Gyakorló feladat