animationuwpuwp-xamlflipview

Change UWP FlipView


Is it possible to change the animation effect when changing images in an UWP Flipview control? Instead of sliding in, I would prefer a cross fade effect.

I did not see a way to do it, but I wanted to confirm. Any help is appreciated.

Thanks.


Solution

  • You should be able to override the animations manually, in code behind. First, disable the built-in animation using UseTouchAnimationsForAllNavigation="False".

        <FlipView x:Name="FlipView" UseTouchAnimationsForAllNavigation="False" SelectionChanged="Selector_OnSelectionChanged" >
            <FlipView.Items>
                <Grid Background="Red"></Grid>
                <Grid Background="Blue"></Grid>
                <Grid Background="Green"></Grid>
            </FlipView.Items>
        </FlipView>
    

    Then, run storyboards in codebehind:

        private void Selector_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count <= 0) return;
            if (e.RemovedItems.Count <= 0) return;
    
            var newSelectedItem = FlipView.ItemContainerGenerator.ContainerFromItem(e.AddedItems[0]) as FlipViewItem;
            var previousSelectedItem = FlipView.ItemContainerGenerator.ContainerFromItem(e.RemovedItems[0]) as FlipViewItem;
    
            if (newSelectedItem == null) return;
            if (previousSelectedItem == null) return;
    
            var duration = new Duration(TimeSpan.FromMilliseconds(500));
    
            var hideAnimation = new DoubleAnimation
            {
                From = 1.0,
                To = 0.0,
                AutoReverse = false,
                Duration = duration
            };
    
            var hideSb = new Storyboard();
            hideSb.Children.Add(hideAnimation);
            Storyboard.SetTargetProperty(hideSb, "Opacity");
            Storyboard.SetTarget(hideSb, previousSelectedItem);
    
            hideSb.Begin();
    
            var showAnimation = new DoubleAnimation
            {
                From = 0.0,
                To = 1.0,
                AutoReverse = false,
                Duration = duration
            };
    
            var showSb = new Storyboard();
            showSb.Children.Add(showAnimation);
            Storyboard.SetTargetProperty(showSb, "Opacity");
            Storyboard.SetTarget(showSb, newSelectedItem);
    
            showSb.Begin();
        }