WPF當游標經過目標圖片時自動放大圖片的功能

以 DoubleAnimation 的動畫特效來實現: 當游標經過目標圖片時自動放大圖片的功能

以下面簡單的UI當作範例

<Window x :Class="MouseoverAndScaleUIImage.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height ="350" Width="525">     <Grid >         <Image Name ="IconImage" Source="icon.jpg" HorizontalAlignment="Left" Height="100" Margin="180,118,0,0" VerticalAlignment="Top" Width ="100">         </Window>

實作方法:

一.  首先建立 DoubleAnimation 和 Storyboard

若要將動畫套用在物件上, 須建立 Storyboard, 

並使用 TargetName 和 TargetProperty 附加屬性指定要建立動畫的物件和屬性

這邊的動畫效果是指定Height\Width來調整動畫的長寬

Storyboard.TargetProperty="Height"To="300" 

Storyboard.TargetProperty="Width" To ="300"

而動畫的 Duration 屬性可以指定從開始值到目的值要花費多少時間(若不想讓圖片慢慢放大可以將值設為"0:0:0" )

XAML

< Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Height" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Width" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                                                 </ Storyboard>

二. 建立 Storyboard 與觸發程序的關聯

我們可以透過觸發事件的方式來啟動Storyboard

1.建立一個 BeginStoryboard 物件，並建立與腳本之間的關聯。 BeginStoryboard 是一種TriggerAction，會套用及啟動 Storyboard。

XAML

< BeginStoryboard>                     < Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Height" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Width" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                     </ Storyboard>                 </ BeginStoryboard>

2.建立 EventTrigger 並將 BeginStoryboard 新增至 Actions 集合中。 將 EventTrigger 的RoutedEvent 屬性設定為MouseEnter

一旦使用者的游標經過圖片時,就會觸發特效

XAML

< EventTrigger RoutedEvent ="MouseEnter">                 < BeginStoryboard>                     < Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Height" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Width" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                     </ Storyboard>                 </ BeginStoryboard>             </ EventTrigger>

3. 將 EventTrigger 加入至 Image的 Triggers 集合。

XAML

< Image Name ="IconImage" Source="icon.jpg" HorizontalAlignment ="Left" Height="100" Margin="180,118,0,0" VerticalAlignment ="Top" Width ="100">          < Image.Triggers>             < EventTrigger RoutedEvent ="MouseEnter">                 < BeginStoryboard>                     < Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Height" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Width" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                     </ Storyboard>                 </ BeginStoryboard>             </ EventTrigger>                    </ Image.Triggers>       </Image >

以下是完整範例

XAML

< Window x : Class="MouseoverAndScaleUIImage.MainWindow"         xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns :x ="http://schemas.microsoft.com/winfx/2006/xaml"         Title ="MainWindow" Height ="350" Width="525">     <Grid >         < Image Name ="IconImage" Source="icon.jpg" HorizontalAlignment ="Left" Height="100" Margin="180,118,0,0" VerticalAlignment ="Top" Width ="100">         < Image.Triggers>             < EventTrigger RoutedEvent ="MouseEnter">                 < BeginStoryboard>                     < Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Height" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                          Storyboard.TargetProperty ="Width" To ="300"                          Duration ="0:0:0" BeginTime ="0:0:0"/>                     </ Storyboard>                 </ BeginStoryboard>             </ EventTrigger>             < EventTrigger RoutedEvent ="MouseLeave">                 < BeginStoryboard>                     < Storyboard>                         < DoubleAnimation Storyboard.TargetName ="IconImage"                                                             Storyboard.TargetProperty="Height"                                                             Duration ="0:0:0" BeginTime="0:0:0"/>                             < DoubleAnimation Storyboard.TargetName ="IconImage"                                                             Storyboard.TargetProperty="Width"                                                             Duration ="0:0:0" BeginTime="0:0:0"/>                     </ Storyboard>                 </ BeginStoryboard>             </ EventTrigger>         </ Image.Triggers>        </Image >     </Grid > </ Window>