Page 47 - MSDN Magazine, April 2018

I’m using the async TryStart method called on the listview, to ensure that the listview content is rehydrated before the animation starts. Typically with lists or dense views of data you have lots of second- ary data associated with the item—for example, mail subject, sender, date/time and the like. We can aid the user even further by animating these elements into view. This requires using CoordinatedAnimation,
which I can do by using the two-parameter overload for TryStart. First, I need to create an element on the destination page to show the appropriate content. I’m using a stackpanel with a text block inside and I’ve named the stackpanel CoordinatedPanel, as
shown here:
<StackPanel x:Name="CoordinatedPanel" Grid.Column="1" VerticalAlignment="Top" Margin="20,0">
<TextBlock Text="{x:Bind HeaderText}" Style="{ThemeResource SubheaderTextBlockStyle}" Margin="0,0,0,10" />
</StackPanel>
Then I use the overload for TryStart to reference both the con- nected animation and the UI element to coordinate with, like so:
ConnectedAnimation imageAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null) {
imageAnimation.TryStart(detailedIamge, new UIElement[] { CoordinatedPanel }); }
This will allow both the connected animation I created and any other animations on the UI to run at the same time, helping the user understand context faster with a more immersive experience.
A quick note: I avoid using connected animations if my UI depends on network requests or any long-running asynchronous operations between preparing and starting the animation. These scenarios will cause a perceived glitch in your application or create delays that detract from the impact of the animation. To compen- sate for these situations, consider loading assets and images into your application ahead of time.
Wrapping Up
Swipe gesture actions and connected animations are useful resources that can ease interaction, add visual context, and cre- ate a compelling and intuitive experience for your end users. In the case of swipe gesture actions, the interaction pattern is easy to implement and adds a new level of efficiency for the user that extends to track pads and pen users. These little interactions can add up when users repeat the same actions over and over again.
Connected animations aid the user by providing visual context when navigating between pages, while at the same time enabling an engaging experience. From a developer standpoint, connected animations can be employed incrementally at key moments in the application. The result: End users enjoy a more cohesive and compelling experience that motivates them to use the application more often. n
Lucas Haines works with the XAML Controls team at Microsoft focusing on de- sign and UI solutions for the Fluent Design System. He also worked three years at the Central Windows Design studio, where he helped shape the Fluent platform.
THanks to the following Microsoft technical experts for reviewing this article: Steven Moyes, Kiki Saintonge
msdnmagazine.com
Get news from MSDN in your inbox!
Sign up to receive the
MICROSOFT DEVELOPER NEWSLETTER, which delivers the latest resources, SDKs, downloads, partner offers, security news, and updates on national and local developer events.
magazine
msdn.microsoft.com/flashnewsletter