Silverlight utility tip series: 60. Custom behavior in Silverlight to achieve image animation gradient Behavior

In Silverlight, we need to understand the behavior. It can encapsulate some common behaviors and effects, and can be called conveniently when necessary.System. Windows. interactivity. dll.In essence, it automatically loads and processes events for source objects that adopt behavior.

To customize a behavior, you must make the following three steps to succeed.

1. inherit from system. windows. interactivity. the behavior <t> class in the DLL, where T can be replaced with all element objects such as image, Textbox, label, and even dependencyobject, indicating which control the custom behavior can act on.

2. Override the onattached method. In this method, you need to attach an event to the object that adds the behavior action.

3. Override the ondetaching method. In this method, you must detach an event for the object that deletes the behavior action.

After behavior behaviors are defined, use the following methods on the interface:

<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  " X: Name ="  Img1  " >
 <I: interaction. behaviors> 
 <Me: opacitybehavior from = "1" to = "0.7" type = "codeph" text = "/codeph"/> 
 </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" type = "codeph" text = "/codeph"/> 
 </I: interaction. behaviors> 
</Image>
</GRID>
</Usercontrol>

Custom behavior BehaviorCodeThe following is an animation effect that controls the image transparency.

     Public   Class Opacitybehavior: behavior <image>
{
 Private   Double _ From = 1 ;
 Private   Double _ To = 0.6 ;
 //  Storyboards for loading doubleanimation animations  
 Storyboard sboard = New Storyboard ();
Doubleanimation danima = New Doubleanimation ();
Image IMG;

 ///   <Summary>  
  ///  Transparency starts from
  ///   </Summary> 
          Public   Double From
{
 Get { Return _ From ;}
 Set {_ From = value ;}
}

 ///   <Summary>  
  ///  Transparency to the end
  ///  </Summary>  
          Public   Double To
{
 Get { Return _ ;}
 Set {_ To = value ;}
}

 ///   <Summary>  
  ///  Attaches an event when adding behavior to an object
 ///   </Summary>  
          Protected   Override   Void Onattached ()
{
 Base . Onattached ();

 //  Clear story versions and resources  
 IMG = This . Associatedobject As Image;
Sboard. Children. Clear ();
IMG. Resources. Clear ();
 //  Double-type numeric change for setting the transparency of the IMG Control  
 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 );

 //  Bind mouse events  
 IMG. mouseenter + = New Mouseeventhandler (img_mouseenter );
IMG. mouseleave + = New Mouseeventhandler (img_mouseleave );
}

 ///   <Summary>  
  ///  Deregister an event when removing behavior from an object
  ///   </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 .;
Sboard. Begin ();
}

Void Img_mouseleave ( Object Sender, mouseeventargs E)
{
Danima. From = This .;
Danima. To = This . From;
Sboard. Begin ();
}
}

Note: A: The associatedobject attribute is an object that uses this behavior. B: attributes defined in a row can be assigned values directly on the XAML interface.

Finally, click slbehavior.zip to download the source code. The effect is shown in the following two figures: