Visual State Manager or rather Behavior(part 1)

During an interesting event last week, discussing the virtues of Silverlight apps out of the browser, I was confronted with Behavior. I should probably be ashamed because I never heard of them before. Because they have a high coolness- and awesomeness-level I checked if they were also available for Windows Phone, and hooray,  they are!

Now what are they about ? In WPF you can use Triggers, to react on certain "events", like this one :

<Button.Triggers>
    <EventTrigger RoutedEvent="Click">
        <BeginStoryboard Storyboard="{StaticResource mySB}"/>
    </EventTrigger>
</Button.Triggers>

Specially useful when you're creating your own Controltemplates. Unfortunately they're not available in Silverlight (except for the Loaded-event).  When creating your own controls, and you need them to have some kind of visual feedback, we'll have to use the Visual State Manager.

In my little example I have a WP7-app that regularly calls a "Distance-service" that gives the shortest distance between you and your geographically closest friend (could be something Foursquare provides). The closest distance will be shown by some small colored ellipse. Whenever the distance changes, the color changes.

Let's start by the service: I have a little WCF library that I'm hosting in a WPF-app. Service looks like this:

public class DistanceService : IDistanceService
{
    public double GetDistance()
    {
        return DistanceHelper.Distance;
    }
}

Can't make them smaller than this. What about this DistanceHelper ?

public static class DistanceHelper
{
    private static double distance=10;
 
    public static double Distance
    {
        get { return distance; }
        set { distance = value; }
    }        
}

My MainWindow only has a slider going from 0 to 10, with an eventhandler for the ValueChanged. In this eventhandler I simply set the DIstance-property from DIstanceHelper:

 1: private void distanceSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
 2: {
 3:     DistanceHelper.Distance = distanceSlider.Value;
 4: }
 5:  
 6: private void Window_Loaded(object sender, RoutedEventArgs e)
 7: {
 8:     host = new ServiceHost(typeof(DistanceServiceLib.DistanceService));
 9:     host.Open();
 10: }
 11:  
 12: private void Window_Unloaded(object sender, RoutedEventArgs e)
 13: {
 14:     host.Close();            
 15: }

I also configured my WCF-service to use simple basicHttpBinding.

In my WP7-app I start by creating a service reference towards my service. This will be used by a helper-class DistanceReader:

 1: public static class DistanceReader
 2: {
 3:     static DistanceReader()
 4:     {
 5:         DispatcherTimer timer = new DispatcherTimer();
 6:         timer.Interval = new TimeSpan(0, 0, 10);
 7:         timer.Tick += (s, ea) => 
 8:         {
 9:             var proxy = new DistanceServiceRef.DistanceServiceClient();
 10:             proxy.GetDistanceCompleted+=(s2,ea2)=>
 11:             {
 12:                 DistanceReader.LastDistance = ea2.Result;
 13:             };
 14:             proxy.GetDistanceAsync();
 15:         };
 16:         timer.Start();
 17:     }
 18:     
 19:     public static event EventHandler<DistanceEventArgs> DistanceChanged;
 20:  
 21:     public static void OnDistanceChanged(DistanceEventArgs e) 
 22:     {
 23:         if (DistanceChanged!=null)
 24:         {
 25:             DistanceChanged(typeof(DistanceReader), e);
 26:         }
 27:     }
 28:  
 29:     private static double lastDistance;
 30:     public static double LastDistance
 31:     {
 32:         get { return lastDistance;}
 33:         set 
 34:         {
 35:             if (lastDistance!=value)
 36:             {
 37:                 lastDistance = value;
 38:                 OnDistanceChanged(new DistanceEventArgs() { Distance=value});
 39:             }                
 40:         } 
 41:     }
 42: }

This class calls the service (every 10 seconds) and raises an event whenever the distance changes. Now, how to show this ? Let's start by the VSM-approach.  But that is something I'll leave for part 2.