CODEWITHSUNDEEP
animationuwpuwp-xamlflipview
Steve0212
Steve0212

Reputation: 712

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.

Upvotes: 2

Views: 1093

Answers (2)

Mikael Koskinen
Mikael Koskinen

Reputation: 12916

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

Upvotes: 2

szilagyilev
szilagyilev

Reputation: 173

Didn't have a thorough look, but in the default template (https://msdn.microsoft.com/en-us/library/windows/apps/mt299124.aspx) there is a horizontal stackpanel for the items and a scrollviewer, so I don't really see way to do this.

Personally I think it would be easier to just write a custom control that fades the items of a collection in-and-out, when the user presses buttons or something

Upvotes: 0

Related Questions