wpf動畫特效,觸發器，計時器

1.先貼幾張效果圖

首先，咱們來看看動畫特效的效果截圖：

 

接下來是按鈕Button的效果

 

 

 

 

2.要學到的知識

主要是兩方面的東西：

第一是動畫特效在WPF裏是怎麼實現的。

第二就是按鈕的特殊效果。。

 

要使用的東西一是觸發器Trigger，二是Resources,三是Canvas畫布的RenderTransform旋轉。。。這個是動畫特效方面

 

在按鈕特效上要使用的一個是WMControl.dll這個類庫(裏面定義了Button的樣式,有Button和TableControl兩個控件)..

 

3.前臺代碼

<Window x:Class="WpfApplication1.DialogWin"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WMControl="clr-namespace:WMControl;assembly=WMControl" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    Title="DialogWin" Height="600" Width="800" WindowStyle="None"  
     Name="DW1"   Background="Transparent" AllowsTransparency="True" WindowStartupLocation="CenterScreen" WindowState="Normal">
    <Window.Resources>
        <!--此樣式能去除按鈕點擊後的虛線框-->
        <Style x:Key="MyFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="-2" StrokeThickness="0" Stroke="Red" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--原始旋轉出來樣例-->
        <Storyboard x:Key="showDW">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="Opacity"
                        From="0.2" To="1" Duration="0:0:2.5">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="70" To="0" Duration="0:0:2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"  
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"              
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--原始的旋轉回去樣例-->
        <Storyboard x:Key="closeDW">
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                      To="360" Duration="0:0:1.5" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="Opacity"
                      To="0" Duration="0:0:3">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--轉出來-->
        <Storyboard x:Key="showDW1">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="Opacity"
                        From="0" To="1" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="180" To="0" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--彈出來-->
        <Storyboard x:Key="showDW2">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="0.5" Duration="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="0.5" Duration="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="1" To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1"  To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True">
            </DoubleAnimation>
        </Storyboard>
        <!--轉回去-->
        <Storyboard x:Key="closeDW1">
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                      To="180" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="Opacity"
                      To="0" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>


        <!--彈回去-->
        <Storyboard x:Key="closeDW2">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="0.5" To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08"  >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.5"  To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08" >
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>


  
   <Window.Triggers>
        <!--設置DW1的事件觸發-->
        <!--注意對窗體window的name取爲DW1-->
        <EventTrigger SourceName="DW1" RoutedEvent="Window.Loaded">
            <BeginStoryboard Name="showQueryCanvasStoryboard2" 
                      Storyboard="{StaticResource showDW}">
            </BeginStoryboard>
        </EventTrigger>
        <!--設置button1的事件觸發-->
        <!--注意對按鈕的name取爲button1-->
        <EventTrigger SourceName="button1" RoutedEvent="Button.Click">
            <BeginStoryboard Name="closeQueryCanvasStoryboard" 
                      Storyboard="{StaticResource closeDW2}">
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
        <Canvas  Height="auto" Width="auto" Canvas.Left="9" Canvas.Top="14" Name="Canvas1" MouseLeftButtonDown="Canvas1_MouseLeftButtonDown">
        <Canvas.Background>
            <ImageBrush ImageSource="images/1.jpg"></ImageBrush>
        </Canvas.Background>
            <!--設置動畫-->
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="100" CenterY="50"></ScaleTransform>
                    <!--縮放中心爲100,50。RenderTransform.Children[0]-->
                    <RotateTransform CenterX="100" CenterY="50"></RotateTransform>
                    <!--旋轉中心爲100,50。RenderTransform.Children[1]-->
                </TransformGroup>
            </Canvas.RenderTransform>
        <WMControl:WMButton Name="button1" FocusVisualStyle="{DynamicResource MyFocusVisual}" Width="94" Height="34" Margin="98,107,124,127" Click="button1_Click" Canvas.Left="193" Canvas.Top="274" >
            <WMControl:WMButton.Background>
                <ImageBrush ImageSource="images/login_btn.png" />
            </WMControl:WMButton.Background>
            <WMControl:WMButton.MyMoverBrush>
                <ImageBrush ImageSource="images/login_btn_.png"/>
            </WMControl:WMButton.MyMoverBrush>
            <WMControl:WMButton.MyEnterBrush>
                <ImageBrush ImageSource="images/login_btn.png"/>
            </WMControl:WMButton.MyEnterBrush>
        </WMControl:WMButton>
        <WMControl:WMButton Name="button2" FocusVisualStyle="{DynamicResource MyFocusVisual}" Width="94" Height="34" Margin="98,107,124,127" Click="button2_Click" Canvas.Left="301" Canvas.Top="273" >
            <WMControl:WMButton.Background>
                <ImageBrush ImageSource="images/設置符號_btn_4_.png" />
            </WMControl:WMButton.Background>
            <WMControl:WMButton.MyMoverBrush>
                <ImageBrush ImageSource="images/設置符號_btn_4.png"/>
            </WMControl:WMButton.MyMoverBrush>
            <WMControl:WMButton.MyEnterBrush>
                <ImageBrush ImageSource="images/設置符號_btn_4.png"/>
            </WMControl:WMButton.MyEnterBrush>
        </WMControl:WMButton>
            </Canvas>
</Window>

View Code

 

 

4.後臺代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace WpfApplication1
{
    /// <summary>
    /// Window1.xaml 的交互邏輯
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

       
        private void button1_Click(object sender, RoutedEventArgs e)
        {   //過程：先實例化計時器DispatcherTimer。而後超過計時器間隔的時間就調用事件（tm_Tick）來關閉本窗口
            //而後設置計時器的計時刻度時間段爲0.2秒？好比我這裏設置時間爲3，那麼就會停頓3秒鐘左右的時間纔會關閉
            //而後計時器開始。。

            DispatcherTimer tm = new DispatcherTimer();
            tm.Tick += new EventHandler(tm_Tick);//做用是使得點擊登錄按鈕的時候計時器計算時間打開另外一個窗口而後關閉本窗口。。
            //由於在打開窗口和關閉本窗口有必定時間間隔並且須要動畫過渡。。全部用到了計時器
            tm.Interval = TimeSpan.FromSeconds(0.2);
            tm.Start();//?


            DialogWin w = new DialogWin();
            w.WindowStyle = System.Windows.WindowStyle.None   ;//WindowStyle爲None那麼標題欄和邊框都將不顯示
            w.Show();
        }
       


        
        void tm_Tick(object sender, EventArgs e)
        { 
            
            this.Close(); 
        
        
        }



        private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}

View Code

 

 

 

 

5.接下來是步驟

首先，建立新WPF文件，添加一個文件夾images,文件夾裏添加要用到的圖片文件

而後，把WMControl.dll這個類庫添加到文件裏

接下來，把MainWindow.xaml 更名爲DialogWin.xaml，編寫前臺和後臺代碼

再接下來，新建一個窗口Window1.xaml，編寫前臺和後臺代碼。

最後，運行調試。。

 

6.接下來是前臺代碼分析和解釋

Background="Transparent"   AllowsTransparency="True"  

 

這兩句的做用是設置窗體的效果爲透明。

 

WindowStartupLocation="CenterScreen" 

 

窗口啓動位於屏幕正中

WindowState="Normal"

 

窗口保持正常，即默認模式，既不最大化也不最小化

 

 <Style x:Key="MyFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="-2" StrokeThickness="0" Stroke="Red" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style> 

 

這個Style的做用是去除點擊按鈕時候的虛線框

 

<Storyboard x:Key="showDW">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="Opacity"
                        From="0.2" To="1" Duration="0:0:2.5">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="70" To="0" Duration="0:0:2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"  
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"              
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--原始的旋轉回去樣例-->
        <Storyboard x:Key="closeDW">
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                      To="360" Duration="0:0:1.5" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="Opacity"
                      To="0" Duration="0:0:3">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--轉出來-->
        <Storyboard x:Key="showDW1">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="Opacity"
                        From="0" To="1" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="180" To="0" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--彈出來-->
        <Storyboard x:Key="showDW2">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="0.5" Duration="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="0.5" Duration="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="1" To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1"  To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True">
            </DoubleAnimation>
        </Storyboard>
        <!--轉回去-->
        <Storyboard x:Key="closeDW1">
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                      To="180" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="Opacity"
                      To="0" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>


        <!--彈回去-->
        <Storyboard x:Key="closeDW2">
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="0.5" To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08"  >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.5"  To="0.2" Duration="0:0:0.04" BeginTime="0:0:0.08" >
            </DoubleAnimation>
        </Storyboard>

View Code

 

窗口特效的部分。。注意到要用到RenderTransform，這個要再後面Canvas裏定義..

 

<Window.Triggers>
        <!--設置DW1的事件觸發-->
        <!--注意對窗體window的name取爲DW1-->
        <EventTrigger SourceName="DW1" RoutedEvent="Window.Loaded">
            <BeginStoryboard Name="showQueryCanvasStoryboard2" 
                      Storyboard="{StaticResource showDW}">
            </BeginStoryboard>
        </EventTrigger>
        <!--設置button1的事件觸發-->
        <!--注意對按鈕的name取爲button1-->
        <EventTrigger SourceName="button1" RoutedEvent="Button.Click">
            <BeginStoryboard Name="closeQueryCanvasStoryboard" 
                      Storyboard="{StaticResource closeDW2}">
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

 

---觸發器。。做用是在窗體出現和按鈕點擊的時候觸發Storyboard特效，Storyboard在Resources裏面定義。。

 

 <Canvas  Height="auto" Width="auto" Canvas.Left="9" Canvas.Top="14" Name="Canvas1" MouseLeftButtonDown="Canvas1_MouseLeftButtonDown">
        <Canvas.Background>
            <ImageBrush ImageSource="images/1.jpg"></ImageBrush>
        </Canvas.Background>
            <!--設置動畫-->
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="100" CenterY="50"></ScaleTransform>
                    <!--縮放中心爲100,50。RenderTransform.Children[0]-->
                    <RotateTransform CenterX="100" CenterY="50"></RotateTransform>
                    <!--旋轉中心爲100,50。RenderTransform.Children[1]-->
                </TransformGroup>
            </Canvas.RenderTransform>

 

--------Canvas.Background是設置的窗體背景，由於窗體虛化透明瞭，因此用圖片來填充窗體。。。

Canvas.RenderTransform這個是設置的畫布的旋轉角度。。在Resource旋轉特效裏用到了。。

       

 <WMControl:WMButton Name="button1" FocusVisualStyle="{DynamicResource MyFocusVisual}" Width="94" Height="34" Margin="98,107,124,127" Click="button1_Click" Canvas.Left="193" Canvas.Top="274" >
            <WMControl:WMButton.Background>
                <ImageBrush ImageSource="images/login_btn.png" />
            </WMControl:WMButton.Background>
            <WMControl:WMButton.MyMoverBrush>
                <ImageBrush ImageSource="images/login_btn_.png"/>
            </WMControl:WMButton.MyMoverBrush>
            <WMControl:WMButton.MyEnterBrush>
                <ImageBrush ImageSource="images/login_btn.png"/>
            </WMControl:WMButton.MyEnterBrush>
        </WMControl:WMButton>

        <WMControl:WMButton Name="button2" FocusVisualStyle="{DynamicResource MyFocusVisual}" Width="94" Height="34" Margin="98,107,124,127" Click="button2_Click" Canvas.Left="301" Canvas.Top="273" >
            <WMControl:WMButton.Background>
                <ImageBrush ImageSource="images/設置符號_btn_4_.png" />
            </WMControl:WMButton.Background>
            <WMControl:WMButton.MyMoverBrush>
                <ImageBrush ImageSource="images/設置符號_btn_4.png"/>
            </WMControl:WMButton.MyMoverBrush>
            <WMControl:WMButton.MyEnterBrush>
                <ImageBrush ImageSource="images/設置符號_btn_4.png"/>
            </WMControl:WMButton.MyEnterBrush>
        </WMControl:WMButton>
            </Canvas>

 

-----這個是按鈕特效。。。首先FocusVisualStyle綁定了Resource裏面的去除虛線效果。。

而後WMControl.dll裏面的Button的自定義效果是虛化的，用登錄按鈕圖片來覆蓋。。

 

7.接下來是後臺代碼分析和解釋

  private void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

 

----畫布的事件，鼠標左鍵點擊窗體不放能夠拖動窗體。。

 

    

    private void button1_Click(object sender, RoutedEventArgs e)
        {   //過程：先實例化計時器DispatcherTimer。而後超過計時器間隔的時間就調用事件（tm_Tick）來關閉本窗口
            //而後設置計時器的計時刻度時間段爲0.2秒？好比我這裏設置時間爲3，那麼就會停頓3秒鐘左右的時間纔會關閉
            //而後計時器開始。。


            DispatcherTimer tm = new DispatcherTimer();
            tm.Tick += new EventHandler(tm_Tick);//做用是使得點擊登錄按鈕的時候計時器計算時間打開另外一個窗口而後關閉本窗口。。
            //由於在打開窗口和關閉本窗口有必定時間間隔並且須要動畫過渡。。全部用到了計時器
            tm.Interval = TimeSpan.FromSeconds(0.2);
            tm.Start();//?




            DialogWin w = new DialogWin();
            w.WindowStyle = System.Windows.WindowStyle.None   ;//WindowStyle爲None那麼標題欄和邊框都將不顯示
            w.Show();
        }

 

----而後是計時器，計時器的做用是協調兩個窗口點開互換的時候的特效關閉或打開時間，不然一個打開，另一個窗口執行完特效後即時有關閉窗口的代碼，仍然會保持在桌面。。而後是跳轉到窗口的代碼。。

 

 

  void tm_Tick(object sender, EventArgs e)
        { 
            
            this.Close(); 
        
        
        }

 

---這個是計時器的一個方法，超過計時器的時間關閉窗體。。

 

 private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

 

---這個是點擊取消按鈕，關閉窗體。。

 

 

8.源代碼

 百度網盤：源代碼在此