ObjectiveThis article will give a basic introduction of BEHAVIOR feature in SILVERLIGHT3.0. I will also walkthrough to create a custom behavior. What is Behavior in SILVERLIGHT 3?According to definition given in the product introduction of SILVERLIGHT3A Behavior is in essence a reusable piece of interactivity that can be applied directly to user interface elements in Expression Blend. The whole product introduction on behavior can be read here. I summarized few of the points as below about SILVERLIGHT behavior Behavior is new feature introduced in SILVERLIGHT 3.0. Behavior is a reusable piece of code, which can be attached to any object declaratively. Behavior is the way to allow designer to add functionality to XAML elements without codes. Behavior allows attaching functionality to an object without writing any code. Behavior encapsulates the functionality and can be attached to any element. Behavior can be attach to an element or object through XAML. There is no need to write C# code. A single behavior can be attached to any number of objects. Behavior is reusable piece of code can be attached to any object. Behavior comes with System.Windows.Interactivity.dll. Creating a Custom BehaviorStep 1Create a SILVERLIGHT Application. Two projects will get created SilverLightApplication1 and SilverLightApplication1.Web. If you are not, changing the default name. Add reference of System.Windows.Interactivity.dll in SilverLightApplication1 project.Step 2Right click on SILVERLIGHT project and add a class. Give any name, for my purpose; I am giving name ImageBehavior.a. Add the namespace using System.Windows.Interactivity;b. Inherit class from Behavior<T>c. Make T as DependencyObjectd. Override the methods OnAttached and OnDetachinge. On MouseEnter event and MouseLeave event write the simple logic to rotate the object to which Behavior will be attached. ImageBehavior.csusing System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Interactivity;namespace BehaviorSample1{ public class ImageBehavior : Behavior<DependencyObject> { public ImageBehavior() { } protected override void OnAttached() { base.OnAttached(); var ad = this.AssociatedObject as FrameworkElement; ad.MouseEnter += (sender, args) => { var p = new PlaneProjection(); p.RotationZ = new Random().Next(); ad.Projection = p; }; ad.MouseLeave += (sender, args) => { ad.Projection = null; }; } protected override void OnDetaching() { base.OnDetaching(); }}}Attaching Custom Behavior to objectStep 1Before adding custom behavior to element, we need to add namespaces. Open the XAML page and add below namespaces.xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"xmlns:behavior="clr-namespace:BehaviorSample1"Step 2Since; I am going to attach the custom behavior we created with Image control. So for the source of Image control add an image to SILVERLIGHT project by Add an existing item. I have added an image and gave the name a.jpg.Step 3Add an Image control on XAML and attach the behavior like below. <Image Height="Auto" Width="Auto" Source="a.jpg" > <i:Interaction.Behaviors> <behavior:ImageBehavior /> </i:Interaction.Behaviors> </Image>Where I isnamespace of dll and behavior is namespace of custom behavior class.MainPage.Xaml<UserControl x:Class="BehaviorSample1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:behavior="clr-namespace:BehaviorSample1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot" Height="Auto" Width="Auto" Background="Black"> <Image Height="Auto" Width="Auto" Source="a.jpg" > <i:Interaction.Behaviors> <behavior:ImageBehavior /> </i:Interaction.Behaviors> </Image> </Grid></UserControl>Step 4There is no need of do any coding in MainPage.Xaml.csRun the application On mouse enter to Image; Image will rotate with random degree of angle. Like below. Thanks for reading.
Creating a Custom BehaviorStep 1Create a SILVERLIGHT Application. Two projects will get created SilverLightApplication1 and SilverLightApplication1.Web. If you are not, changing the default name. Add reference of System.Windows.Interactivity.dll in SilverLightApplication1 project.Step 2Right click on SILVERLIGHT project and add a class. Give any name, for my purpose; I am giving name ImageBehavior.a. Add the namespace using System.Windows.Interactivity;b. Inherit class from Behavior<T>c. Make T as DependencyObjectd. Override the methods OnAttached and OnDetachinge. On MouseEnter event and MouseLeave event write the simple logic to rotate the object to which Behavior will be attached. ImageBehavior.csusing System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Interactivity;namespace BehaviorSample1{ public class ImageBehavior : Behavior<DependencyObject> { public ImageBehavior() { } protected override void OnAttached() { base.OnAttached(); var ad = this.AssociatedObject as FrameworkElement; ad.MouseEnter += (sender, args) => { var p = new PlaneProjection(); p.RotationZ = new Random().Next(); ad.Projection = p; };
ad.MouseLeave += (sender, args) => { ad.Projection = null; }; } protected override void OnDetaching() { base.OnDetaching(); }}}Attaching Custom Behavior to objectStep 1Before adding custom behavior to element, we need to add namespaces. Open the XAML page and add below namespaces.xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"xmlns:behavior="clr-namespace:BehaviorSample1"Step 2Since; I am going to attach the custom behavior we created with Image control. So for the source of Image control add an image to SILVERLIGHT project by Add an existing item. I have added an image and gave the name a.jpg.Step 3Add an Image control on XAML and attach the behavior like below. <Image Height="Auto" Width="Auto" Source="a.jpg" > <i:Interaction.Behaviors> <behavior:ImageBehavior /> </i:Interaction.Behaviors> </Image>Where I isnamespace of dll and behavior is namespace of custom behavior class.MainPage.Xaml<UserControl x:Class="BehaviorSample1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:behavior="clr-namespace:BehaviorSample1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot" Height="Auto" Width="Auto" Background="Black"> <Image Height="Auto" Width="Auto" Source="a.jpg" > <i:Interaction.Behaviors> <behavior:ImageBehavior /> </i:Interaction.Behaviors> </Image> </Grid></UserControl>Step 4There is no need of do any coding in MainPage.Xaml.csRun the application On mouse enter to Image; Image will rotate with random degree of angle. Like below. Thanks for reading.
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: