XAML UWP - How to use animations in RenderTransform on elements in a ItemsControl (Data Binding)

Question

I want to show a collection of images with entry animations (opacity, translation and rescaling) in a UWP app.

How do I apply unique storyboards to each of these images within the ItemsControl.ItemTemplate DataTemplate so that each image has unique translations and sizes? While the animations are the same, their parameters do change from image to image.

Have been looking for several days on something that works reliably, and all I have found so far is stuff that will not work in UWP apps.

Answer 1

How do I apply unique storyboards to each of these images

Firstly, since you want each of these images has a different animation, I suggest to have a property for the image instance to indicate which animation the image will play.

Then secondly, we need to resolve the issue that with different property value to trigger different Storyboard. For this we could consider to use DataTriggerBehavior of XamlBehaviors package. Install the XamlBehaviors Nuget package through this link.

At last binding the corresponding Storyboard to the trigger it will work. The following is a completed working demo you could have a test.

XAML

...
xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
...
<ItemsControl x:Name="itemcontrol">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Resources>
                    <Storyboard x:Name="StoryBoardOpacity">
                        <DoubleAnimation
                            Storyboard.TargetName="img"
                            Storyboard.TargetProperty="Opacity"
                            From="0.0"
                            To="1.0"
                            Duration="0:0:5" />
                    </Storyboard>
                    <Storyboard x:Name="StoryboardScale">
                        <DoubleAnimation
                            Storyboard.TargetName="transform"
                            Storyboard.TargetProperty="ScaleX"
                            From="1.0"
                            To="2.0"
                            Duration="0:0:5" />
                    </Storyboard>
                </Grid.Resources>
                <Image
                    x:Name="img"
                    Width="100"
                    Height="100"
                    Source="{Binding imageurl}">
                    <Interactivity:Interaction.Behaviors>
                        <Interactions:DataTriggerBehavior
                            Binding="{Binding storyboard}"
                            ComparisonCondition="Equal"
                            Value="Opacity">
                            <Media:ControlStoryboardAction Storyboard="{StaticResource StoryBoardOpacity}" />
                        </Interactions:DataTriggerBehavior>
                        <Interactions:DataTriggerBehavior
                            Binding="{Binding storyboard}"
                            ComparisonCondition="Equal"
                            Value="Scale">
                            <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardScale}" />
                        </Interactions:DataTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                    <Image.RenderTransform>
                        <CompositeTransform x:Name="transform" />
                    </Image.RenderTransform>
                </Image>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Code behind

    private ObservableCollection<OneImage> imageSources;
    public MainPage()
    {
        this.InitializeComponent();
        imageSources = new ObservableCollection<OneImage>()
        {
            new OneImage()
            {
                imageurl="ms-appx:///Assets/caffe1.jpg",
                storyboard="Opacity"
            },
            new OneImage()
            {
                imageurl="ms-appx:///Assets/caffe2.jpg",
                storyboard="Opacity"
            },
            new OneImage()
            {
                imageurl="ms-appx:///Assets/caffe3.jpg",
                storyboard="Scale"
            }
        };
        itemcontrol.ItemsSource = imageSources;
    }

    public class OneImage
    {
        public string imageurl { get; set; }
        public string storyboard { get; set; }
    }