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.

Solitaire

By John at January 05, 2009 17:54
Filed Under: Non-Techy

sol_screenshot No self-respecting operating system type platform would be worth it’s darn without an implementation of good ‘ole Klondike solitaire.

Solitaire is included as part of available the current myOSity applications, and I’ve included the source code below, for those interested in how it works.

The real reason I wrote this was to have something half-way interesting to look at, and test with, while I was in the earliest stages of myOSity development.  It was also a proving ground to learn some basic UI mechanics of Silverlight (drag & drop, etc).  It could use a little polish (no designer here!), but it does the job.

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