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