1 / 48

Stand out with styling and animation in your XAML app

APP-494T. Stand out with styling and animation in your XAML app. John Papa Senior Technical Evangelist Microsoft Corporation. Windows 8. Metro style apps. Desktop apps. HTML JavaScript. HTML / CSS. XAML. View. JavaScript (Chakra). C C++. C# VB. Model Controller. C C++. C#

meli
Download Presentation

Stand out with styling and animation in your XAML app

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. APP-494T Stand out with styling and animation in your XAML app John Papa Senior Technical Evangelist Microsoft Corporation

  2. Windows 8 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. Agenda • Windows 8 personality out of the box • Control styling, templating, and visual states • Animation You’ll leave with examples of how to • Style your app consistent with Windows 8 Metro style • Add animations from the Animation Library to your app

  4. Windows 8 Personality Out of the Box

  5. demo Metro style

  6. Project Templates and App Styling • Project templates provide great starting point for Metro style • Familiar XAML styling and resource dictionaries • Dark and light resource dictionaries

  7. Dark and Light Default Styles • Controls are styled by their control template • Resource Dictionaries containing dark and light styles • Dark styles are default • Recommended for media apps, such as photos or video • generic.xaml • Light styles can be switched to quickly • Recommended for text-based apps • light_generic.xaml

  8. Switching to the Light Styles in app.xaml Tip • // Drag light_generic.xamlfrom an SDK Sample to your project • <Application.Resources> • <ResourceDictionary> • <ResourceDictionary.MergedDictionaries> • <ResourceDictionarySource="light_generic.xaml"/> • </ResourceDictionary.MergedDictionaries> • </ResourceDictionary> • </Application.Resources>

  9. demo Visual Studio Templates and Light and Dark Styles

  10. Recap • Windows 8 personality out of the box • Project Templates are a great starting point • Use light and dark styles

  11. Control Styling, Templating, and Visual States

  12. Style Controls to Suit Your App • Windows 8 provides great controls through the platform • Controls can be styled, breaking down their parts • Properties • Set foreground color to blue • Templates • Change the structural appearance of a control • Visual States • Add behavior to a control

  13. Styling a Control • Explicit styles (keyed) • Apply the style to the target when requested by key name • Great for unique styles • BasedOnstyles • Inherit from an explicitly keyed style • Implicit styles • Apply the style to all instances of the TargetType • Ideal for app wide styling of a control type

  14. Explicit and BasedOn Styles Explicit Style • <Stylex:Key="ButtonStyle" • TargetType="Button"> • <SetterProperty="Margin" Value="12,12,12,12"/> • <SetterProperty="Foreground" Value="#FF74B5E5"/> • </Style> • <Stylex:Key="YellowButtonStyle" • TargetType="Button" • BasedOn="{StaticResourceButtonStyle}"> • <SetterProperty="FontSize" Value="32"/> • <SetterProperty="Foreground" Value="Yellow"/> • </Style> BasedOn Style

  15. Implicit Styles Implicit Style (no key is specified) • <StyleTargetType="Button"> • <SetterProperty="Margin" Value="12,12,12,12"/> • <SetterProperty="FontSize" Value="32"/> • <SetterProperty="Foreground" Value="Yellow"/> • </Style>

  16. Templating a Control • Metro style look and feel • Change the control to suit you • Properties • Visual States • Content • Styling Analogy • Styling is painting the wall blue • Templating is making the wall a window

  17. Visual State Manager • Visual states give controls, and your app, a great feel • Define your app’s behavior • Change appearance • Transforms • Easing • KeyFrames • Animations Normal Pressed Hover

  18. Visual States <Style TargetType="Button"> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Template"> <Setter.Value> <ControlTemplateTargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> ... ... ... ... </Style> • <VisualStateManager.VisualStateGroups> • <VisualStateGroupsx:Name="CommonStates"> • <VisualStatex:Name="Normal"/> • <VisualStatex:Name="MouseOver"> • <Storyboard> • <ColorAnimationStoryboard.TargetName="Border" • Storyboard.TargetProperty • ="(Control.Background).SolidColorBrush.Color)" • To="{StaticResourceControlMouseOverFillColor}" • Duration="0" /> • </Storyboard> • </VisualState> • ...

  19. Theme Dictionaries and System Colors • Applies to High Contrast mode • Use Theme Dictionaries • Use System Colors • SystemColorWindowTextBrush • SystemColorBackgroundBrush • … • For more details, attend the Accessibility Chalk talk

  20. demo Styling and Templating Controls

  21. Recap • Let your app shine through with styling and templating of controls • Use visual states to add behavior • Use ThemeDictionaries and System Colors in high contrast scenarios

  22. Animations

  23. Windows Animations • Built in Animations for free • Using the Animations Library • Custom Animations • Tips

  24. Controls Have Built in Animations • ApplicationBar • ProgressRing • ToggleSwitch • GridView • More . . .

  25. Animation Library • Key animations used throughout the Windows 8 UI • Great performance • Often include translation, durations, easing • Great way to make your app feel “built for Windows 8”

  26. Animations Library - Theme Transitions • Entrance • Uses staggering while fading in and moving new elements • Content • Fades out old content, fades in new content, and translation • Reposition • Fluidly moves elements when they get repositioned (from an offset) • AddDelete • Fades in, fades out, & moves existing elements around or fades out/in everything. (GridView & ListView) • Reorder • Reorder and drag/drop an element (GridView & ListView)

  27. Using Animation Library Transitions • // Event handling and timing are handled for you • // use inline or in a style or Resource Dictionary • <Grid> • <Grid.ChildTransitions> • <TransitionCollection> • <EntranceThemeTransition/> • </TransitionCollection> • </Grid.ChildTransitions> • </Grid> <EntranceThemeTransition HorizontalOffset="500" /> Offset

  28. Animations Library - Theme Animations • Storyboard or Visual States to contain the animation • You maybegin, stop, pause, resume the animations • ThemeAnimations • Reposition • PopIn and Popout (Included in dialogs, flyouts and context menus) • FadeIn and FadeOut • TapUpand TapDown • SplitOpenand SplitClose • CrossSlideBack • DragItem, DropTargetItem and DragOver

  29. Using Theme Animations in Storyboards • <StackPanel> • <StackPanel.Resources> • <Storyboardx:Name="myStoryboard"> • <FadeOutThemeAnimationStoryboard.TargetName="myElement"/> • </Storyboard> • </StackPanel.Resources> • <RectanglePointerPressed="Rectangle_Tapped" • x:Name="myElement"Fill="Blue" Width="200" Height="300"/> • </StackPanel> • private void Rectangle_Tapped(object sender, PointerEventArgs e) • { • myStoryboard.Begin(); • }

  30. Using Theme Animations in Visual States • <VisualStatex:Name="Opened"> • <Storyboard> • <SplitOpenThemeAnimation • OpenedTargetName="PopupBorder" • ContentTargetName="ScrollViewer" • ClosedTargetName="DropDownToggle" • ContentTranslationOffset="0" • . . . • . . . /> • </Storyboard> • </VisualState> Animation for Opened state in a ComboBox

  31. Custom Animations • Advanced scenario where there is no built in animation • Choose Independent animations • DoubleAnimation for opacity and transforms • Duration = 0 • Object Key Frame • Dependent animations run on the UI thread • Must be specifically enabled • Set AllowDependentAnimation to True on the animation

  32. 3 Animation Tips • Use animations built into the controls • For consistent experience and performance • Animations Library ThemeTransitions • Animations Library ThemeAnimations • For custom animations, choose independent animations

  33. Major Advantages ofthe Animations Library • Designed to be consistent with the Windows Metro style • Require less code than a custom animation • More likely to be performant than a custom animation

  34. demo Animations

  35. Recap • Windows 8 controls have many built in animations • Use the Animation Library for the consistent experience and high performance • Use custom animations for advanced scenarios on independent animations

  36. NineGrid

  37. Scale Images with a NineGrid • For borders, containers, buttons with fast performance • Preserves corner details • Stretches and fills the rest • Can render as fast or faster than vectors

  38. Defining a NineGrid Source image (zoomed): Splits into nine regions: Scaled to arbitrary size: • <Image Source="Images/NineGrid.png" • Height="50"Width="150" • NineGrid="5,8,5,8"/>

  39. NineGridBreakdown

  40. demo Taking Advantage of the 9 Grid

  41. Recap • Use a NineGrid for rounded buttons or containers, when you have assets • NineGrid can render as fast or faster than vectors

  42. Review

  43. Recap • Leverage and build on your XAML skills • Windows 8 personality out of the box • Style and Template controls • Use light and dark styles • Scale images with the NineGrid • Add animations from the Animation Library

  44. Related sessions • APP-517T Build Polished Collection and List Apps Using XAML • APP-737TMetro Style Apps in XAML: What You Need to Know • APP-515TTips &Tricks for Developing Metro Style Apps with XAML • APP-741TMake Your App Stand Out with XAML and Windows 8 • APP-912TBuild Data-driven Collection and List Apps using XAML • APP-503T Make Great Touch Apps Using XAML

  45. Further reading and documentation • Windows 8 SDK – Source of many samples ! • Tour of the IDE for C#/C++/Visual Basic Developers • Animations Quickstart • Roadmap for creating Metro style apps in C#, C++, or VB • Metro style apps developer forum • Contact info - john.papa@microsoft.com

  46. Have fun and send us your feedback!

  47. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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