Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Download as PPTX, PDF0 likes769 views
The document discusses advancements in Windows UI, focusing on enhancements in user engagement, productivity, and visual rendering. It emphasizes components such as natural motion, lighting, and micro-animations to create a more immersive user experience across different devices and contexts. Additionally, it outlines ways to modernize existing Win32 and XAML applications with best practices for performance and scalability.
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
- 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
- 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
- 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
- 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>
- 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!
- 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