Stand out with styling and animation in your XAML app 11/10/2018 2:54 PM APP-494T Stand out with styling and animation in your XAML app John Papa Senior Technical Evangelist Microsoft Corporation © 2010 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.

Windows Core OS Services Metro style apps Desktop apps View XAML HTML / CSS HTML JavaScript Model Controller C C++ C# VB JavaScript (Chakra) C C++ C# VB WinRT APIs Communication & Data Graphics & Media Devices & Printing System Services Application Model Internet Explorer Win32 .NET / SL Core Windows Core OS Services

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

Windows 8 Personality Out of the Box

11/10/2018 2:54 PM demo Metro style © 2010 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.

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

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

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

Visual Studio Templates and Light and Dark Styles 11/10/2018 2:54 PM demo Visual Studio Templates and Light and Dark Styles © 2010 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.

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

Control Styling, Templating, and Visual States

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

Styling a Control Explicit styles (keyed) BasedOn styles Apply the style to the target when requested by key name Great for unique styles BasedOn styles 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

Explicit and BasedOn Styles Explicit Style <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Margin" Value="12,12,12,12"/> <Setter Property="Foreground" Value="#FF74B5E5"/> </Style> <Style x:Key="YellowButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonStyle}"> <Setter Property="FontSize" Value="32"/> <Setter Property="Foreground" Value="Yellow"/> BasedOn Style

Implicit Style (no key is specified) Implicit Styles Implicit Style (no key is specified) <Style TargetType="Button"> <Setter Property="Margin" Value="12,12,12,12"/> <Setter Property="FontSize" Value="32"/> <Setter Property="Foreground" Value="Yellow"/> </Style>

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

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

Visual States <Style TargetType="Button"> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> ... </Style> <VisualStateManager.VisualStateGroups> <VisualStateGroups x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty ="(Control.Background).SolidColorBrush.Color)" To="{StaticResource ControlMouseOverFillColor}" Duration="0" /> </Storyboard> </VisualState> ...

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

Styling and Templating Controls 11/10/2018 2:54 PM demo Styling and Templating Controls © 2010 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.

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

Animations

Windows Animations Built in Animations for free Using the Animations Library Custom Animations Tips

Controls Have Built in Animations 11/10/2018 2:54 PM Controls Have Built in Animations ApplicationBar ProgressRing ToggleSwitch GridView More . . . © 2010 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.

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”

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)

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

Animations Library - Theme Animations Storyboard or Visual States to contain the animation You may begin, stop, pause, resume the animations ThemeAnimations Reposition PopIn and Popout (Included in dialogs, flyouts and context menus) FadeIn and FadeOut TapUp and TapDown SplitOpen and SplitClose CrossSlideBack DragItem, DropTargetItem and DragOver

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

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

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

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

Major Advantages of the 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

11/10/2018 2:54 PM demo Animations © 2010 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.

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

NineGrid

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

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

NineGrid Breakdown

Taking Advantage of the 9 Grid 11/10/2018 2:54 PM demo Taking Advantage of the 9 Grid © 2010 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.

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

Review

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

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

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

Have fun and send us your feedback!

11/10/2018 2:54 PM © 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. © 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.