如何使用fadein/out动画翻转视图窗口8[c#/xaml]

我正在使用flipview和绑定数据。我想在更改时使用fadein/out动画。我正在使用Dispatchermer更改itmes（_timer.Tick+=ChangeImage；）

将数据绑定到flipview

<FlipView x:Name="TheFlipView"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"/>

我尝试了故事板和FadeInThemeAnimation类，但我不能

---

您能帮助我吗？

这里有一个来自WinRT XAML Toolkit的类，您可以使用它来淡入/淡出一些简单的调用，如

myFlipView.FadeOut（）

。您可以将代码更改为以下内容：

private async void ChangeItems(object sender, object o)
{   
    var totalItems = TheFlipView.Items.Count;
    var newItemIndex = (TheFlipView.SelectedIndex + 1) % totalItems;
    await TheFlipView.FadeOut();
    TheFlipView.SelectedIndex = newItemIndex;
    TheFlipView.FadeIn();
}     

扩展类：

public static class UIElementAnimationExtensions
{
    #region AttachedFadeStoryboard
    /// <summary>
    /// AttachedFadeStoryboard Attached Dependency Property
    /// </summary>
    public static readonly DependencyProperty AttachedFadeStoryboardProperty =
        DependencyProperty.RegisterAttached(
            "AttachedFadeStoryboard",
            typeof(Storyboard),
            typeof(UIElementAnimationExtensions),
            new PropertyMetadata(null, OnAttachedFadeStoryboardChanged));

    /// <summary>
    /// Gets the AttachedFadeStoryboard property. This dependency property 
    /// indicates the currently running custom fade in/out storyboard.
    /// </summary>
    private static Storyboard GetAttachedFadeStoryboard(DependencyObject d)
    {
        return (Storyboard)d.GetValue(AttachedFadeStoryboardProperty);
    }

    /// <summary>
    /// Sets the AttachedFadeStoryboard property. This dependency property 
    /// indicates the currently running custom fade in/out storyboard.
    /// </summary>
    private static void SetAttachedFadeStoryboard(DependencyObject d, Storyboard value)
    {
        d.SetValue(AttachedFadeStoryboardProperty, value);
    }

    /// <summary>
    /// Handles changes to the AttachedFadeStoryboard property.
    /// </summary>
    /// <param name="d">
    /// The <see cref="DependencyObject"/> on which
    /// the property has changed value.
    /// </param>
    /// <param name="e">
    /// Event data that is issued by any event that
    /// tracks changes to the effective value of this property.
    /// </param>
    private static void OnAttachedFadeStoryboardChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        Storyboard oldAttachedFadeStoryboard = (Storyboard)e.OldValue;
        Storyboard newAttachedFadeStoryboard = (Storyboard)d.GetValue(AttachedFadeStoryboardProperty);
    }
    #endregion

    #region FadeIn()
    /// <summary>
    /// Fades the element in using the FadeInThemeAnimation.
    /// </summary>
    /// <remarks>
    /// Opacity property of the element is not affected.<br/>
    /// The duration of the visible animation itself is not affected by the duration parameter. It merely indicates how long the Storyboard will run.<br/>
    /// If FadeOutThemeAnimation was not used on the element before - nothing will happen.<br/>
    /// </remarks>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <returns></returns>
    public static async Task FadeIn(this UIElement element, TimeSpan? duration = null)
    {
        ((FrameworkElement)element).Visibility = Visibility.Visible;
        var fadeInStoryboard = new Storyboard();
        var fadeInAnimation = new FadeInThemeAnimation();

        if (duration != null)
        {
            fadeInAnimation.Duration = duration.Value;
        }

        Storyboard.SetTarget(fadeInAnimation, element);
        fadeInStoryboard.Children.Add(fadeInAnimation);
        await fadeInStoryboard.BeginAsync();
    } 
    #endregion

    #region FadeOut()
    /// <summary>
    /// Fades the element out using the FadeOutThemeAnimation.
    /// </summary>
    /// <remarks>
    /// Opacity property of the element is not affected.<br/>
    /// The duration of the visible animation itself is not affected by the duration parameter. It merely indicates how long the Storyboard will run.<br/>
    /// If FadeOutThemeAnimation was already run before and FadeInThemeAnimation was not run after that - nothing will happen.<br/>
    /// </remarks>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <returns></returns>
    public static async Task FadeOut(this UIElement element, TimeSpan? duration = null)
    {
        var fadeOutStoryboard = new Storyboard();
        var fadeOutAnimation = new FadeOutThemeAnimation();

        if (duration != null)
        {
            fadeOutAnimation.Duration = duration.Value;
        }

        Storyboard.SetTarget(fadeOutAnimation, element);
        fadeOutStoryboard.Children.Add(fadeOutAnimation);
        await fadeOutStoryboard.BeginAsync();
    } 
    #endregion

    #region FadeInCustom()
    /// <summary>
    /// Fades the element in using a custom DoubleAnimation of the Opacity property.
    /// </summary>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <param name="easingFunction"> </param>
    /// <returns></returns>
    public static async Task FadeInCustom(this UIElement element, TimeSpan? duration = null, EasingFunctionBase easingFunction = null, double targetOpacity = 1.0)
    {
        CleanUpPreviousFadeStoryboard(element);

        var fadeInStoryboard = new Storyboard();
        var fadeInAnimation = new DoubleAnimation();

        if (duration == null)
            duration = TimeSpan.FromSeconds(0.4);

        fadeInAnimation.Duration = duration.Value;
        fadeInAnimation.To = targetOpacity;
        fadeInAnimation.EasingFunction = easingFunction;

        Storyboard.SetTarget(fadeInAnimation, element);
        Storyboard.SetTargetProperty(fadeInAnimation, "Opacity");
        fadeInStoryboard.Children.Add(fadeInAnimation);
        SetAttachedFadeStoryboard(element, fadeInStoryboard);
        await fadeInStoryboard.BeginAsync();
        element.Opacity = targetOpacity;
        fadeInStoryboard.Stop();
    }
    #endregion

    #region FadeOutCustom()
    /// <summary>
    /// Fades the element out using a custom DoubleAnimation of the Opacity property.
    /// </summary>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <param name="easingFunction"> </param>
    /// <returns></returns>
    public static async Task FadeOutCustom(this UIElement element, TimeSpan? duration = null, EasingFunctionBase easingFunction = null)
    {
        CleanUpPreviousFadeStoryboard(element); 

        var fadeOutStoryboard = new Storyboard();
        var fadeOutAnimation = new DoubleAnimation();

        if (duration == null)
            duration = TimeSpan.FromSeconds(0.4);

        fadeOutAnimation.Duration = duration.Value;
        fadeOutAnimation.To = 0.0;
        fadeOutAnimation.EasingFunction = easingFunction;

        Storyboard.SetTarget(fadeOutAnimation, element);
        Storyboard.SetTargetProperty(fadeOutAnimation, "Opacity");
        fadeOutStoryboard.Children.Add(fadeOutAnimation);
        SetAttachedFadeStoryboard(element, fadeOutStoryboard);
        await fadeOutStoryboard.BeginAsync();
        element.Opacity = 0.0;
        fadeOutStoryboard.Stop();
    } 
    #endregion

    #region CleanUpPreviousFadeStoryboard()
    public static void CleanUpPreviousFadeStoryboard(this UIElement element)
    {
        var attachedFadeStoryboard = GetAttachedFadeStoryboard(element);

        if (attachedFadeStoryboard != null)
        {
            attachedFadeStoryboard.Stop();
        }
    }
    #endregion
}

公共静态类UIElementAnimationExtensions
{
#区域附加视频情节提要
/// 
///AttachedFadeStoryboard附加的依赖项属性
/// 
公共静态只读从属属性AttachedFadstoryBoardProperty=
DependencyProperty.RegisterAttached(
“AttachedFadeStoryboard”，
类型（故事板），
类型（UIElementAnimationExtensions），
新的PropertyMetadata（null，OnAttachedFadeStoryboardChanged））；
/// 
///获取AttachedFadeStoryboard属性。此依赖项属性
///指示当前正在运行的自定义淡入/淡出情节提要。
/// 
私有静态情节提要GetAttachedFadeStoryboard（DependencyObject d）
{
返回（情节提要）d.GetValue（AttachedFadeStoryboard属性）；
}
/// 
///设置AttachedFadeStoryboard属性。此依赖项属性
///指示当前正在运行的自定义淡入/淡出情节提要。
/// 
私有静态void SetAttachedFadeStoryboard（DependencyObject d，Storyboard值）
{
d、 SetValue（AttachedFadeStoryboard属性，值）；
}
/// 
///处理对AttachedFadeStoryboard属性的更改。
/// 
/// 
///上面的
///属性的值已更改。
/// 
/// 
///由以下事件发布的事件数据：
///跟踪对此属性的有效值所做的更改。
/// 
TachedFadeStoryboard上的私有静态无效已更改(
DependencyObject d，DependencyPropertyChangedEventArgs e）
{
故事板oldAttachedFadeStoryboard=（故事板）e.OldValue；
情节提要newAttachedFadeStoryboard=（情节提要）d.GetValue（AttachedFadeStoryboard属性）；
}
#端区
#区域法代因（）
/// 
///使用FadeInTheme动画使元素淡入淡出。
/// 
/// 
///元素的不透明度属性不受影响。

///可见动画本身的持续时间不受持续时间参数的影响。它仅指示故事板将运行多长时间。

///如果之前未在元素上使用淡出，则不会发生任何情况。

/// 
/// 
/// 
/// 
公共静态异步任务FadeIn（此UIElement元素，TimeSpan？duration=null）
{
（（FrameworkElement）元素）。可见性=可见性。可见；
var fadeInStoryboard=新故事板（）；
var fadeInAnimation=新的FadeInThemeAnimation（）；
if（持续时间！=null）
{
fadeInAnimation.Duration=Duration.Value；
}
故事板.SetTarget（fadeInAnimation，元素）；
FadeInnstoryBoard.Children.Add（fadeInAnimation）；
等待FadeInstalleryBoard.BeginAsync（）；
} 
#端区
#区域衰减（）
/// 
///使用“淡出”选项淡出元素。
/// 
/// 
///元素的不透明度属性不受影响。

///可见动画本身的持续时间不受持续时间参数的影响。它仅指示故事板将运行多长时间。

///如果FadeOutThemeAnimation在此之前已运行，而FadeInThemeAnimation在此之后未运行-则不会发生任何事情。

/// 
/// 
/// 
/// 
公共静态异步任务淡出（此UIElement元素，TimeSpan？duration=null）
{
var fadeOutStoryboard=新故事板（）；
var fadeutanimation=新的fadeutthemeanimation（）；
if（持续时间！=null）
{
fadeOutAnimation.Duration=Duration.Value；
}
情节提要.SetTarget（淡出动画，元素）；
fadeOutStoryboard.Children.Add（fadeOutAnimation）；
等待衰减Toryboard.BeginAsync（）；
} 
#端区
#区域FadeInCustom（）
/// 
///使用“不透明度”特性的自定义动画淡入元素。
/// 
/// 
/// 
///  
/// 
公共静态异步任务FadeInCustom（此UIElement元素，TimeSpan？duration=null，EasingFunctionBase easingFunction=null，double TargetCapacity=1.0）
{
CleanUpPreviousFadeStoryboard（元件）；
var fadeInStoryboard=新故事板（）；
var fadeInAnimation=new DoubleAnimation（）；
if（持续时间==null）
持续时间=从秒开始的时间跨度（0.4）；
fadeInAnimation.Duration=Duration.Value；
fadeInAnimation.To=目标产能；
fadeInAnimation.EasingFunction=EasingFunction；
故事板.SetTarget（fadeInAnimation，元素）；
情节提要.SetTargetProperty（fadeInAnimation，“不透明度”）；
FadeInnstoryBoard.Children.Add（fadeInAnimation）；
SetAttachedFadeStoryboard（元素，fadeInStoryboard）；
等待FadeInstalleryBoard.BeginAsync（）；
元素。不透明度=目标产能；
FadeInstryBoard.Stop（）；
}
#端区
#区域淡出自定义（）
/// 
///使用“不透明度”属性的自定义动画淡出元素。
/// 
/// 
/// 
///  
/// 
公共静态异步任务淡出自定义（此UIElement元素，TimeSpan？duration=null，EasingFunctionBase easingFunction=null）
{
CleanUpPreviousFadeStoryboard（元件）；
var fadeOutStoryboard=新故事板（）；
var fadeOutAnimation=新的DoubleAnimation（）；
if（持续时间==null）
持续时间=TimeSpan.FromSeconds
public static class UIElementAnimationExtensions
{
    #region AttachedFadeStoryboard
    /// <summary>
    /// AttachedFadeStoryboard Attached Dependency Property
    /// </summary>
    public static readonly DependencyProperty AttachedFadeStoryboardProperty =
        DependencyProperty.RegisterAttached(
            "AttachedFadeStoryboard",
            typeof(Storyboard),
            typeof(UIElementAnimationExtensions),
            new PropertyMetadata(null, OnAttachedFadeStoryboardChanged));

    /// <summary>
    /// Gets the AttachedFadeStoryboard property. This dependency property 
    /// indicates the currently running custom fade in/out storyboard.
    /// </summary>
    private static Storyboard GetAttachedFadeStoryboard(DependencyObject d)
    {
        return (Storyboard)d.GetValue(AttachedFadeStoryboardProperty);
    }

    /// <summary>
    /// Sets the AttachedFadeStoryboard property. This dependency property 
    /// indicates the currently running custom fade in/out storyboard.
    /// </summary>
    private static void SetAttachedFadeStoryboard(DependencyObject d, Storyboard value)
    {
        d.SetValue(AttachedFadeStoryboardProperty, value);
    }

    /// <summary>
    /// Handles changes to the AttachedFadeStoryboard property.
    /// </summary>
    /// <param name="d">
    /// The <see cref="DependencyObject"/> on which
    /// the property has changed value.
    /// </param>
    /// <param name="e">
    /// Event data that is issued by any event that
    /// tracks changes to the effective value of this property.
    /// </param>
    private static void OnAttachedFadeStoryboardChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        Storyboard oldAttachedFadeStoryboard = (Storyboard)e.OldValue;
        Storyboard newAttachedFadeStoryboard = (Storyboard)d.GetValue(AttachedFadeStoryboardProperty);
    }
    #endregion

    #region FadeIn()
    /// <summary>
    /// Fades the element in using the FadeInThemeAnimation.
    /// </summary>
    /// <remarks>
    /// Opacity property of the element is not affected.<br/>
    /// The duration of the visible animation itself is not affected by the duration parameter. It merely indicates how long the Storyboard will run.<br/>
    /// If FadeOutThemeAnimation was not used on the element before - nothing will happen.<br/>
    /// </remarks>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <returns></returns>
    public static async Task FadeIn(this UIElement element, TimeSpan? duration = null)
    {
        ((FrameworkElement)element).Visibility = Visibility.Visible;
        var fadeInStoryboard = new Storyboard();
        var fadeInAnimation = new FadeInThemeAnimation();

        if (duration != null)
        {
            fadeInAnimation.Duration = duration.Value;
        }

        Storyboard.SetTarget(fadeInAnimation, element);
        fadeInStoryboard.Children.Add(fadeInAnimation);
        await fadeInStoryboard.BeginAsync();
    } 
    #endregion

    #region FadeOut()
    /// <summary>
    /// Fades the element out using the FadeOutThemeAnimation.
    /// </summary>
    /// <remarks>
    /// Opacity property of the element is not affected.<br/>
    /// The duration of the visible animation itself is not affected by the duration parameter. It merely indicates how long the Storyboard will run.<br/>
    /// If FadeOutThemeAnimation was already run before and FadeInThemeAnimation was not run after that - nothing will happen.<br/>
    /// </remarks>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <returns></returns>
    public static async Task FadeOut(this UIElement element, TimeSpan? duration = null)
    {
        var fadeOutStoryboard = new Storyboard();
        var fadeOutAnimation = new FadeOutThemeAnimation();

        if (duration != null)
        {
            fadeOutAnimation.Duration = duration.Value;
        }

        Storyboard.SetTarget(fadeOutAnimation, element);
        fadeOutStoryboard.Children.Add(fadeOutAnimation);
        await fadeOutStoryboard.BeginAsync();
    } 
    #endregion

    #region FadeInCustom()
    /// <summary>
    /// Fades the element in using a custom DoubleAnimation of the Opacity property.
    /// </summary>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <param name="easingFunction"> </param>
    /// <returns></returns>
    public static async Task FadeInCustom(this UIElement element, TimeSpan? duration = null, EasingFunctionBase easingFunction = null, double targetOpacity = 1.0)
    {
        CleanUpPreviousFadeStoryboard(element);

        var fadeInStoryboard = new Storyboard();
        var fadeInAnimation = new DoubleAnimation();

        if (duration == null)
            duration = TimeSpan.FromSeconds(0.4);

        fadeInAnimation.Duration = duration.Value;
        fadeInAnimation.To = targetOpacity;
        fadeInAnimation.EasingFunction = easingFunction;

        Storyboard.SetTarget(fadeInAnimation, element);
        Storyboard.SetTargetProperty(fadeInAnimation, "Opacity");
        fadeInStoryboard.Children.Add(fadeInAnimation);
        SetAttachedFadeStoryboard(element, fadeInStoryboard);
        await fadeInStoryboard.BeginAsync();
        element.Opacity = targetOpacity;
        fadeInStoryboard.Stop();
    }
    #endregion

    #region FadeOutCustom()
    /// <summary>
    /// Fades the element out using a custom DoubleAnimation of the Opacity property.
    /// </summary>
    /// <param name="element"></param>
    /// <param name="duration"></param>
    /// <param name="easingFunction"> </param>
    /// <returns></returns>
    public static async Task FadeOutCustom(this UIElement element, TimeSpan? duration = null, EasingFunctionBase easingFunction = null)
    {
        CleanUpPreviousFadeStoryboard(element); 

        var fadeOutStoryboard = new Storyboard();
        var fadeOutAnimation = new DoubleAnimation();

        if (duration == null)
            duration = TimeSpan.FromSeconds(0.4);

        fadeOutAnimation.Duration = duration.Value;
        fadeOutAnimation.To = 0.0;
        fadeOutAnimation.EasingFunction = easingFunction;

        Storyboard.SetTarget(fadeOutAnimation, element);
        Storyboard.SetTargetProperty(fadeOutAnimation, "Opacity");
        fadeOutStoryboard.Children.Add(fadeOutAnimation);
        SetAttachedFadeStoryboard(element, fadeOutStoryboard);
        await fadeOutStoryboard.BeginAsync();
        element.Opacity = 0.0;
        fadeOutStoryboard.Stop();
    } 
    #endregion

    #region CleanUpPreviousFadeStoryboard()
    public static void CleanUpPreviousFadeStoryboard(this UIElement element)
    {
        var attachedFadeStoryboard = GetAttachedFadeStoryboard(element);

        if (attachedFadeStoryboard != null)
        {
            attachedFadeStoryboard.Stop();
        }
    }
    #endregion
}

    public async static Task BeginAsync(this Storyboard myStoryboard)
    {
        SemaphoreSlim signal = new SemaphoreSlim(0, 1);
        EventHandler<object> eventHandler = new EventHandler<object>(
            (sender, args) => 
            {
                signal.Release();
            }
            );
        myStoryboard.Completed += eventHandler;
        myStoryboard.Begin();
        await signal.WaitAsync();
        myStoryboard.Completed -= eventHandler;
    }