3

すべてのデフォルトのWindows8アプリは、（コンテキストの変更に基づいて）表示および非表示にするときに、アプリバーアイコンに同じフェードアニメーションを使用します。このページでは、アプリバーアイコンの表示設定について説明していますが、それらのアニメーションについては触れていません。

アプリバーのアイコンで同じアニメーションを使用したいのですが。アイコンが非表示になると、アイコンは透明にフェードしてから折りたたまれ、表示されると逆になります。このアニメーションを実現するための最良の方法は何ですか？

4

3 に答える 3

4

これに似たものを探している場合は、マウスダウンイベントや何らかの値に基づいてストーリーボードを起動します。警告です。以下に示すこれらの値は大まかな例です。必要な値を正確に取得するには、これらの値を調整する必要があります。とにかく、現在コードをどのように整理しているかに基づいて、ストーリーボードをリソースとしてさまざまな場所に投げることができます。それが役に立てば幸い。

<!-- 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>
于 2012-11-30T20:23:27.250 に答える
1

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}"/>
于 2015-12-15T16:13:31.213 に答える
0

ストーリーボードを変更して、ボタンの不透明度プロパティのアニメーションを追加した後、可視性を折りたたみに設定できます。Blendを使用すると簡単にできます。

于 2012-11-30T19:58:17.527 に答える