Silverlight Behaviors Example

By John at November 02, 2009 15:57
Filed Under: Techy

I would encourage everyone who works with Silverlight to take a good hard look at Behaviors.  A Behavior is basically some code-behind logic that operates on Silverlight UI elements, bundled into a nice little package that can be in Xaml.  Behaviors can support parameters as well, making them both flexible and extensible.  In Expression Blend 3, several behaviors are provided out-of-the-box.  There is a drag/drop behavior, and a behavior that allows you to control storyboard animations based on events, just to name a couple. 

Below is a Silverlight example of a Rectangle that uses these two behaviors.  When the mouse enters the rectangle, it will alternate colors between red and yellow.  You can also drag the rectangle around.  Check it out…

And here is the Xaml representation of the above Silverlight application:

  1. <UserControl
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
  5.     xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
  6.     xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
  7.     x:Class="BehaviorsDemo.MainPage"
  8.     Width="640" Height="480">
  9.     <UserControl.Resources>
  10.         <Storyboard x:Name="BlueToYellow" AutoReverse="True" RepeatBehavior="Forever">
  11.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectDemo" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
  12.                 <EasingColorKeyFrame KeyTime="00:00:01" Value="#FFFEFF00"/>
  13.             </ColorAnimationUsingKeyFrames>
  14.         </Storyboard>
  15.     </UserControl.Resources>
  16.     <Canvas x:Name="LayoutRoot" Background="White">
  17.         <Rectangle x:Name="rectDemo" Fill="#FF000BFF" Height="51" Width="58" Canvas.Left="202" Canvas.Top="116">
  18.             <i:Interaction.Triggers>
  19.                 <i:EventTrigger EventName="MouseEnter">
  20.                     <im:ControlStoryboardAction Storyboard="{StaticResource BlueToYellow}"/>
  21.                 </i:EventTrigger>
  22.                 <i:EventTrigger EventName="MouseLeave">
  23.                     <im:ControlStoryboardAction Storyboard="{StaticResource BlueToYellow}" ControlStoryboardOption="Stop"/>
  24.                 </i:EventTrigger>
  25.             </i:Interaction.Triggers>
  26.             <i:Interaction.Behaviors>
  27.                 <il:MouseDragElementBehavior />
  28.             </i:Interaction.Behaviors>
  29.         </Rectangle>
  30.     </Canvas>
  31. </UserControl>

As you can see this is about 30 lines of Xaml that I was able to produce with simple point and click in Expression Blend.  Notice the elements that start with <i:…/>  These are the behaviors that control the storyboard and mouse drag.

The beauty of Behaviors is that they are so easy to use and are highly reusable.  They can also be quite powerful when combined together to create complex user interactions.

Using Element-To-Element Databinding to access elements inside DataTemplates

By John at September 12, 2009 15:14
Filed Under: Techy

A common situation I run into is the need to access some element within a DataTemplate.  Silverlight isn't able to auto-generate strongly typed references to these elements in code behind.  In other words, adding the "x:Name=myElementName" property to the element doesn't matter from a code-behind standpoint.  However, we can use the x:Name in a different way to access our element at the right moment. Enter: Element-To-Element databinding.  I think many of us know how to bind to property of another element, but it is also possible to bind to the element itself.

The scenario:

More...

GridSplitter Inside a TabItem

By John at September 12, 2009 15:03
Filed Under: Techy

Someone on Silverlight.net was having trouble with this one so I worked up an example.  Here’s the Xaml:

  1. <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="GridsplitterInTabItem.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  6.   <Grid x:Name="LayoutRoot">
  7.         <controls:TabControl>
  8.             <controls:TabItem Header="Tab 1">
  9.                 <Grid>
  10.                     <Grid.ColumnDefinitions>
  11.                         <ColumnDefinition Width="*"></ColumnDefinition>
  12.                         <ColumnDefinition Width="*"></ColumnDefinition>
  13.                     </Grid.ColumnDefinitions>
  14.                     <Grid Background="Red"></Grid>
  15.                     <Grid Background="Blue" Grid.Column="1"></Grid>
  16.                     <controls:GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left"></controls:GridSplitter>
  17.                 </Grid>
  18.             </controls:TabItem>
  19.             <controls:TabItem Header="Tab 2"></controls:TabItem>
  20.         </controls:TabControl>
  21.     </Grid>
  22. </UserControl>

 

Here’s the working version of it:

What is myOSity?

myOSity is a On-Demand Operating System that runs in your browser.  You can run applications, work with files, keep in touch and share things with your friends, and more.  The goal of myOSity is to combine the best aspects of operating systems and social networking, while hopefully leaving out all the annoying stuff.

Curious?

To check out myOSity for yourself click here.

Have a game or other Silverlight project that you want to become part of the growing list of applications on myOSity? Contact Me for details.

Join The Team!

Currently looking for other developers interested in being a part of the project.  Contact Me for details or read this post.

About John

I am the founder and lead designer of myOSity.com.  I've been a technologist, in one form or another, for over 20 years.

Protected by Commentor
0 comments approved
4 spam caught
Since December 1, 2008
Powered by Spam Counter