1. 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014

2.  XAML offers a more flexible control model than Windows Forms  UI is declared declaratively by using a markup language called XAML – eXtensible Application Markup Language  In XAML based Uis vector graphics are used  GUI controls can be tailored by using templates & styles  Windows 8 apps can made two ways: Using HTML5 & JavaScript Using XAML 2 Steen Jensen, spring 2014

3.  Properties on objects can be set using two different forms: Attribute syntax – here the attributes on the XAML element map to properties on the object itself Property syntax - here the property of an object is set to one or more values 3  Attribute syntax  Property syntax Steen Jensen, spring 2014

4.  Demo of Visual Studio solution from the file Chapter07.zip  Project type: Windows Store + Blank App (XAML)  Two XAML files: MainPage.xaml (to build the GUI) Mainpage.xaml.cs(code-behind) (the file App.xaml + code-behind Ap.xaml.cs normally not changed)  Content is normally placed within so-called panels (horizontally or vertically) 4 Steen Jensen, spring 2014

5.  Make the GreetMeApplication by following the instructions on page 234 bottom – 235 in the file XAML.pdf 5 Steen Jensen, spring 2014

6.  A panel can be seen as a container, where you can place different content (controls)  Content can be placed either horizontally or vertically  A control itself has some important properties with big influence on the layout: Width & height, margin, padding, HorizontalAlignment, VerticalAlignment  All panels respect the width, height & margin properties  Alignment is not always taken into account 6 Steen Jensen, spring 2014

7.  The Canvas panel is the most basic: When you add a control to the panel, it is displayed in the top-left corner Left & Top can be used to position X- and Y-position  The StackPanel places its children one after the other horizontally or vertically depending on its Orientation property  The Grid panel supports grid-like layouts with rows and columns: The Height & Width properties support three different values:  Auto: row or column should be sized to fit the content  Fixed value: row or column take up space as defined in the fixed value  Star sizing: the remaining space after rows & columns with Auto and Fixed is assigned 7 Steen Jensen, spring 2014

8. 8

9. 9

10. 10 Steen Jensen, spring 2014

11.  You can think of resources as a big dictionary container into which you can put whatever you want  Later you can reference anything from this container from XAML or code using a single key  To be able to later reference the resource a Key attribute is used  To use a resource you must reference it using a so-called StaticResource extension 11 Steen Jensen, spring 2014

12.  Resources can be defined at three different levels: Application resources: resources added to the Resource section in App.xaml can be used anywhere in the app Page resources: resources added to a specific can only be used on the given page Local resources: resources added to controls or panels can only be used inside the given control or panel 12 Steen Jensen, spring 2014

13.  Follow the instructions on page 250 middle – 251 middle in the file XAML.pdf 13 Steen Jensen, spring 2014

14.  Controls can be divided into two main groups: ContentControls – can only contain a single element ItemsControls – can contain a list of elements  Apart from the two above groups there are a number of elements: Border, Image, TextBlock, TextBox, PasswordBox, ProgressBar, ProgressRing Description of these elements is quite straightforward and can be found in the file XAML.pdf on page 252 bottom – 256 middle 14 Steen Jensen, spring 2014

15.  Examples of content controls are: Button, CheckBox, RadioButton, ScrollViewer, ToggleSwitch Description of these elements is quite straightforward and can be found in the file XAML.pdf on page 256 middle – 258 top 15 Steen Jensen, spring 2014

16. 16 Steen Jensen, spring 2014

17.  Data binding means, that a source object and a target object can be bound together, so a change in one automatically will be transferred to the other  Demo of Visual Studio solution DataBindingDemo from the file Chapter07.zip 17 Steen Jensen, spring 2014

18.  Follow the instructions on page 265 top – 267 middle in the file XAML.pdf 18 Steen Jensen, spring 2014

19. 19 Steen Jensen, spring 2014