Silverlight實用竅門系列：60.Silverlight中自定義Behavior，實現圖片動畫漸變Behavior

        在Silverlight中我們需要了解Behavior行為，它可以將一些常用的行為、效果等封裝起來，在需要調用的時候可以非常方便的調用，主要需要引用System.Windows.Interactivity.DLL。它的運行本質是為采用了Behavior行為的源對象自動加載處理事件。

        我們自定義一個Behavior行為需要做到以下三點方可成功。

        一、繼承於System.Windows.Interactivity.DLL中的Behavior<T>類，其中的T可以更換為Image、TextBox、Label等所有的元素對象甚至是DependencyObject，表示這個自定義的Behavior可以作用於哪種控件。

        二、重寫覆蓋OnAttached方法，在這個方法中需要為添加Behavior行為的對象附加事件.

        三、重寫覆蓋OnDetaching方法，在這個方法中需要為刪除Behavior行為的對象卸載事件.

        定義好Behavior行為之后，在界面上需要如以下方式使用：

<UserControl x:Class="SLBehavior.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:me="clr-namespace:SLBehavior"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White">
        <Image  Source="lv.jpg" HorizontalAlignment="Left" Width="352" Height="318"
                Margin="27,27,0,0"  x:Name="img1" >
            <i:Interaction.Behaviors>
 <me:OpacityBehavior From="1" To="0.7"/>
 </i:Interaction.Behaviors>
        </Image>

        <Image  Source="hua.jpg" HorizontalAlignment="Left" Width="221" Margin="402,0,0,-33"  x:Name="img2" >
            <i:Interaction.Behaviors>
 <me:OpacityBehavior From="1" To="0.5"/>
 </i:Interaction.Behaviors>
        </Image>
    </Grid>
</UserControl>

        自定義的Behavior行為代碼如下，是一個控制圖片透明度的動畫效果。

    public class OpacityBehavior : Behavior<Image>
    {
        private double _From = 1;
        private double _To = 0.6;
        //裝載DoubleAnimation動畫的故事板
        Storyboard sboard = new Storyboard();
        DoubleAnimation danima = new DoubleAnimation();
        Image img;

        /// <summary>
        /// 透明度從多少開始
        /// </summary>
        public double From
        {
            get { return _From; }
            set { _From = value; }
        }

        /// <summary>
        /// 透明度到多少結尾
        /// </summary>
        public double To
        {
            get { return _To; }
            set { _To = value; }
        }

        /// <summary>
        /// 在為某個對象添加Behavior行為時附加事件
        /// </summary>
        protected override void OnAttached()
        {
            base.OnAttached();

            //清除故事版和資源
            img = this.AssociatedObject as Image;
            sboard.Children.Clear();
            img.Resources.Clear();
            //設置img控件的透明度的Double類型數字變化
            danima.SetValue(Storyboard.TargetNameProperty, img.Name);
            danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("UIElement.Opacity"));
            danima.Duration = new Duration(new TimeSpan(0, 0, 1));
            sboard.Children.Add(danima);
            img.Resources.Add("Storyboard", sboard);

            //綁定鼠標事件
            img.MouseEnter += new MouseEventHandler(img_MouseEnter);
            img.MouseLeave += new MouseEventHandler(img_MouseLeave);
        }

        /// <summary>
        /// 在為某個對象移除Behavior行為時注銷事件
        /// </summary>
        protected override void OnDetaching()
        {
            base.OnDetaching();
            img.MouseEnter -= new MouseEventHandler(img_MouseEnter);
            img.MouseLeave -= new MouseEventHandler(img_MouseLeave);
        }

        void img_MouseEnter(object sender, MouseEventArgs e)
        {
            danima.From = this.From;
            danima.To = this.To;
            sboard.Begin();
        }

        void img_MouseLeave(object sender, MouseEventArgs e)
        {
            danima.From = this.To;
            danima.To = this.From;
            sboard.Begin();
        }
    }

        注意：A:  AssociatedObject屬性是使用此行為的對象。B:在行為中定義的屬性可以在Xaml界面直接賦值。

        最后，如需源碼請點擊 SLBehavior.zip 下載，效果如下兩張圖所示：