WPF漸變淡入淡出

在WPF中窗體的淡入淡出有兩種方法

1. 直接修改透明度

   1. 淡入

      1. 首先設置窗體透明

         <Window
             x:Class="MultiDownloader.MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Name="MainWin"
             Title="MainWindow"
             Width="1000"
             Height="800"
             AllowsTransparency="True"
             Opacity="0"
             WindowStyle="None">
             <Grid />
         </Window>
         

      2. 然后添加淡入動畫

         <Window.Triggers>
             <EventTrigger RoutedEvent="Window.Loaded" >
                 <BeginStoryboard>
                     <Storyboard>
                         <DoubleAnimation Duration="00:00:05" Storyboard.TargetProperty="Opacity" From="0" To="1" />
                     </Storyboard>
                 </BeginStoryboard>
             </EventTrigger>
         </Window.Triggers>
         

   2. 淡出

      1. 我們先定義動畫

         <Window.Resources>
             <Storyboard x:Key="hideMe">
                 <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:3" To="0.0" />
             </Storyboard>
         </Window.Resources>
         

      2. 淡出需要事件進行觸發

         <Button Content="退出" Click="ButtonBase_OnClick" />
         

         private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
         {
             Storyboard storyboard = (FindResource("hideMe") as System.Windows.Media.Animation.Storyboard);
             storyboard.Completed += (o, a) => { this.Close(); };
             storyboard.Begin(this);
         }
         

2. 線性淡入淡出

   1. 淡入

      1. 首先設置窗體的OpacityMask

         <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
             <GradientStop Offset="0" Color="#00000000" />
             <GradientStop Offset="1" Color="#00000000" />
             <GradientStop Offset="1" Color="#00000000" />
         </LinearGradientBrush>
         

      2. 然后設置窗體的事件觸發器（觸發事件為Loaded）

         <EventTrigger RoutedEvent="Window.Loaded">
             <BeginStoryboard>
                 <Storyboard>
                     <ColorAnimation
                                     Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Color"
                                     To="#FF000000"
                                     Duration="0" />
                     <DoubleAnimation
                                      Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"
                                      From="1"
                                      To="0"
                                      Duration="0:0:1.5" />
                     <ColorAnimation
                                     Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"
                                     To="#FF000000"
                                     Duration="0" />
                 </Storyboard>
             </BeginStoryboard>
         </EventTrigger>
         

   2. 淡出

      1. 我們先定義動畫資源

         <Storyboard x:Key="ClosedStoryboard">
             <DoubleAnimation
                              Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"
                              From="0"
                              To="1"
                              Duration="0:0:1.5" />
             <DoubleAnimation
                              BeginTime="0:0:0.5"
                              Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"
                              From="0"
                              To="1"
                              Duration="0:0:1" />
             <ColorAnimation
                             Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"
                             To="#FF000000"
                             Duration="0" />
         </Storyboard>
         

      2. 然后用事件進行觸發

         <Button
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Click="ButtonBase_OnClick"
                 Content="Click" />
         

         private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
         {
             this.IsEnabled = false;
             Storyboard storyboard = this.Resources["ClosedStoryboard"] as Storyboard;
             storyboard.Completed += delegate { this.Close(); };
         
             storyboard.Begin(this);
         }