以 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>
|
留言
張貼留言