コントロールでのWPFフェードアウト

Question

WPFアプリには、ユーザーアクション（データの保存、削除など）の完了後に表示するフィードバックコントロールがあります。可視性は開始時に非表示に設定され、スタイルはリソースとして定義されたanimateFadeOutスタイルに設定されます（以下を参照）。次に、テキストとコントロールの可視性をC＃コードで表示するように設定し、フィードバックコントロールにメッセージを表示させ、5秒後にフェードアウトして非表示のままにします（Visibility.Hidden）。

次のXAMLは、control.Visiblity = Visibility.Visibleを初めて呼び出したときに機能しますが、2回目にはコントロールが再表示されません。これは、フィードバックコントロールを制御するアニメーションがまだ実行されているためだと思います。次に、FillBehaviorを「Stop」に設定しようとしましたが、コントロールが再び表示されるようになり、非表示にします。次に、FillBehavior = "Stop"を使用して、「不透明度= 0の場合、可視性を非表示に設定」というトリガーを設定しようとしました。トリガーが起動しなかったようで、アニメーションが完了した後、もう一度目に見えるコントロールが残っていました。

ここで私が間違っていることを指摘するのを手伝ってください。

または、5秒後にフェードし、何度も呼び出すことができるコントロールを表示するためのより良い方法を提案できれば幸いです。

ありがとう！

<Style TargetType="{x:Type FrameworkElement}" x:Key="animateFadeOut">
        <Style.Triggers>
            <Trigger Property="Visibility" Value="Visible">
                <Trigger.EnterActions>
                    <BeginStoryboard >
                        <Storyboard>
                            <DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
                         From="1.0" To="0.0" Duration="0:0:0.5"/>
                        </Storyboard>
                    </BeginStoryboard>             
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers> 
    </Style>

Answer 1

問題は、アニメーションが完了した後も、コントロールにVisibility = Visibleが残っているため、再度入力できないことです。
私はむしろ、最初にコントロールを表示し、次にそれを非表示にする、すべてを行うアニメーションを使用したいと思います。

<Storyboard x:Key="animate">
    <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Visible</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2"/>
    <DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/>
    <ObjectAnimationUsingKeyFrames BeginTime="0:0:5.5" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Hidden</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

そしてそれを次のように使用します：

((Storyboard)FindResource("animate")).Begin(someControl);

Answer 2

リズは、可視性がまだ可視であることについて正しいです。 alpha-mouseは、ある時点でHiddenに戻す必要があることも正しいです。ただし、アニメーションが次のように完了する前に元に戻すと、機能しません。

MyControl.Visibility = System.Windows.Visibility.Visible;
MyControl.Visibility = System.Windows.Visibility.Hidden;

アニメーションの優先順位が高いため（ [〜＃〜] msdn [〜＃〜] ）

Storyboard.Completedイベントで非表示に戻すことができます。

private void Show()
    {
        MyControl.Visibility = System.Windows.Visibility.Visible;

        var a = new DoubleAnimation
                    {
                        From = 1.0,
                        To = 0.0,
                        FillBehavior= FillBehavior.Stop,
                        BeginTime = TimeSpan.FromSeconds(2),
                        Duration = new Duration(TimeSpan.FromSeconds(0.5))
                    };
        var storyboard = new Storyboard();

        storyboard.Children.Add(a);
        Storyboard.SetTarget(a, MyControl);
        Storyboard.SetTargetProperty(a, new PropertyPath(OpacityProperty));
        storyboard.Completed += delegate { MyControl.Visibility = System.Windows.Visibility.Hidden; };
        storyboard.Begin();            
    }

Answer 3

これが私の回避策です。これにより、コントロールがフェードインおよびフェードアウトします。 Visibilityで遊ぶ代わりに、Opacityだけで遊んで処理しました。

元のコードについてこの投稿のKaneに感謝します： WPFアニメーションを使用してコントロールをフェードします

Storyboard storyboard = new Storyboard();
TimeSpan duration = TimeSpan.FromMilliseconds(500); //

DoubleAnimation fadeInAnimation = new DoubleAnimation() 
    { From = 0.0, To = 1.0, Duration = new Duration(duration) };

DoubleAnimation fadeOutAnimation = new DoubleAnimation()
    { From = 1.0, To = 0.0, Duration = new Duration(duration) };
fadeOutAnimation.BeginTime = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(fadeInAnimation, element.Name);
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity", 1));
storyboard.Children.Add(fadeInAnimation);
storyboard.Begin(element);

Storyboard.SetTargetName(fadeOutAnimation, element.Name);
Storyboard.SetTargetProperty(fadeOutAnimation, new PropertyPath("Opacity", 0));
storyboard.Children.Add(fadeOutAnimation);
storyboard.Begin(element);

Answer 4

永遠にかかった私の神。これを見てください。アルファを使用して可視性が「可視」と「非表示」に変更されたときにアニメーション化する問題が解決され、アニメーションがフリーズしません。

using System.Windows;

namespace WpfApplication4
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            button.Visibility = Visibility.Hidden;
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            button.Visibility = Visibility.Visible;
        }
    }
}

XAML：

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.Microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>

            <Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
                <Style.Resources>
                    <Storyboard x:Key="FadeOut">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" FillBehavior="Stop">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Hidden}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" AutoReverse="False" />
                    </Storyboard>
                    <Storyboard x:Key="FadeIn">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" AutoReverse="False" />
                    </Storyboard>
                </Style.Resources>
                <Setter Property="Width" Value="120"></Setter>
                <Style.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Visibility" Value="Hidden" />
                            <Condition Property="Opacity" Value="1" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="FadeInStoryboard" />
                            <BeginStoryboard Name="FadeOutStoryboard" Storyboard="{StaticResource FadeOut}" />
                        </MultiTrigger.EnterActions>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Visibility" Value="Visible" />
                            <Condition Property="Opacity" Value="0" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="FadeOutStoryboard" />
                            <BeginStoryboard Name="FadeInStoryboard" Storyboard="{StaticResource FadeIn}" />
                        </MultiTrigger.EnterActions>
                    </MultiTrigger>
                </Style.Triggers>
            </Style>

        </Grid.Resources>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="200,186,0,0" VerticalAlignment="Top" Width="75" Height="38" />
        <Button x:Name="button1" Content="Hide it" HorizontalAlignment="Left" Margin="112,96,0,0" VerticalAlignment="Top" Width="75" Click="button1_Click"/>
        <Button x:Name="button2" Content="Show it" HorizontalAlignment="Left" Margin="200,96,0,0" VerticalAlignment="Top" Width="75" Click="button2_Click"/>
        <Label x:Name="label" Content="{Binding ElementName=button, Path=Opacity}" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
        <Label x:Name="label1" Content="{Binding ElementName=button, Path=Visibility}" HorizontalAlignment="Left" Margin="10,36,0,0" VerticalAlignment="Top"/>

    </Grid>
</Window>

Answer 5

これでストーリーボードが修正されます。

ただし、アニメーションが完了すると、コントロールは完全に不透明（非表示）になりますが、VisibilityプロパティはVisibleに設定されたままになります。したがって、Visibilityプロパティが非表示にリセットされているか、どこかで折りたたまれていることを確認する必要があります。

<Style TargetType="{x:Type FrameworkElement}" x:Key="animateFadeOut">
         <Style.Triggers>
            <Trigger Property="Visibility" Value="Visible">
               <Trigger.EnterActions>
                  <BeginStoryboard Name="MyFadeEffect">
                     <Storyboard>
                        <DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
                         From="1.0" To="0.0" Duration="0:0:0.5"/>
                     </Storyboard>
                  </BeginStoryboard>
               </Trigger.EnterActions>
               <Trigger.ExitActions>
                  <StopStoryboard BeginStoryboardName="MyFadeEffect"/>
               </Trigger.ExitActions>
            </Trigger>
         </Style.Triggers>
      </Style>