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

XAML

1

•Intro XAML•Attribute syntax & property syntax•Panels•Reusable resources•Controls•Data binding

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


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)


Exercise 1 XAML – GreetMeApplication

Make the GreetMeApplication by following the instructions on page 234 bottom – 235 in the file XAML.pdf


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


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


Examples of Canvas, StackPanel & Grid, 1


Examples of Canvas, StackPanel & Grid, 2


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.




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


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


Exercise 3 XAML – resources

Follow the instructions on page 250 middle – 251 middle in the file XAML.pdf


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


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


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.


http://msdn.microsoft.com/en-us/libry/windows/apps/bg182878.aspx


http://sqlzoo.net/wiki/Main_Page

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


Exercise 5 XAML – data binding

Follow the instructions on page 265 top – 267 middle in the file XAML.pdf


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


http://msdn.microsoft.com/en-us/library/windows/apps/hh700354.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh700354.aspx


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

Documents

xaml code

xaml layout

xaml files

vertically4steen jensen

account6steen jensen

xaml greetmeapplicationmake

xaml element map

stackpanel grid