1. Microsoft Build 2016
1/16/2019 1:17 PM
Adding Interactions in the Visual Layer to Create Customized & Responsive Experiences
Anthony Young & Lindsay Kubasik
Developer & Program Manager
Windows UI Platform
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Demo Zoom 3D Microsoft Build 2016 1/16/2019 1:17 PM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Platform Basics Built-in Framework Functionality
1/16/2019 1:17 PM
Platform Basics
Built-in Framework Functionality
Controls like ScrollViewer and ListView
November Update Customizations
ManipulationPropertySet from XAML ScrollViewer starts to bridge the gap
Next Release of Windows
More flexibility for customizable input driven animations
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Demo HelloInteractionTracker Microsoft Build 2016 1/16/2019 1:17 PM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
Canvas
Other
Photo
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
Canvas
InteractionTracker
Other
Photo
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
VisualInteractionSource
Canvas
InteractionTracker
Other
Photo
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
VisualInteractionSource
Canvas
InteractionTracker
Other
Photo
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
VisualInteractionSource
Canvas
InteractionTracker
Other
Photo
ExpressionAnimation
“tracker.position”
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Root
VisualInteractionSource
Canvas
InteractionTracker
Other
Photo
ExpressionAnimation
“tracker.position”
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. Interactions in the Visual Layer
1/16/2019 1:17 PM
Interactions in the Visual Layer
Visual Interaction
Source
Interaction
Tracker
Expression Animation Engine
Target Visuals
User Input
Manipulation Data
Bindable Properties
Animation
Updates
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Demo HelloInteractionTracker Pull to Animate Microsoft Build 2016
1/16/2019 1:17 PM
Demo
HelloInteractionTracker
Pull to Animate
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. What about the Customizations?
1/16/2019 1:17 PM
What about the Customizations?
Feel of Inertia
Autoscroll
Page Up/Page Down
Snap Points
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Updating InteractionTracker’s Motion
1/16/2019 1:17 PM
Updating InteractionTracker’s Motion
Simple Properties
Decay Rate, Min/Max Position
Updating Position & Scale
Direct Updates, Animating Updates
Complex Conditional Modifiers
Endpoint, Motion
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. Defining Motion during Inertia
1/16/2019 1:17 PM
Defining Motion during Inertia
Force-Based System
Animates InteractionTracker’s Acceleration
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Demo Inertia Modifiers 3D Zoom Walkthrough Microsoft Build 2016
1/16/2019 1:17 PM
Demo
Inertia Modifiers
3D Zoom Walkthrough
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. Demo Zoom 3D Walkthrough Microsoft Build 2016 1/16/2019 1:17 PM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

18. Call to Action
Check out sample code & ask questions via GitHub (
Follow us on
Re-visit Build on Channel 9
Continue your education at Microsoft Virtual Academy online