Windows UI Xaml Tim Heuer Program Manager XAML
- Slides: 32
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 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 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 tree Allows for declarative data binding to UI Flexible UI template mechanism
XAML+Native Code != CLR/Silverlight/WPF
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” 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 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 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
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 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. 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 Metro style app How XAML and C++ work together
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)
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) 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 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 Bind a collection and use a Data. Template
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
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 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 custom) Consume it within C++ or C#
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’ 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 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 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.
- Visual studio
- Windows.ui.xaml.dll
- Trialschule elmar
- Mark heuer
- Xaml dersleri
- Xaml css
- Xaml application
- Wpf adaptive layout
- Senior manager vs general manager
- Portfolio manager synergy manager parental developer
- Windows ce driver
- Windows azure hyper v recovery manager
- Windows filter manager
- Cache manager windows 10
- Gear manager windows
- Live windows movie maker
- Windows media player 9
- Mailprogramma windows 7
- Windows driver kit windows 7
- Herramientas de movie maker
- Skins for media player
- Windows identity foundation windows 10
- Upgrade windows 7 to windows 10
- Xp mode virtualbox
- Windows mobile center windows 10
- Manual windows movie maker
- Ipseq
- Xp mode windows 7
- Program tim pengembang sekolah
- Gsa fleet service representative
- Microsoft partner program manager
- Microsoft partner program manager
- Population health program manager