如何制作自动翻转视图XAML

<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>

您需要更新flipview的SelectedIndex属性。

最简单的方法是运行DispatcherTimer，并根据需要每隔一段时间递增SelectedIndex。当它到达末尾时，将其设置回0。问题是，当您将索引切换一个时，"动画视图"将设置动画，但当您跳转页面时不会设置动画。如果你想从最后一页循环回到第一页，它会跳转而不是动画。您可能希望反转方向，而不是直接转到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();

如果你想在XAML中完全设置它而不需要代码，那么你可以在XAML中创建一个故事板动画来动画SelectedIndex，并在页面加载时用EventTriggerBehavior行为触发它。

<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>

我写了一个破解的原型，展示了如何通过重新排列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>