1 / 32

Windows::UI:: Xaml

Windows::UI:: Xaml. Tim Heuer Program Manager, XAML Microsoft Corporation http://timheuer.com/blog. 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.

nayef
Download Presentation

Windows::UI:: Xaml

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

  3. 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 

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

  5. XAML+Native Code != CLR/Silverlight/WPF

  6. 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”; ==

  7. 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: <Button x:Name=“TestButton” Content=“Click Me” Click=“TestButton_Click” /> void MyPage::TestButton_Click(Object^ sender, RoutedEventArgs^ e) { TestButton->Content = “Clicked”; } C++:

  8. Flexible Layout Engine Various panels to control UI layout/flow Subclasses of Panel arrange multiple children Children content property is a UIElementCollection <Grid> <Grid.RowDefinitions> <RowDefinition Height=“Auto” /> <RowDefinition Height=“*” /> </Grid.RowDefinitions> <Button Content=“Click Me” Grid.Row=“0” /> <TextBlockText=“Hello, World” Grid.Row=“1” /> </Grid>

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

  10. In-box Controls for Metro Style Apps Button Text Box Grid View Clear Button Spell Checking Checkbox Radio Button Progress Ring Progress Bar Combo Box Hyperlink Context Menu Web View Password Reveal Button List View Semantic Zoom Navigation Slider Flip View List Box Scroll Bar Toggle Switch Tooltip Panning Indicator

  11. ControlTemplating 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!

  12. Control Template/Styling

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

  14. Tools 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

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

  16. 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 SemanticZoom Touch-first (design for touch, get mouse for free) Interop with other apps Apps communicate/share data via Contracts

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

  18. Data Binding

  19. “The key to a successful XAML developer is to fully comprehend data binding.” - Me, just now

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

  21. 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”

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

  23. Binding (cont) ICustomPropertyProvider 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

  24. Custom Controls

  25. User vs. Custom Controls “Controls” gets overloaded in XAML-speak UserControl 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

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

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

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

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

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

  31. Resources Dev Center (http://msdn.microsoft.com/windows) 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 (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 WinRT XAML

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

More Related