Wpf 在WinRT应用程序中设置应用程序栏图标的淡出可见性动画

所有默认的Windows 8应用程序在显示和隐藏应用程序栏图标时（基于上下文更改），对其应用程序栏图标使用相同的淡入淡出动画。谈到设置应用程序栏图标的可见性，但没有提到设置它们的动画

---

我希望我的应用程序栏图标使用相同的动画。当一个图标被隐藏时，它应该淡入透明状态，然后折叠，反之亦然。实现此动画的最佳方法是什么？

您可以修改情节提要，为按钮的“不透明度”属性添加动画，然后将可见性设置为“折叠”。您可以使用Blend使它变得简单。

如果您正在寻找类似的内容，您只需根据鼠标按下事件或某些值启动故事板即可。只是一个警告，下面提供的这些值只是一个粗略的示例，您需要仔细查看它们才能得到您想要的。您可以根据当前代码的组织方式，将故事板作为资源扔到多个地方。希望能有帮助

<!-- IN -->
<Storyboard x:Name="FadeButtonIn">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="0" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="1" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Visible</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>
<!-- OUT -->
<Storyboard x:Name="FadeButtonOut">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="1" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="0" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Collapsed</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>

看得见的
崩溃

如果您使用的是MVVM模式，下面是我编写的帮助器类：

public class FadeAnimatedVisibility
{
    public static readonly DependencyProperty IsVisibleProperty = DependencyProperty.RegisterAttached(
        "IsVisible", typeof(bool), typeof(FadeAnimatedVisibility), new PropertyMetadata(true, IsVisiblePropertyChanged));

    private static void IsVisiblePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = d as UIElement;
        if (uiElement == null) return;

        var visibility = e.NewValue as bool?;

        if (visibility == true)
        {
            Storyboard storyboard = new Storyboard();
            var fadeIn = new FadeInThemeAnimation();

            Storyboard.SetTarget(fadeIn, uiElement);

            storyboard.Children.Add(fadeIn);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Visible;
        }
        else
        {
            Storyboard storyboard = new Storyboard();
            var fadeOut = new FadeOutThemeAnimation();

            Storyboard.SetTarget(fadeOut, uiElement);

            storyboard.Children.Add(fadeOut);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Collapsed;
        }
    }

    public static void SetIsVisible(DependencyObject element, bool value)
    {
        element.SetValue(IsVisibleProperty, value);
    }

    public static bool GetIsVisible(DependencyObject element)
    {
        return (bool)element.GetValue(IsVisibleProperty);
    }
}

和XAML使用：

<StackPanel helpers:FadeAnimatedVisibility.IsVisible="{Binding YourProperty}"/>

---

我最终创建了一个子类to button，其中包含显示和隐藏的方法，每个方法都使用上面相应的故事板（但归结为代码而不是XAML）。它工作得很好！