Page 46 - MSDN Magazine, April 2018

the two steps or else the source element may hang in the view and end up looking weird. With the implicit animation engine shipped in Windows 10, if you prepare an animation but don’t start it within three seconds, the system will dispose of it.
For this scenario I’m going to use ListView with some text and images, using the code provided in Figure 2. Both Listview and Gridview have two methods added specifically for connected animations: PrepareConnectedAnimations and TryStartConnected- AnimationAsync.
With connected animations, you can preserve context for the user and increase engagement, such as by animating the clicked item from a list to the target location of the details page.
The key element in this list is the x:Name of the image in the DataTemplate. This is the name that I’ll use when I create the ConnectedAnimation and prepare it for the destination page. When an item in the collection is clicked it will navigate to the new page. I’ll prepare the connected animation during the click method. The event handler set on the list Collection_ItemClicked is where I prepare the ConnectedAnimation before navigation. The PrepareConnectedAnimation method expects a unique key, the item, and the name of the element to be animated. In the method I’ve named my animation “ca1,” which will reference on the desti- nation page when the animation is started, as shown in Figure 3.
SuppressNavigationTransitionInfo blocks the default page transition animation from playing, and helps prevent it from interfering with the connected animation. Using the OnNavigated- Tomethodforthedestinationpage,IcreateaConnectedAnima- tion and pass in the unique key I created on the source page (“ca1”). Then I call TryStart and pass in the name of the XAML image element I want to animate to, using this XAML code:
<Image x:Name="detailedIamge" MaxHeight="400" Source="{x:Bind ImageLocation}" />
And this C# code:
ConnectedAnimation imageAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null) {
imageAnimation.TryStart(detailedIamge); }
This creates the one-way connected animation from the listview to the destination page. I still need to create another connected animation to handle the back navigation scenario. I prepare the
connected animation in the OnNavigateFrom override and give it a unique key, “ca2,” as shown in the following code:
protected override void OnNavigatedFrom(NavigationEventArgs e) {
base.OnNavigatedFrom(e);
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ca2", detailedIamge); }
The ca2 animation is started using the collections loaded method declared in the listview template, like so:
private async void Collection_Loaded(object sender, RoutedEventArgs e) {
if (_storeditem != null)
{
ConnectedAnimation backAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ca2");
if (backAnimation != null)
{
await collection.TryStartConnectedAnimationAsync(backAnimation, _
storeditem, "ConnectedElement"); }
} }
Figure 2 Setting Up ListView Collection to Animate
<ListView x:Name="Collection" ItemClick="Collection_ItemClick"
ItemsSource="{Binding Source={StaticResource ItemsViewSource}}" IsItemClickEnabled="True"
SelectionMode="None"
Loaded="Collection_Loaded"
Grid.Row="1"> <ListView.ItemTemplate>
<DataTemplate x:DataType="local:CustomDataObject"> <Grid Margin="0,12,0,12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150" /> <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- image to be animated-->
<Image x:Name="ConnectedElement" Source="{x:Bind ImageLocation}"
MaxHeight="100" Stretch="Fill" />
<StackPanel Margin="12,0,0,0" Grid.Column="1" >
<TextBlock Text="{x:Bind Title}" HorizontalAlignment="Left"
Margin="0,0,0,6" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{x:Bind Popularfor}" /> </StackPanel>
</StackPanel> </Grid>
</DataTemplate> </ListView.ItemTemplate>
</ListView>
Figure 3 PrepareConnectedAnimation Method
private void Collection_ItemClick(object sender, ItemClickEventArgs e) {
var container = collection.ContainerFromItem(e.ClickedItem) as ListViewItem;
if (container != null) {
_storeditem = container.Content as CustomDataObject;
var animation = collection.PrepareConnectedAnimation("ca1", _ storeditem, "ConnectedElement");
}
Frame.Navigate(typeof(DestinationPage), _storeditem); }
40 msdn magazine
Universal Windows Platform