Windows UI Xaml Tim Heuer Program Manager XAML

  • Slides: 32
Download presentation
Windows: : UI: : Xaml Tim Heuer Program Manager, XAML Microsoft Corporation http: //timheuer.

Windows: : UI: : Xaml Tim Heuer Program Manager, XAML Microsoft Corporation http: //timheuer. com/blog

Metro style Apps View Model Controller System Services Core HTML / CSS XAML C

Metro style Apps View Model Controller System Services Core HTML / CSS XAML C C++ Desktop Apps C# VB Java. Script (Chakra) HTML C C++ C# VB Internet Explorer Win 32 . NET / SL Java. Script Win. RT APIs Communication & Data Graphics & Media Application Model Devices & Printing Windows Core OS Services

What we will see… Introduction to XAML Walk through the fundamentals Creating a Metro

What we will see… Introduction to XAML Walk through the fundamentals Creating a Metro style app with XAML and C++ Understand VS, project structure, Win 8 -isms Deep(er) dive into Data. Binding with ref classes How you expose your data to the binding engine Using {Binding} to associate with UIElements Using Data. Templates Deep(er) dive into Control development Create re-usable components for yourself and me

What is XAML? Declarative UI framework Markup represent types (and instantiation) Describes an object

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

XAML+Native Code != CLR/Silverlight/WPF

XAML+Native Code != CLR/Silverlight/WPF

Declarative UI <Button Width=“ 100” Height=“ 50” Content=“Click Me” /> == Button^ btn =

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”; == Ancestry of Relevant Classes Button. Base Content. Control Framework. Element UIElement Dependency. Object

Connecting UI to Code XAML Generates partial class declaration paired with hand-authored “code behind”

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 XAML: C++: <Button x: Name=“Test. Button” Content=“Click Me” Click=“Test. Button_Click” /> void My. Page: : Test. Button_Click(Object^ sender, Routed. Event. Args^ e) { Test. Button->Content = “Clicked”; }

Flexible Layout Engine Various panels to control UI layout/flow Subclasses of Panel arrange multiple

Flexible Layout Engine Various panels to control UI layout/flow Subclasses of Panel arrange multiple children Children content property is a UIElement. Collection <Grid> <Grid. Row. Definitions> <Row. Definition Height=“Auto” /> <Row. Definition Height=“*” /> </Grid. Row. Definitions> <Button Content=“Click Me” Grid. Row=“ 0” /> <Text. Block Text=“Hello, World” Grid. Row=“ 1” /> </Grid> Grid Panel Control Framework. Element UIElement Dependency. Object

Controls The core of the UI Framework Designed for Metro style apps Touch friendly

Controls 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

Control Templating All controls based on default definition Control. Template + Styles + Visual

Control Templating All controls based on default definition Control. Template + 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 Template/Styling

Control Template/Styling

Control Templating (cont) Definitions can be verbose Templating with a text editor is for

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

Tools Visual Studio – the “code” tool Visual design surface XAML editor with Intelli.

Tools Visual Studio – the “code” tool Visual design surface XAML editor with Intelli. Sense Object browser Debugger, code Intelli. Sense, 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

Basic Metro style app demo C++ and XAML in Visual Studio Structure of a

Basic Metro style app demo C++ and XAML in Visual Studio Structure of a Metro style app How XAML and C++ work together

Windows 8 User Experiences New UI patterns Full-screen, immersive (content over chrome) App owns

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 App. Bar, Grid. View, selection models Semantic. Zoom Touch-first (design for touch, get mouse for free) Interop with other apps Apps communicate/share data via Contracts

Windows 8 User Experiences demo Quickly add contracts Contoso Cookbook (downloadable lab)

Windows 8 User Experiences demo Quickly add contracts Contoso Cookbook (downloadable lab)

Data Binding

Data Binding

“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

Binding Powerful way to connect UI and data declaratively Literal model representation (ref class)

Binding 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. Model (MVVM) is a common approach in XAML applications and relies on Binding Data. Context Understanding data propagation through the visual tree is essential Context flows in Children elements within a tree

How to bind data to UI… Your data is likely a public ref class

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 Data. Context and/or Items. Source (for collections) to UI elements You use {Binding} syntax to extract and, well, “bind”

Binding to your custom type demo Simple binding of a ref class to UI

Binding to your custom type demo Simple binding of a ref class to UI Bind a collection and use a Data. Template

Binding (cont) ICustom. Property. Provider Despite verbosity, still extremely valuable to scenarios Template classes,

Binding (cont) ICustom. Property. Provider Despite verbosity, still extremely valuable to scenarios Template classes, generic classes and non-public Classes with indexers [Bindable] Simplistic model for public ref classes Only works on public ref classes For a large percentage of cases this will be your default

Custom Controls

Custom Controls

User vs. Custom Controls “Controls” gets overloaded in XAML-speak User. Control Purpose is to

User vs. Custom Controls “Controls” gets overloaded in XAML-speak User. Control 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 3 rd party ecosystem

“Custom controls are underrated. ” - Morten Nielson, XAML MVP

“Custom controls are underrated. ” - Morten Nielson, XAML MVP

Custom Controls Subclass existing controls You can subclass Windows: : UI: : Xaml controls

Custom Controls Subclass existing controls You can subclass Windows: : UI: : Xaml controls If you have a 3 rd party Win. RT 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 Dependency. Property for your properties to enable binding or as targets for style setting/animations In VS 11 you’ll almost always be creating Win. RT Controls in C++ File…New Project…Windows Runtime Component, then add “Templated Control” Distribute for C++ *or* C# developers

Creating a Custom Control demo Create a Win. RT XAML UI control (user and

Creating a Custom Control demo Create a Win. RT XAML UI control (user and custom) Consume it within C++ or C#

More XAML and C++ Animation Library Vector Graphics Declarative localization Media and Text Direct.

More XAML and C++ Animation Library Vector Graphics Declarative localization Media and Text Direct. X and XAML interop Jesse Bishop has deep dive on this later today

Summary C++ is a first class language for XAML No ‘man behind the curtain’

Summary 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

Resources Dev Center (http: //msdn. microsoft. com/windows) Extensive Win. RT API surface coverage in

Resources Dev Center (http: //msdn. microsoft. com/windows) Extensive Win. RT API surface coverage in SDK sample form with C++ examples Quickstart tutorials with more detail on specific areas Sample apps Contoso Cookbook Project Hilo (http: //hilo. codeplex. com) 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 Win. RT XAML

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are

© 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.