zoukankan      html  css  js  c++  java
  • 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 下载,效果如下两张图所示:

  • 相关阅读:
    面试题系列--【vue的生命周期】
    面试题系列--【hash和history的区别】
    ES6系列--【事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)】
    ES6系列--【ES6数组新增方法】
    ES6系列--【ES6 新增字符串方法】
    微信小程序系列--【VXML语法、VMSS样式、条件渲染、列表渲染、模板、引用、组件、事件系统】
    微信小程序系列--【小程序注册、工程创建、全局配置、页面配置】
    微信小程序系列---【五星好评案例】
    react系列---【Hooks】
    2019.9.18-单向循环链表删除元素(+之前完整代码)
  • 原文地址:https://www.cnblogs.com/chengxingliang/p/2403331.html
Copyright © 2011-2022 走看看