[Silverlight] 使用Visual Studio.net + Microsoft Expression Blend 製作 Behavior
出來混的遲早要還的,之前欠一篇Behavior 文..
這一篇案例會自製出一個Behavior 可以讓滑鼠移進去的時候透明度變成.5
移出來的時候透明度變成 1.0
首先開啟Expression Blend 4 並且建立一個一般的Silverlight 專案..
Slotion 名稱設為 EZBehaviorMemo
打開後先不要動這專案我們馬上建立一個 Library的專案先撰寫Behavior .
我們選擇Silverlight Control Library , 並且取名為 BehaviorLib
他預設會有一個MainControl.mxml 其實用不到,所以可以砍掉..
接下來我們在BhaviorLib那專案下面加入 Behavior Class 首先我們先 Add New Item
我們取一個名字 MouseOpacity.cs
建立好之後她會出現這樣的Code ..
using System; using System.Collections.Generic; 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.Interactivity; //using Microsoft.Expression.Interactivity.Core; namespace BehaviorLib { public class MouseOpacity : Behavior<DependencyObject> { public MouseOpacity() { // Insert code required on object creation below this point. // // The line of code below sets up the relationship between the command and the function // to call. Uncomment the below line and add a reference to Microsoft.Expression.Interactions // if you choose to use the commented out version of MyFunction and MyCommand instead of // creating your own implementation. // // The documentation will provide you with an example of a simple command implementation // you can use instead of using ActionCommand and referencing the Interactions assembly. // //this.MyCommand = new ActionCommand(this.MyFunction); } protected override void OnAttached() { base.OnAttached(); // Insert code that you would want run when the Behavior is attached to an object. } protected override void OnDetaching() { base.OnDetaching(); // Insert code that you would want run when the Behavior is removed from an object. } /* public ICommand MyCommand { get; private set; } private void MyFunction() { // Insert code that defines what the behavior will do when invoked. } */ } }
之後我們打開Visual Studio.net 來編輯 MouseOpacity.cs 檔案
首先我們將註解的Code 先全部拿掉..
並且加入我們自訂的事件..
using System.Windows; using System.Windows.Input; using System.Windows.Interactivity; //using Microsoft.Expression.Interactivity.Core; namespace BehaviorLib { public class MouseOpacity : Behavior<DependencyObject> { public MouseOpacity() { } protected override void OnAttached() { base.OnAttached(); //將被Behavior附身的物件 加入滑鼠進入事件 (this.AssociatedObject as UIElement).MouseEnter += MouseOpacity_MouseEnter; //將被Behavior附身的物件 加入滑鼠移出事件 (this.AssociatedObject as UIElement).MouseLeave += MouseOpacity_MouseLeave; } void MouseOpacity_MouseLeave(object sender, MouseEventArgs e) { //設定透明度為1.0 (sender as UIElement).Opacity = 1.0; } void MouseOpacity_MouseEnter(object sender, MouseEventArgs e) { //設定透明度為0.5 (sender as UIElement).Opacity = 0.5; } protected override void OnDetaching() { base.OnDetaching(); //移除事件 (this.AssociatedObject as UIElement).MouseEnter -= MouseOpacity_MouseEnter; //移除事件 (this.AssociatedObject as UIElement).MouseLeave -= MouseOpacity_MouseLeave; } } }
其中比較要注意的是 AssociatedObject 就是被 Behavior 給附身的物件…
所以我們加入了滑鼠移進跟移出的事件..
還有在OnDetaching時必須將事件都移除,這是比較要注意的,不然很容易發生干擾..
之後我們回到 Expression Blend ..
他會說發現您有更動Code 問你是否要更新..當然請直接按下Yes…
接下來我們在EZBehaviorMemo 專案中的 MainPage 加入一張圖..
我們要來使用 剛剛寫好的 Behavior ..
首先要先引入..Add Project Reference => BehaviorLib
之後Compiler 過後..
會在上面 Aeests 的 Project 類別找到 MouseOpacity
之後就可以將此Behavior 拖曳到圖上面..
這樣就完成了..
MainPage.xaml Code :
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:BehaviorLib="clr-namespace:BehaviorLib;assembly=BehaviorLib" x:Class="EZBehaviorMemo.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White"> <Image Margin="94,35,316,96" Source="anne-hathaway.jpg" Stretch="Fill"> <i:Interaction.Behaviors> <BehaviorLib:MouseOpacity/> </i:Interaction.Behaviors> </Image> </Grid> </UserControl>
當然這範例我盡量精簡到很簡單可以學會…
所以有很多東西沒有細說到..
不過還有MSDN 在…
完成範例:
讚一下:
下載案例:
標籤:
教學,
Behavior,
C#,
Silverlight
|
This entry was posted on 下午4:34
and is filed under
教學
,
Behavior
,
C#
,
Silverlight
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 意見:
張貼留言