XAML
1
•Intro XAML•Attribute syntax & property syntax•Panels•Reusable resources•Controls•Data binding
Steen Jensen, spring 2014
Steen Jensen, spring 2014
Intro XAML
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
2Steen Jensen, spring 2014
Attribute syntax & property syntax 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
Demo of GreetMeApplication
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)
4Steen Jensen, spring 2014
Exercise 1 XAML – GreetMeApplication
Make the GreetMeApplication by following the instructions on page 234 bottom – 235 in the file XAML.pdf
5Steen Jensen, spring 2014
Panels
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
6Steen Jensen, spring 2014
Three types of panels: Canvas, StackPanel, Grid
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
7Steen Jensen, spring 2014
Examples of Canvas, StackPanel & Grid, 1
8Steen Jensen, spring 2014
Examples of Canvas, StackPanel & Grid, 2
9Steen Jensen, spring 2014
Exercise 2 XAML – layout with panels
Part 1:• Follow the instructions in the file XAML.pdf on page 244
bottom – 247 middle
Part 2:• Examine the examples at
http://www.c-sharpcorner.com/UploadFile/0b73e1/different-types-of-panels-in-xaml-layout/
Also try to copy/paste the code examples into a new project in Visual Studio where possible.
10Steen Jensen, spring 2014
Reusable resources
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
11Steen Jensen, spring 2014
The hierarchy of resources
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
12Steen Jensen, spring 2014
Exercise 3 XAML – resources
Follow the instructions on page 250 middle – 251 middle in the file XAML.pdf
13Steen Jensen, spring 2014
Controls
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
14Steen Jensen, spring 2014
Content controls
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
15Steen Jensen, spring 2014
Exercise 4 XAML – controls
Part 1:• Follow the instructions in the file Hands on lab 3 – XAML &
controls.pdf Part 2:
• Examine the examples at http://msdn.microsoft.com/en-us/libry/windows/apps/bg182878.aspx Also try to copy/paste the code examples into a new project in Visual Studio.
16Steen Jensen, spring 2014
Data binding
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
17Steen Jensen, spring 2014
Exercise 5 XAML – data binding
Follow the instructions on page 265 top – 267 middle in the file XAML.pdf
18Steen Jensen, spring 2014
Overview of XAML
An overview of the different parts of XAML can be found at http://msdn.microsoft.com/en-us/library/windows/apps/hh700354.aspx
19Steen Jensen, spring 2014