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

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

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

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.xaml from an SDK Sample to your project
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="light_generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

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

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) 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

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

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

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

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

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

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

29. 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(); }

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

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

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

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 <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" />

39. NineGrid Breakdown

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

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

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 -

46. Have fun and send us your feedback!

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