[Silverlight] 使用Visual Studio.net + Microsoft Expression Blend 製作 Behavior

2010/09/24

出來混的遲早要還的,之前欠一篇Behavior 文..

這一篇案例會自製出一個Behavior 可以讓滑鼠移進去的時候透明度變成.5

移出來的時候透明度變成 1.0



首先開啟Expression Blend 4 並且建立一個一般的Silverlight 專案..

Slotion 名稱設為 EZBehaviorMemo



sshot-1




打開後先不要動這專案我們馬上建立一個 Library的專案先撰寫Behavior .

sshot-2



我們選擇Silverlight Control Library , 並且取名為 BehaviorLib

sshot-3

他預設會有一個MainControl.mxml 其實用不到,所以可以砍掉..

sshot-4



接下來我們在BhaviorLib那專案下面加入 Behavior Class 首先我們先 Add New Item

  sshot-5

我們取一個名字 MouseOpacity.cs





sshot-6



建立好之後她會出現這樣的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…

sshot-8



接下來我們在EZBehaviorMemo 專案中的 MainPage 加入一張圖..

sshot-9





我們要來使用 剛剛寫好的 Behavior ..



首先要先引入..Add Project Reference => BehaviorLib







sshot-12



之後Compiler 過後..



會在上面 Aeests 的 Project 類別找到 MouseOpacity

sshot-13



之後就可以將此Behavior 拖曳到圖上面..

sshot-18



這樣就完成了..



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 在…91cf07e3aa16738943fa1147940b48ea



完成範例:




讚一下:



下載案例:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.