1 intro xaml attribute syntax & property syntax panels reusable resources controls data binding...
TRANSCRIPT
![Page 1: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/1.jpg)
XAML
1
•Intro XAML•Attribute syntax & property syntax•Panels•Reusable resources•Controls•Data binding
Steen Jensen, spring 2014
Steen Jensen, spring 2014
![Page 2: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/2.jpg)
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
![Page 3: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/3.jpg)
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
![Page 4: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/4.jpg)
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
![Page 5: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/5.jpg)
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
![Page 6: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/6.jpg)
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
![Page 7: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/7.jpg)
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
![Page 8: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/8.jpg)
Examples of Canvas, StackPanel & Grid, 1
8Steen Jensen, spring 2014
![Page 9: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/9.jpg)
Examples of Canvas, StackPanel & Grid, 2
9Steen Jensen, spring 2014
![Page 10: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/10.jpg)
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
![Page 11: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/11.jpg)
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
![Page 12: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/12.jpg)
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
![Page 13: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/13.jpg)
Exercise 3 XAML – resources
Follow the instructions on page 250 middle – 251 middle in the file XAML.pdf
13Steen Jensen, spring 2014
![Page 14: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/14.jpg)
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
![Page 15: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/15.jpg)
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
![Page 16: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/16.jpg)
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
![Page 17: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/17.jpg)
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
![Page 18: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/18.jpg)
Exercise 5 XAML – data binding
Follow the instructions on page 265 top – 267 middle in the file XAML.pdf
18Steen Jensen, spring 2014
![Page 19: 1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014](https://reader035.vdocuments.us/reader035/viewer/2022062409/56649e665503460f94b615c3/html5/thumbnails/19.jpg)
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