locked
How to achieve FlipView flip through the code? RRS feed

  • Question

  • How to achieve FlipView flip through the code?

    I have  tried  it  by  FlipView.SelectedIndex, but flip animation missed.

    how can do that in code ( keep flip animation)?

    Thursday, February 9, 2012 10:16 AM

Answers

  • Your expectation of transition animation on selected index change is not unreasonable. We expect the same thing and are tracking this as an open issue to be fixed, hopefully for this release.

    Ashish Shetty, Program Manager, Microsoft | http://nerddawg.blogspot.com

    Wednesday, March 14, 2012 9:03 PM

All replies

  • Hi Leon,

    Can you get the behavior you want with data binding? Take a look at the FlipView sample for an example.

    If that doesn't do what you want can you please be more explicit about exactly what behavior you want, what your code is doing, and what behavior you are actually getting?

    --Rob

    Friday, February 10, 2012 4:07 AM
    Moderator
  • I think Leon is wanting to do something similar to what I want.

    Basically, lets assume I have an app with a FlipView control, inside that there are XX FlipViewItems - let's assume there's a fullscreen photo in each of the FlipView items. Now, in normal use, the user can scroll through the photos, and you get a nice smooth animation when scrolling from one photo to the next.

    Now - in my case, I also want an 'unattended' presentation - where if one of the Flipviews/Photos has been onscreen for X number of seconds, then it automatically moves to the next photo or view. Not a problem to do it through code - you can increment the SelectedIndex and the view/photo will change. However, there is no scrolling/animation involved - it basically just appears on the screen.

    I'm researching if it's possible to animate the flipview scrolling from code behind and I think that's what Leon was also asking.
    I'm still early in looking into this, but does anyone have any ideas?

    Thanks very much,
    Richard.

    Tuesday, March 13, 2012 8:59 PM
  • I'd recommend implementing your own control...

    Filip Skakun

    Tuesday, March 13, 2012 9:01 PM
  • I'd recommend implementing your own control...

    Filip Skakun

    It's looking like that is what may be required and in pre-metro days that's what we did - seems a shame to start from scratch though when the existing control has everything to do this, except for a way to have an animation when changing the SelectedIndex. Was hoping the inbuilt control would be able to do this. Will keep digging though.
    Wednesday, March 14, 2012 4:04 PM
  • Your expectation of transition animation on selected index change is not unreasonable. We expect the same thing and are tracking this as an open issue to be fixed, hopefully for this release.

    Ashish Shetty, Program Manager, Microsoft | http://nerddawg.blogspot.com

    Wednesday, March 14, 2012 9:03 PM
  • If you specify items as dependency objects - you can try this:

            <FlipView
                x:Name="MyFlipView">
                <ContentControl
                    x:Name="Item1"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center">
                    <StackPanel>
                        <TextBlock
                            Text="Item 1"
                            FontSize="72" />
                        <Button
                            x:Name="Button1"
                            HorizontalAlignment="Center"
                            Content="&gt;"
                            Click="Click" />
                    </StackPanel>
                </ContentControl>
                <ContentControl
                    x:Name="Item2"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center">
                    <StackPanel>
                        <TextBlock
                            Text="Item 2"
                            FontSize="72" />
                        <Button
                            x:Name="Button2"
                            HorizontalAlignment="Center"
                            Content="&lt;"
                            Click="Click" />
                    </StackPanel>
                </ContentControl>
            </FlipView>

            private async void Click(object sender, RoutedEventArgs e)
            {
                if (sender == Button1)
                {
                    await TransitionFlipView(MyFlipView, Item1, Item2, TimeSpan.FromSeconds(0.5), MyFlipView.ActualWidth / 2);
                }
                else
                {
                    await TransitionFlipView(MyFlipView, Item2, Item1, TimeSpan.FromSeconds(0.5), -MyFlipView.ActualWidth / 2);
                }
            }
    
            private async Task TransitionFlipView(FlipView flipView, Control item1, Control item2, TimeSpan duration, double fromHorizontalOffset = 200)
            {
                var item1TransitionTransform = new TranslateTransform();
                item1.RenderTransform = item1TransitionTransform;
    
                var slideOutTransition = new DoubleAnimation();
                Storyboard.SetTarget(slideOutTransition, item1TransitionTransform);
                Storyboard.SetTargetProperty(slideOutTransition, "TranslateTransform.X");
                slideOutTransition.From = 0;
                slideOutTransition.To = -fromHorizontalOffset;
                slideOutTransition.Duration = TimeSpan.FromSeconds(duration.TotalSeconds / 2);
                slideOutTransition.EasingFunction = new PowerEase { EasingMode = EasingMode.EaseIn, Power = 2 };
    
                var fadeOutTransition = new DoubleAnimation();
                Storyboard.SetTarget(fadeOutTransition, item1);
                Storyboard.SetTargetProperty(fadeOutTransition, "FrameworkElement.Opacity");
                fadeOutTransition.From = 1.0;
                fadeOutTransition.To = 0.0;
                fadeOutTransition.Duration = TimeSpan.FromSeconds(duration.TotalSeconds / 2);
                fadeOutTransition.EasingFunction = new PowerEase { EasingMode = EasingMode.EaseIn, Power = 2 };
    
                var transitionOutStoryboard = new Storyboard();
                transitionOutStoryboard.Children.Add(slideOutTransition);
                transitionOutStoryboard.Children.Add(fadeOutTransition);
                await BeginStoryboardAsync(transitionOutStoryboard);
    
                if (flipView != null)
                    flipView.SelectedItem = item2;
    
                var item2TransitionTransform = new TranslateTransform();
                item2.RenderTransform = item2TransitionTransform;
    
                var slideInTransition = new DoubleAnimation();
                Storyboard.SetTarget(slideInTransition, item2TransitionTransform);
                Storyboard.SetTargetProperty(slideInTransition, "TranslateTransform.X");
                slideInTransition.From = fromHorizontalOffset;
                slideInTransition.To = 0;
                slideInTransition.Duration = TimeSpan.FromSeconds(duration.TotalSeconds / 2);
                slideInTransition.EasingFunction = new PowerEase { EasingMode = EasingMode.EaseOut, Power = 2 };
    
                var fadeInTransition = new DoubleAnimation();
                Storyboard.SetTarget(fadeInTransition, item1);
                Storyboard.SetTargetProperty(fadeInTransition, "FrameworkElement.Opacity");
                fadeInTransition.From = 0.0;
                fadeInTransition.To = 1.0;
                fadeInTransition.Duration = TimeSpan.FromSeconds(duration.TotalSeconds / 2);
                fadeInTransition.EasingFunction = new PowerEase { EasingMode = EasingMode.EaseOut, Power = 2 };
    
                var transitionInStoryboard = new Storyboard();
                transitionInStoryboard.Children.Add(slideInTransition);
                transitionInStoryboard.Children.Add(fadeInTransition);
                await BeginStoryboardAsync(transitionInStoryboard);
            }
    
            public static async Task BeginStoryboardAsync(Storyboard storyboard)
            {
                var tcs = new TaskCompletionSource<object>();
    
                EventHandler<object> eh = null;
    
                eh = (s, e) =>
                {
                    storyboard.Completed -= eh;
                    tcs.SetResult(e);
                };
    
                storyboard.Completed += eh;
                storyboard.Begin();
                await tcs.Task;
            }
    


    Filip Skakun

    • Proposed as answer by Crazenezz Friday, July 12, 2013 10:35 AM
    Wednesday, March 14, 2012 10:05 PM
  • Hi, Filip.

    Thanks for your reply.

    Above sample works well for me, thanks again.

    //Leon

    Thursday, March 15, 2012 1:31 AM
  • Did this ever get resolved?
    Monday, October 22, 2012 3:15 PM
  • I haven't tried it, but perhaps this might help:

    http://dotnetbyexample.blogspot.com/2012/08/a-winrt-behavior-to-turn-flipview-into.html

    Filip Skakun

    Monday, October 22, 2012 3:59 PM
  • Hi.

    Are there any News about the "swipe-like" animation. In my actual App i would need it, because i´ve got a 2 Hyperlinks, which can be used also as navigation between 2 Grids in the FlipView.

    Ben

    Friday, May 3, 2013 12:39 PM