如何制作自动翻转视图XAML

时间:2014-10-12 12:50:56

标签: c# xaml windows-store-apps

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

2 个答案:

答案 0 :(得分:4)

您需要更新flipview的SelectedIndex属性。

最直接的方法是运行DispatcherTimer并逐渐增加SelectedIndex,无论你喜欢多长时间。当它到达结尾然后将其设置为0.问题是,当您将索引切换为1时,FlipView将动画,但不会在您跳转页面时动画。如果你想从最后一页回到第一页,它将跳转而不是动画。您可能想要反转方向而不是直接转到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中创建一个Storyboarded动画来设置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>

答案 1 :(得分:0)

我写了一个hacky原型,通过重新排列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>