Great user experiences can delight and engage your users, and make them more productive. Innovations in the Windows UI platform in XAML and Visual Layer make creating these experiences easy on Windows. This session shows you how to easily enable these experiences in your apps – be they consumer, enterprise, or line-of-business. We also tease you with what’s in store for Windows UI in the future and how we progressively make the 'possible' even easier.

2. @windowsui

4. CONSUMERS INFORMATION WORKERS DEVELOPERS
Outcome: Engagement Outcome: Productivity Outcome: High ROI

5. Framework layer
Controls, Layout, Styling, Accessibility, Data
binding, Pre-packaged behaviors & Patterns
Visual layer
Lightweight visual rendering, Animations &
Natural motion, Effects, Dimensionality,
Lighting & Shadows
Graphics layer
Drawing, Text rasterization, Shape & Vector
rasterization, Ink rendering
Windows.UI.XAML
Windows.UI.Composition
DirectX Family

6. Possible Easy Default
A-B-C

7. Highest
Differentiation:
Signature or Hero
Navigation, Themes
Natural Motion
Patterns, Controls,
Input,
Scaling & Orientation
Layout, Typography, Animation
Color & Effects, Icons
Performance & Scalability
Differentiators - Within a framework, UX can
differ in these ways to be unique
P E R S O N A L
Basics – UX should be consistent in these ways
U N I V E R S A L
Differentiated UX based on:
 Brand
 Audience – User Intent
 Device Context

8. Highest
Differentiation:
Signature or Hero
Navigation, Themes
Natural Motion
Patterns, Controls,
Input,
Scaling & Orientation
Layout, Typography, Animation
Color & Effects, Icons
Performance & Scalability
Creators
Update
Fall Creators
Update
Beyond

9. Highest
Differentiation:
Signature or Hero
Navigation, Themes
Natural Motion
Patterns, Controls,
Input,
Scaling & Orientation
Layout, Typography, Animation
Color & Effects, Icons
Performance & Scalability
Lighting, Shadows
Lighting, Shadows
Real-world UI: Dimensionality
Real-world UI: Shapes, Micro Animations
Tailoring UI for Device
Realistic depth & volume
for 2D apps in HMD
Parallax, Conscious headers,
Choreographed UI
Forms over data
Nav View, Tree View
HDR and Advanced Color
Adaptability
Input driven
Animations
Canned Physics (Spring, Bounce, Hinge),
Physics Engine integration
Modern UI in Win32, WPF,
WinForms
Materials
Reveal
Semantic Animations
Interactive 2D/3D Data
Visualization
SVG in Image
Creators
Update
Fall Creators
Update
Beyond

10. 1.
2.
3.
4.

11. R E A L - W O R L D U I

12. Lighting
Materials and Effects
Shapes with micro-animations
R E A L - W O R L D U I

13. Lighting

14. Point, Spot, Distant, Ambient Lights.
Used with Scene Light Effect
Drop Shadows, Future: Light based
Shadows
XAML Light,
Control over exclusion and
intensity
Reveal and its use in ListView /
TreeView / NavigationView /
AutosuggestBox,
Future: Realistic depth and shadows
A-B-C

15. REVEAL
<Button Content="Button Content" Style="{StaticResource ButtonRevealStyle}"/>
REVEALREVEAL

18. ACRYLIC
App or Desktop background
Gaussian blur
Exclusion blend
Color tint (optional)
Noise texture
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}"/>

19.  Acrylic
 Backdrop brush, can
sample from desktop or
app background
public ImageEffectBrush : XamlCompositionBaseBrush
{
// implementation can use any Visual layer effects
}
<TextBlock Text="Hello World">
<TextBlock.Foreground>
<local:ImageEffectBrush />
</TextBlock.Foreground>
</TextBlock>
Explore the next gen innovation in the Visual layer (B8037, Lindsay/Kelly)

23. Want to help shape this?
aka.ms/windowsui/shapes

24. Lighting
Materials and Effects
Shapes with Micro-
Animations
R E A L - W O R L D U IR E C A P

25. N A T U R A L M O T I O N

26. Seamless transitions
Dynamic motion
Semantic animations
N A T U R A L M O T I O N

30. // play an animation when this UIElement is shown
ElementCompositionPreview
// play an animation when this UIElement is hidden
ElementCompositionPreview
// event handler on Master page
private void object ItemClickEventArgs
var GridViewItem
"Image"
var ConnectedAnimationService
"Image"
// navigation handler on Details page
private override void NavigationEventArgs
var ConnectedAnimationService
"Image"

32. Input driven animations:
Interaction Tracker, Inertia modifiers,
Source modifiers, Position trackers
Parallax, Conscious Headers,
Pull to Refresh
Future: Integrating Physics engines
Physical motion: spring, bounce,
attraction
Perceived physics with the use of
Triggers, Noise
Future: New XAML Scroller
Future: Motion and
Patterns embodied by
Controls and implicit
animations as part of the
Windows “personality”
A-B-C

34. master.xaml

35. details.xaml

36. ConnectedAnimations.Id="{x:Bind Id}"
master.xaml
ConnectedAnimations.Id="{x:Bind
CurrentItem.Id}"
details.xaml
❶
❷

37. <Page.Animations>
<FadeOutExit Duration="0.3s" />
</Page.Animations>
master.xaml
<Grid.Animations>
<SlideInEntrance From="0,-80,0"
Duration="0.4s" />
</Grid.Animations>
<ListView.ItemAnimations>
<SlideInEntrance Duration="0.4s"
StaggerDelayFactor="0.3" />
</ListView.ItemAnimations>
details.xaml
❶
❷
❸
❹
❺

38. Concepts:
• Connected Animation conveniences
• Behaviors
e.g. FadeOutExit, SlideInEntrance
• Triggers
e.g. Entrance, Exit, PropertyChanged, etc. or custom
• Expressive library of stock animations
• Customize + Use Storyboard animations and/or
Composition Animations
Feedback? Let us know:
aka.ms/windowsui/semanticanimation

39. Seamless transitions
Dynamic motion
Semantic animations
N A T U R A L M O T I O NR E C A P

40. U I C O N T R O L S & P A T T E R N S

41. Building blocks
Patterns
Encapsulation as default
U I C O N T R O L S

42. Interaction Tracker, Materials and
Lighting, Input, Repeatable UI
A-B-C

43. Parallax velocity, conscious headers,
context menus, swiping/pulling to
reveal, keyboard input, hierarchical
views
A-B-C

44. A-B-C

45. • ParallaxView
A-B-C

46. • ParallaxView
• RefreshContainer
A-B-C

47. • ParallaxView
• RefreshContainer
• SwipeContainer
A-B-C

49. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
A-B-C

50. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
• ContentDialog
• ContextFlyout
A-B-C

51. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
• ContentDialog
• ContextFlyout
• AccessKey
A-B-C

52. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
• ContentDialog
• ContextFlyout
• AccessKey
• RatingsControl
A-B-C

53. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
• ContentDialog
• ContextFlyout
• AccessKey
• RatingsControl
• ColorPicker
A-B-C

54. • ParallaxView
• RefreshContainer
• SwipeContainer
• TreeView
• ContentDialog
• ContextFlyout
• AccessKey
• RatingsControl
• ColorPicker
• Future: Repeater
A-B-C
LayoutDataSource
UIElement
UIElement
UIElement
ViewGenerator
Repeater

55. Building blocks
Patterns
Encapsulation as default
U I C O N T R O L SR E C A P

56. S C A L E : U P A N D O U T

58. <Application ...>
<uap:VisualElements>
<uap:SplashScreen Image="AssetsSplashScreen.png" />
</uap:VisualElements>
</Application>
<Application ...>
<uap:VisualElements>
<uap:SplashScreen Image="AssetsSplashScreen.png"
Optional="True" />
</uap:VisualElements>
</Application>

59.  Respect the user

60.  Respect the user
 Respect the device
<StackPanel x:Name="MyLargeSecondaryUI"
Visibility="Collapsed" >
<!--
some large chunk of UI that may rarely be seen but
we are too lazy to dynamically load because we love
our markup
:-D I kid, I kid!
-->
</StackPanel>
<StackPanel x:Name="MyLargeSecondaryUI"
x:Load="{x:Bind MyViewModel.ShouldShowSecondaryUI}">
<!--
some large chunk of UI that may rarely be seen but
we are too lazy to dynamically load because we love
our markup
:-D I kid, I kid!
-->
</StackPanel>
Tips and Tricks for Creating Performant UI in UWP (P4173, David Li)

61. DESKTOP BRIDGE
Win32
UI
Windows
UI
DESKTOP BRIDGE
Windows UIWin32 UI
EXISTING SUPPORT PLATFORM WILL ENABLE… … SO APP CAN ACHIEVE

62. Feedback? Let us know:
aka.ms/windowsui/inwin32
Modernize Windows Forms and WPF apps (B8110, Mike Battista)

63. 



64. <!– Xamarin.Forms -->
<ContentView>
<StackLayout StackOrientation=“Vertical”
Spacing=“5”>
<Label Text=“Hello World!”
HorizontalOptions=“Center” />
<Button Text=“Click me!”
Command=“{Binding ClickCommand}” />
<Entry Placeholder=“Enter some text”
PlaceholderColor=“Blue” />
</StackLayout>
</ContentView>
<!-- UWP XAML -->
<UserControl>
<StackPanel Orientation=“Vertical”>
<TextBlock Text=“Hello World!”
HorizontalAlignment=“Center” />
<Button Content=“Click me!”
Command=“{Binding ClickCommand}” />
<TextBox PlaceholderText=“Enter some text” />
</StackPanel>
</UserControl>
<!-- XAML Standard -->
<UserControl>
<StackPanel Orientation=“Vertical”
Spacing=“5” >
<TextBlock Text=“Hello World!”
HorizontalAlignment=“Center” />
<Button Content=“Click me!”
Command=“{Binding ClickCommand}” />
<TextBox PlaceholderText=“Enter some text”
PlaceholderBrush=“Blue”/>
</StackPanel>
</UserControl>

65. Collaborate with us!
aka.ms/xamlstandard

66. .NET Standard 2.0 support
XAML Standard 1.0 support
Custom MarkupExtension
Default binding modes for x:Bind
More VS improvements (Edit and
Continue, Min/Max versioning)
Strikethrough text
Performance improvements (reduced
memory, higher scalability)
2D apps with realistic depth in 3D/HMD
Advanced color and HDR in
Image/MediaElement/Visuals
Input (event preview on key up/down)
CharacterReceived (Text input)
CharacterCasing (TextBox)
ClipBoard copy events on Text input
Text IsWrapped/Trimmed
Coming to a flight soon – be an insider!

68. @windowsui
wpdev.uservoice.com
aka.ms/windowsui

69. Meet our engineers and see more at the BEAUTIFUL UX kiosks (Expo hall > Ask The Experts area)
LIVE SESSIONS
PRE-RECORDED SESSIONS
THEATER SESSIONS