Behaviors in Silverlight with Visual Studio

Behaviors are reusable components that can be directly applied to any object on the art board, and they are composed of extensible triggers, extensible actions, and behaviors. Behaviors began as a design-time feature for Expression Blend so it’s bundled with Expression Blend 3.0. But it is possible to create and use them with Visual Studio application with slightly more effort.

The behavior feature consists of – trigger, action and behavior.

Triggers and Action

            Triggers and actions work hand in hand. The trigger fires when something happens, and invokes an action.

            Steps for Creating an Action

1.      Create a new Silverlight application and add reference to System.Windows.Interactivity dll. This assembly defines the base class that supports behavior. To get this assembly you need to install the Expression Blend 3 or Expression Blend 3 SDK. Once it is installed, the assembly will be available in C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight folder.

2.      Create a class for example MyTriggerAction.cs and inherit from TriggerAction<DependencyObject>.

3.      Create two dependency properties as shown below

  1: public static readonly DependencyProperty PropertyNameProperty = 
  2:                       DependencyProperty.Register("PropertyName", 
  3:                       typeof(string), 
  4:                       typeof(MyTriggerAction), 
  5:                       new PropertyMetadata("Width")); 
  6: 
  7: 
  8: public string PropertyName 
  9: { 
 10:         get 
 11:         { 
 12:             return this.GetValue(PropertyNameProperty) as string; 
 13:         } 
 14:         set 
 15:         { 
 16:             this.SetValue(PropertyNameProperty, value); 
 17:         } 
 18: } 
 19: 
 20: 
 21: public static readonly DependencyProperty ValueProperty = 
 22:                       DependencyProperty.Register("Value", 
 23:                       typeof(double), 
 24:                       typeof(MyTriggerAction), 
 25:                       new PropertyMetadata(0d)); 
 26: 
 27: 
 28: public double Value 
 29: { 
 30:         get 
 31:         { 
 32:                 return (double)this.GetValue(ValueProperty); 
 33:         } 
 34:         set 
 35:         { 
 36:                 this.SetValue(ValueProperty, value); 
 37:         } 
 38: }  

4.    Add an Image control to the UI (MainPage.xaml) and import the System.Windows. Interactivity as xmlns:ia="clr-namespace:System.Windows.Interactivity; assembly=System.Windows.Interactivity" and xmlns:ic="clr-namespace:SLAction" (which is the assembly that we created the MyTriggerAction class).

  1: <Image Source="header.jpg"> 
  2:     <ia:Interaction.Triggers> 
  3:         <ia:EventTrigger EventName="MouseEnter"> 
  4:             <ic:MyTriggerAction PropertyName="Opacity" Value="0.5" /> 
  5:         </ia:EventTrigger> 
  6:         <ia:EventTrigger EventName="MouseLeave"> 
  7:             <ic:MyTriggerAction PropertyName="Opacity" Value="1" /> 
  8:         </ia:EventTrigger> 
  9:     </ia:Interaction.Triggers> 
 10: </Image>

5.      Override the abstract method Invoke as

  1: protected override void Invoke(object parameter) 
  2: { 
  3:     Image img = 
  4:           ((RoutedEventArgs)(parameter)).OriginalSource as Image; 
  5: 
  6: 
  7:     if (img != null) 
  8:     { 
  9:            img.Opacity = Value; 
 10:     } 
 11: }

         6.  Run the application.

Behaviors

The behaviors have the same goal as action.

Steps for Creating a Behavior

1.  The first step is to override OnAttached() and OnDetaching() methods   

a.      Create a class for example MyBehavior.cs and inherit from Behavior<UIElement>.

b.      Override the OnAttached() and OnDetaching() methods as shown below

  1: protected override void OnAttached() 
  2: { 
  3:       base.OnAttached(); 
  4: 
  5: 
  6:       this.AssociatedObject.MouseLeftButtonDown +=
  7:               new MouseButtonEventHandler(OnMouseLeftButtonDown); 
  8:       this.AssociatedObject.MouseMove += 
  9:               new MouseEventHandler(OnMouseMove); 
 10:       this.AssociatedObject.MouseLeftButtonUp += 
 11:               new MouseButtonEventHandler(OnMouseLeftButtonUp); 
 12: }  
 13: protected override void OnDetaching() 
 14: { 
 15:       base.OnDetaching(); 
 16:         this.AssociatedObject.MouseLeftButtonDown –= 
 17: 
 18:               new MouseButtonEventHandler(OnMouseLeftButtonDown); 
 19:       this.AssociatedObject.MouseMove –= 
 20:               new MouseEventHandler(OnMouseMove); 
 21:       this.AssociatedObject.MouseLeftButtonUp –= 
 22:               new MouseButtonEventHandler(OnMouseLeftButtonUp); 
 23: } 
 24:   void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
 25: 
 26: { 
 27:       if (isDragging) 
 28:       { 
 29:             AssociatedObject.ReleaseMouseCapture(); 
 30:             isDragging = false; 
 31:       } 
 32: } 
 33:   void OnMouseMove(object sender, MouseEventArgs e) 
 34: 
 35: { 
 36:       if (isDragging) 
 37:       { 
 38:             Point p = e.GetPosition(canvas); 
 39:             AssociatedObject.SetValue(Canvas.TopProperty, 
 40:                                        p.Y - mouseOffset.Y); 
 41:             AssociatedObject.SetValue(Canvas.LeftProperty, 
 42:                                        p.X - mouseOffset.X); 
 43:       } 
 44: } 
 45: 
 46: 
 47: void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
 48: { 
 49:       if (canvas == null) 
 50:       { 
 51:             canvas = (Canvas)VisualTreeHelper.GetParent
 52:                      (this.AssociatedObject); 
 53:       } 
 54: 
 55: 
 56:       isDragging = true; 
 57:       mouseOffset = e.GetPosition(AssociatedObject); 
 58:       AssociatedObject.CaptureMouse(); 
 59: }

2.  Add an Image control to the UI (MainPage.xaml) and import the System.Windows. Interactivity as xmlns:ia="clr-namespace:System.Windows.Interactivity; assembly=System.Windows.Interactivity" and xmlns:ic="clr-namespace:SLBehaviors" (which is the assembly that we created the MyBehavior class).

  1: <Canvas Width="400"> 
  2:     <Ellipse Canvas.Left="80" Canvas.Top="70" 
  3:                    Fill="OrangeRed" Width="40" Height="70"> 
  4:         <i:Interaction.Behaviors> 
  5:             <b:MyBehavior></b:MyBehavior> 
  6:         </i:Interaction.Behaviors> 
  7:     </Ellipse> 
  8: </Canvas>

3. Run the application


Thank you
BIMAL