windows ui xaml l.
Skip this Video
Loading SlideShow in 5 Seconds..
Windows::UI:: Xaml PowerPoint Presentation
Download Presentation
Windows::UI:: Xaml

Loading in 2 Seconds...

play fullscreen
1 / 32

Windows::UI:: Xaml - PowerPoint PPT Presentation

  • Uploaded on

Windows::UI:: Xaml. Tim Heuer Program Manager, XAML Microsoft Corporation Metro style Apps. Desktop Apps. HTML JavaScript. HTML / CSS. XAML. View. JavaScript (Chakra). C C++. C# VB. Model Controller. C C++. C# VB. WinRT APIs. Devices & Printing.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Windows::UI:: Xaml' - nayef

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
windows ui xaml

Tim Heuer

Program Manager, XAML

Microsoft Corporation


Metro style Apps

Desktop Apps












Model Controller






Devices & Printing


& Data

Graphics & Media

System Services


Internet Explorer


Application Model

Windows Core OS Services


what we will see
What we will see…

Introduction to XAML

Walk through the fundamentals

Creating a Metro style app with XAML and C++

Understand VS, project structure, Win8-isms

Deep(er) dive into DataBinding with ref classes

How you expose your data to the binding engine

Using {Binding} to associate with UIElements

Using DataTemplates

Deep(er) dive into Control development

Create re-usable components for yourself and me 

what is xaml
What is XAML?

Declarative UI framework

Markup represent types (and instantiation)

Describes an object tree

Allows for declarative data binding to UI

Flexible UI template mechanism

declarative ui

Ancestry of Relevant Classes

Declarative UI

<Button Width=“100” Height=“50” Content=“Click Me” />


Button^ btn = ref new Button();

btn->Width = 100;

btn->Height = 50;

btn->Content = “Click Me”;


connecting ui to code
Connecting UI to Code

XAML Generates partial class declaration paired with hand-authored “code behind”

x:Name attribute acts as instance variable declarations

Events act like properties, method names as values


<Button x:Name=“TestButton” Content=“Click Me” Click=“TestButton_Click” />

void MyPage::TestButton_Click(Object^ sender, RoutedEventArgs^ e)


TestButton->Content = “Clicked”;



flexible layout engine
Flexible Layout Engine

Various panels to control UI layout/flow

Subclasses of Panel arrange multiple children

Children content property is a UIElementCollection



<RowDefinition Height=“Auto” />

<RowDefinition Height=“*” />


<Button Content=“Click Me” Grid.Row=“0” />

<TextBlockText=“Hello, World” Grid.Row=“1” />



The core of the UI Framework

Designed for Metro style apps

Touch friendly for all controls

Exhibit Windows 8 UI guidelines out-of-the-box

Based on Templates

Can still template/style and get same API surface area

in box controls for metro style apps
In-box Controls for Metro Style Apps


Text Box

Grid View

Clear Button

Spell Checking


Radio Button

Progress Ring

Progress Bar

Combo Box


Context Menu

Web View


Reveal Button

List View

Semantic Zoom



Flip View

List Box

Scroll Bar

Toggle Switch


Panning Indicator

control templating

All controls based on default definition

ControlTemplate + Styles + Visual States + Animations

Definitions contained in “generic.xaml” (you will get to know this file/term)

NOTE: SDK ships the default generic.xaml used by the controls

Change the look/feel of the element, not the behavior

Developers can rely on the API definition of the control (i.e., Button)

Designers can work with the template/style definition without impacting the code

Not a license to abuse!

Not everything needs a gradient, rounded corners and animations!

control templating cont
Control Templating (cont)

Definitions can be verbose

Templating with a text editor is for people with lots of time

Start with Blend to extract default template and visual alter what you need, tweak with XAML editor


Visual Studio – the “code” tool

Visual design surface

XAML editor with IntelliSense

Object browser

Debugger, code IntelliSense, refactoring, ec.

Blend – the “design” tool

Visual editor for XAML

Rich template/style editing support

Animation editing

Minimal code support

Both are in Visual Studio for Windows 8!

A good XAML developer will always be using both

c and xaml in visual studio structure of a metro style app how xaml and c work together

Basic Metro style app

C++ and XAML in Visual Studio

Structure of a Metro style app

How XAML and C++ work together

windows 8 user experiences
Windows 8 User Experiences

New UI patterns

Full-screen, immersive (content over chrome)

App owns the screen

User is in control

Adaptive layout to different form-factors

New UI controls

AppBar, GridView, selection models


Touch-first (design for touch, get mouse for free)

Interop with other apps

Apps communicate/share data via Contracts

quickly add contracts contoso cookbook downloadable lab

Windows 8 User Experiences

Quickly add contracts

Contoso Cookbook (downloadable lab)

the key to a successful xaml developer is to fully comprehend data binding
“The key to a successful XAML developer is to fully comprehend data binding.”

- Me, just now


Powerful way to connect UI and data declaratively

Literal model representation (ref class)

Other UI elements (master-detail)

Value converters allow translation (i.e., binding a boolean to a Visibility property)

Enables clean separation

Binding is *the* way that you will get the cleanest separation between model and view

Model-View-ViewModel (MVVM) is a common approach in XAML applications and relies on Binding


Understanding data propagation through the visual tree is essential

Context flows in Children elements within a tree

how to bind data to ui
How to bind data to UI…

Your data is likely a public ref class

The source could come from web, local storage, whatever…it most likely hydrates to a type

You have a model (or code-behind) exposing that property/class

You set the DataContext and/or ItemsSource (for collections) to UI elements

You use {Binding} syntax to extract and, well, “bind”

simple binding of a ref class to ui bind a collection and use a datatemplate

Binding to your custom type

Simple binding of a ref class to UI

Bind a collection and use a DataTemplate

binding cont
Binding (cont)


Despite verbosity, still extremely valuable to scenarios

Template classes, generic classes and non-public

Classes with indexers


Simplistic model for public ref classes

Only works on public ref classes

For a large percentage of cases this will be your default

user vs custom controls
User vs. Custom Controls

“Controls” gets overloaded in XAML-speak


Purpose is to serve as a composite of existing elements

Not themeable

Mostly used within a single application

Custom Control

Encapsulated logic/UI in a type

Define their own template/style (i.e., bring your own generic.xaml)

Re-usable components for multiple projects

Huge XAML 3rd party ecosystem

custom controls are underrated
“Custom controls are underrated.”

- Morten Nielson, XAML MVP

custom controls27
Custom Controls

Subclass existing controls

You can subclass Windows::UI::Xamlcontrols

If you have a 3rd party WinRT control it will most likely be sealed

Create your own deriving from Control

You define your own generic.xaml for UI controls which encapsulte the look/feel/states

Use DependencyProperty for your properties to enable binding or as targets for style setting/animations

In VS11 you’ll almost always be creating WinRT Controls in C++

File…New Project…Windows Runtime Component, then add “Templated Control”

Distribute for C++ *or* C# developers

create a winrt xaml ui control user and custom consume it within c or c

Creating a Custom Control

Create a WinRT XAML UI control (user and custom)

Consume it within C++ or C#

more xaml and c
More XAML and C++

Animation Library

Vector Graphics

Declarative localization

Media and Text

DirectX and XAML interop

Jesse Bishop has deep dive on this later today


C++ is a first class language for XAML

No ‘man behind the curtain’ of any runtime

UI framework for quickly getting Windows 8 experiences

Powerful data binding and controls framework


Dev Center (

Extensive WinRT API surface coverage in SDK sample form with C++ examples

Quickstart tutorials with more detail on specific areas

Sample apps

Contoso Cookbook

Project Hilo (

C++/XAML app for Windows 8 using MVVM, data binding, unit testing, etc.

Existing XAML resources

Still helpful resources from Silverlight and Windows Phone on fundamentals

Concepts are transferrable to WinRT XAML


© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.