2-672: Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer

Unleash your creativity and explore new possibilities to visually bring your application to life! Learn how to utilize new light-weight Visuals, Animations, Effects, and Manipulations to easily create smooth and highly scalable UI experiences spanning Windows, Windows Phone, Xbox, and HoloLens.

1.0x

2-672: Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer

Created 2 years ago

Duration 0:53:25
lesson view count 1901
Unleash your creativity and explore new possibilities to visually bring your application to life! Learn how to utilize new light-weight Visuals, Animations, Effects, and Manipulations to easily create smooth and highly scalable UI experiences spanning Windows, Windows Phone, Xbox, and HoloLens.
Select the file type you wish to download
Slide Content
  1. James Clarke

    Slide 1 - James Clarke

    • Principal Program Manager Lead
    • @clarkezone
    • Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer
    • 2-672
  2. James Clarke

    Slide 2 - James Clarke

    • Principal Program Manager Lead
    • @clarkezone
    • Bring Fluid, Responsive, and Highly Scalable UI Experiences to Your Universal Windows Apps with the New Visual Layer
    • 2-672
  3. The Visual Layer and Composition in Windows 10

    Slide 3 - The Visual Layer and Composition in Windows 10

    • Using the Visual Layer in your Apps
    • Roadmap & Call to action
    • Agenda slide
  4. Slide 4

    • Display
    • What is the Visual Layer?
    • System Compositor
    • Win32 Apps
    • XAML / WWA Frameworks
    • Windows Shell
    • IE / Project Spartan
    • Graphics Hardware
    • Composition API
  5. Visual Layer Goals for Windows 10

    Slide 5 - Visual Layer Goals for Windows 10

    • Vision: Create the foundational building blocks to enable next generation user experiences.
    • Unified composition and rendering
    • New Programming Model
    • New
    • Capabilities
    • 1
    • 3
    • 2
  6. New Visual Layer in Windows 10

    Slide 6 - New Visual Layer in Windows 10

    • Create the foundational building blocks for next generation user experiences
    • One Compositor enabling Windows apps across all Windows OneCore devices
    • Unified composition and rendering
    • New Programming Model
    • New
    • Capabilities
    • Converged Compositor
    • 1
    • 3
    • 2
    • New Rendering Engine
    • Optimized for scalable rendering of highly dynamic scenes
    • New Effects System
    • New Animation System
    • Light-Weight Visual Layer
    • Optimized for scale and highly dynamic content
  7. Introducing:New WinRT CompositionAPI

    Slide 7 - Introducing:New WinRT CompositionAPI

    • WinRT object model providing programmatic access to the visual layer: Windows.UI.Composition
    • Usable from C#, Standard C++, C++/CX
    • Available everywhere Universal Windows Apps run
    • In preview now; We’re not done yet!
  8. Visual Layer for devs Windows 8.1  era

    Slide 8 - Visual Layer for devs Windows 8.1 era

    • DirectX Family
    • DirectComposition / DirectManipulation
    • XAML
    • UI Tree, Control Model, Layout, Property System Databinding, Accessibility
    • Composition Tree, Primitive Rendering, Animation Execution, Manipulation Threads
    • 2D and 3D drawing, Meshes, Shaders, high degree of control over presentation
    • Framework Layer
    • Visual
    • Layer
    • Windows 8.1 / Phone Store Apps
    • Graphics Layer
  9. Visual Layer for devs Windows 10

    Slide 9 - Visual Layer for devs Windows 10

    • DirectX Family
    • Windows.UI.Composition
    • XAML
    • Composition Tree, Primitive Rendering, Animation Execution, Manipulation Threads, Asynchronous Messaging and Events
    • Framework Layer
    • Visual
    • Layer
    • Universal Windows App
    • Graphics Layer
  10. Composition API Walkthrough:Visuals and the Visual Tree

    Slide 10 - Composition API Walkthrough:Visuals and the Visual Tree

    • New Effects System
    • New Animation System
    • Light-Weight Visual Layer
    • DirectX Interop
  11. Demo: TweetWall

    Slide 11 - Demo: TweetWall

  12. Demo: TweetWall

    Slide 12 - Demo: TweetWall

  13. Demo: TweetWall

    Slide 13 - Demo: TweetWall

  14. Visual object and class hierarchy

    Slide 14 - Visual object and class hierarchy

    • Composition Objects that display content derive from Visual
    • Specialized Visuals exist for displaying Solid color rectangles, Images and Effects
    • Visuals that derive from ContainerVisual can have children
    • Future: More kinds of visuals coming (e.g. geometric path, text, particle generator, etc.)
  15. What can you do with a Visual?

    Slide 15 - What can you do with a Visual?

    • Rasterize Content
    • Composes and renders serialized drawing content.
    • Basic positioning
    • Setting offsets relative to parent or window.
    • Clipping
    • “Inset” from size of object
    • Transforms
    • 2D and 3D transformations to alter the size, position or nature of a visual.
    • Properties:
    • Statically set or
    • Bound to animations
    • Build Tree:
    • Establish parent-child relationships
  16. Visual tree structure and content

    Slide 16 - Visual tree structure and content

    • Binding to CoreWindow
    • Top-level “root” visual
    • SolidColorVisual
    • ContainerVisual
    • CompositionTarget
    • Content visuals
    • CompositionImage
    • CompositionImage
    • CompositionImage
    • ImageVisual
    • ImageVisual
    • ImageVisual
  17. Code Demo: Visual Types

    Slide 17 - Code Demo: Visual Types

  18. Code Demo: Visual Types

    Slide 18 - Code Demo: Visual Types

  19. Code Demo: Visual Types

    Slide 19 - Code Demo: Visual Types

  20. Visual Transforms

    Slide 20 - Visual Transforms

    • Transforms can be expressed by either
    • Individual Components
    • 4x4 Matrix
    • Both kinds are Animatable
    • Use helper methods on numerics classes
  21. Demo: Matrix Transform in action

    Slide 21 - Demo: Matrix Transform in action

  22. Demo: Matrix Transform in action

    Slide 22 - Demo: Matrix Transform in action

  23. Slide 23

    • Visual
    • Visual
    • Visual
    • Visual
    • Visual
    • Visual
    • Visual: how do composition and XAML content compose together seamlessly
    • XAML and Composition
    • < />
    • < />
    • < />
    • < />
    • < />
    • < />
    • Button
    • WebView
    • SwapChainPanel
    • Framework Element Layer
    • Visual Layer
  24. Drop down to realize more complex animations and effects with very little code

    Slide 24 - Drop down to realize more complex animations and effects with very little code

    • Scale: need to animate a lot of different elements simultaneously
    • Input-driven animations: like Sticky Headers, Parallax
    • Lower level toolkit for building richer custom controls
    • XAML and Composition
    • Why use the Visual Layer in XAML apps?
    • 80% of the time you will use the XAML
  25. Enable Windows.UI.Composition API for app*

    Slide 25 - Enable Windows.UI.Composition API for app*

    • Retrieve XAML UIElement that you want to add composition content to
    • Use static helper method on Windows.UI.Xaml.Hosting.ElementCompositionPreviewto retrieve composition visual (object)
    • Cast return value to ContainerVisual
    • Use Compositor property on visual you get to access the Compositor
    • Create composition objects and add them to
    • How to use Composition APIs in a XAML app
    • The model will change in the future.
    • *Temporary you need:
    • 1: Code snippet on next slide
    • 2: Conditional compilation symbol added to project
  26. Code Demo: XAML Integration

    Slide 26 - Code Demo: XAML Integration

  27. Code Demo: XAML Integration

    Slide 27 - Code Demo: XAML Integration

  28. Composition API Walkthrough:New Effects System

    Slide 28 - Composition API Walkthrough:New Effects System

    • New Effects System
    • New Animation System
    • Light-Weight Visual Layer
    • DirectX Interop
  29. Rich UI: High performance effects and blend modes.

    Slide 29 - Rich UI: High performance effects and blend modes.

    • Flexibility: Effects can be Customized, Animated and chained.
    • Consistency: Same effect descriptions used for composition, graphics, video (future)
    • Effects
    • New, real-time Effects system whose effects are applied as a content on a visual.
  30. Right now

    Slide 30 - Right now

    • Composite (13 modes)
    • Blend (21 modes)
    • Color source
    • Saturation
    • 2D Affine Transform
    • Many more to come. Considering…
    • Additional pixel and vertex shader effects (e.g. Lighting effects)
    • Time-based effects (e.g. Transition effects)
    • Types of Effects
  31. Code Demo: Add Circle mask to Images

    Slide 31 - Code Demo: Add Circle mask to Images

  32. Code Demo: Add Circle mask to Images

    Slide 32 - Code Demo: Add Circle mask to Images

  33. Composition API Walkthrough:New Animation System

    Slide 33 - Composition API Walkthrough:New Animation System

    • New Effects System
    • New Animation System
    • Light-Weight Visual Layer
    • DirectX Interop
  34. Declaratively animate Visual and Effect propertiesGeometry: Position, Size, Transform (in 3D space), Orientation (as quaternions in 3D space)Appearance: Opacity, Effect properties etc.

    Slide 34 - Declaratively animate Visual and Effect propertiesGeometry: Position, Size, Transform (in 3D space), Orientation (as quaternions in 3D space)Appearance: Opacity, Effect properties etc.

    • All animations are fluid, running in the Compositor process
    • Interrupted animations resume smoothly
    • Creation and scheduling: performance at scale
    • Modes: Explicit animations (today), Implicit animations (soon)
    • What does the Animation system do?
    • time
    • value
  35. Keyframe animationsAnimations as a function of time defined as a sequence of key frames.Control acceleration using easing functions: Linear, Cubic Bezier.Support for various property types: Scalar, Vector2/3/4, Quaternion (Future).

    Slide 35 - Keyframe animationsAnimations as a function of time defined as a sequence of key frames.Control acceleration using easing functions: Linear, Cubic Bezier.Support for various property types: Scalar, Vector2/3/4, Quaternion (Future).

    • Expression animationsAnimations as a function of a math expression, typically on another property’s value.Easily create complex user experiences: Sticky headers, Parallax, Scrolling indicators…Built-in functions: Abs, Clamp, Max, Min, Mod, Scale, Transform, Vector*, Matrix* E.g. animation.Expression = "foreground.Offset * (foreground.Size / background.Size)";
    • Explicit Animations
  36. Demo Applying animations to objects

    Slide 36 - Demo Applying animations to objects

  37. Demo Applying animations to objects

    Slide 37 - Demo Applying animations to objects

  38. Demo Applying animations to objects

    Slide 38 - Demo Applying animations to objects

  39. Composition API Walkthrough:New Animation System

    Slide 39 - Composition API Walkthrough:New Animation System

    • New Effects System
    • New Animation System
    • Light-Weight Visual Layer
    • DirectX Interop
  40. ImageVisual supports Native DirectX interop via native interfaces:

    Slide 40 - ImageVisual supports Native DirectX interop via native interfaces:

    • IImageVisual / ICompositionSurface / ICompositorInterop
    • Interop with Direct3D, Direct2D family, Win2D possible using this mechanism
    • Scenarios: Multi-layer game HUD, Advanced video playback
    • Requires native code to hook up
    • Full set of animation / effects features continue to apply to ImageVisual
    • Considering for Future
    • Out-of-box support for Win2D
    • DirectX Interop
  41. Demo: Direct3D / ImageVisual interop

    Slide 41 - Demo: Direct3D / ImageVisual interop

  42. Demo: Direct3D / ImageVisual interop

    Slide 42 - Demo: Direct3D / ImageVisual interop

  43. Demo: Direct3D / ImageVisual interop

    Slide 43 - Demo: Direct3D / ImageVisual interop

  44. Demo: Win2D Interop

    Slide 44 - Demo: Win2D Interop

  45. What’s coming in RTM & beyond: how to take advantage of our APIs and help shape our feature set!

    Slide 45 - What’s coming in RTM & beyond: how to take advantage of our APIs and help shape our feature set!

    • Over to you
    • Contact us: WinComp@microsoft.com
    • Follow us on Twitter: @wincomposition
  46. What’s coming in RTM & beyond: how to take advantage of our APIs and help shape our feature set!

    Slide 46 - What’s coming in RTM & beyond: how to take advantage of our APIs and help shape our feature set!

    • Over to you
    • Contact us: WinComp@microsoft.com
    • Follow us on Twitter: @wincomposition
  47. Usable now in Insider builds of Windows 10 / Visual Studio 2015 SDK:

    Slide 47 - Usable now in Insider builds of Windows 10 / Visual Studio 2015 SDK:

    • Initial WinRT API surface including Visual Tree, Animation, Effects, XAML Interop
    • We want your feedback!
    • For Windows 10 RTM build, APIs will be restricted to in-box callers only
    • Target: end of 2015 final V1 API surface will be available and callable by any store app.
    • Composition in Windows 10 RTM
    • Composition between now and Windows 10 RTM
  48. Roadmap

    Slide 48 - Roadmap

    • Available for Preview
    • in Insider Builds Today
    • New APIs will light up in successive flights
    • Enhanced Multi-Threading
    • Enhanced Multi-Threading
    • Broader Effects Library
    • Implicit Animations
    • Path Animations
    • Enhanced Interop with XAML, Win2D
    • Tree Effects
    • And more.. Let us know what would be most impactful for your apps!
    • Some things we’re thinking about..
    • Light-Weight Visual Layer
    • Rendering Engine
    • Effects System
    • Animation System
    • WinRT
    • Programming Model
    • _
    • Unified Compositor
  49. Other Talks:

    Slide 49 - Other Talks:

    • 737: “Use new Motion and Effects features to captivate users and truly bring your app to life”
    • 631: “Introducing Win2D: DirectX-powered Drawing in C#”
    • 733: “API Contracts (or How I Learned to Stop…)”
    • MSDN Documentation
    • Developer Forums
    • Samples from this talk are on GitHub
    • Contact us: WinComp@microsoft.com
    • Follow us on Twitter: @wincomposition
    • Call to Action
    • We
    • Your Feedback