how to make auto flip view XAML

Question

I have creaed flipview in XAML page i want to make that slides transtaction automatically how can i do that?

<StackPanel x:Name="StackPanel_1" Margin="541,42,71,160" Orientation="Vertical" Grid.Row="1">
        <FlipView x:Name="flipView1" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
            <Grid Margin="0,0,-8,-8">
                <Image Source="Assets/Logo.png" Width="480" Height="270" Stretch="UniformToFill"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="Logo" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20" Margin="0,0,8,8"/>
                </Border>
            </Grid>
            <Grid Margin="0,0,-8,-8">
                <Image Source="Assets/SplashScreen.png" Width="480" Height="270" Stretch="UniformToFill" />
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="Logo11111111" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20" Margin="0,0,8,8"/>
                </Border>
            </Grid>
            <Grid Height="270" Width="480">
                <Image Source="Assets/SmallLogo.png" Width="480" Height="270" Stretch="UniformToFill" />
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="Logo222222222" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20" Margin="0,0,8,8"/>
                </Border>
            </Grid>
        </FlipView>

Answer 1

I wrote a hacky prototype that shows how you can animate the entire cycle by rearranging the elements in the FlipView...

C#

using System.Collections;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App4
{
    public class CyclingFlipView : FlipView
    {
        public async Task Cycle()
        {
            if (this.ItemsSource != null)
            {
                var list = (IList)this.ItemsSource;

                if (list.Count == 0)
                {
                    return;
                }

                SelectionChangedEventHandler handler = null;
                var tcs = new TaskCompletionSource<bool>();
                handler = (s, e) =>
                {
                    tcs.SetResult(true);
                    this.SelectionChanged -= handler;
                };
                this.SelectionChanged += handler;
                this.SelectedIndex = (this.SelectedIndex + 1) % list.Count;
                await tcs.Task;
                await Task.Delay(500);
                var i = this.SelectedIndex;
                this.SelectedItem = null;

                var item = list[0];
                list.RemoveAt(0);
                list.Add(item);
                this.SelectedIndex = i - 1;
            }
            else if (this.Items != null)
            {
                if (this.Items.Count == 0)
                {
                    return;
                }

                SelectionChangedEventHandler handler = null;
                var tcs = new TaskCompletionSource<bool>();
                handler = (s, e) =>
                {
                    tcs.SetResult(true);
                    this.SelectionChanged -= handler;
                };
                this.SelectionChanged += handler;
                this.SelectedIndex = (this.SelectedIndex + 1) % this.Items.Count;
                await tcs.Task;
                await Task.Delay(500);
                var i = this.SelectedIndex;
                this.SelectedItem = null;

                var item = this.Items[0];
                this.Items.RemoveAt(0);
                this.Items.Add(item);
                this.SelectedIndex = i - 1;
            }
        }

        public async Task AutoCycle()
        {
            while (true)
            {
                this.Cycle();
                await Task.Delay(1000);
            }
        }
    }

    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            var fv = new CyclingFlipView();
            fv.ItemsSource = new ObservableCollection<int>(Enumerable.Range(0, 4));
            fv.ItemTemplate = (DataTemplate)this.Resources["ItemTemplate"];
            this.Content = fv;
            fv.AutoCycle();
        }
    }
}

XAML

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate
            x:Key="ItemTemplate">
            <Border
                Background="GreenYellow">
                <TextBlock
                    Text="{Binding}"
                    FontSize="144"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"/>
            </Border>
        </DataTemplate>
    </Page.Resources>
    <Grid
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

Answer 2

You'll need to update the flipview's SelectedIndex property.

The most straightforward would be to run a DispatcherTimer and increment SelectedIndex every however long you'd like. When it gets to the end then set it back to 0. The hitch is that the FlipView will animate when you switch the index by one, but not when you jump pages. If you want to loop back from the last page to the first it will jump rather than animate. You might want to reverse direction instead of going direct to 0.

int change = 1;

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(2);
timer.Tick += (o, a) =>
    {
        // If we'd go out of bounds then reverse
        int newIndex = flipView1.SelectedIndex + change;
        if (newIndex >= flipView1.Items.Count || newIndex < 0)
        {
            change *= -1;
        }

        flipView1.SelectedIndex += change;
    };

timer.Start();

If you want to set this up completely in XAML without code then you can create a Storyboarded animation in Xaml to animate the SelectedIndex and trigger it with an EventTriggerBehavior behavior when page loads.

<Page.Resources>
    <Storyboard x:Name="AutoFlipView" RepeatBehavior="Forever" AutoReverse="True">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Selector.SelectedIndex)" Storyboard.TargetName="flipView1">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>0</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>1</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>2</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>2</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Interactivity:Interaction.Behaviors>
    <Core:EventTriggerBehavior EventName="Loaded">
        <Media:ControlStoryboardAction Storyboard="{StaticResource AutoFlipView}"/>
    </Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>