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.
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();
}