Adding and Editing WinRT Behaviors with Blend

I am a huuuuuuge fan of Behaviors (and Actions and Triggers) for Silverlight and WPF. I have been very disappointed when WinRT turned out not to support them.

Luckily, Joost van Schaik created WinRTBehaviors on CodePlex (also available on NuGet). But his solution still lacks any Blend support. I have not been able to reproduce the full Blend behavior editing experience, but I managed to take the first baby-step that at least saves you from creating Behaviors from code.

Here is how to use the updated WinRTBehaviors with Blend.

First, let’s create a simple Behavior for illustration purposes. It can be attached to a Rectangle, and changes the Rectangle’s color when it is pressed. Told you it was simple

using WinRtBehaviors;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace WinRTBehaviorTest
{
    public class ChangeColorBehavior : Behavior<Rectangle>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.PointerPressed += (sender, args) => AssociatedObject.Fill = new SolidColorBrush(PressedColor);
        }

        public Color PressedColor
        {
            get { return (Color)GetValue(PressedColorProperty); }
            set { SetValue(PressedColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for PressedColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PressedColorProperty =
            DependencyProperty.Register("PressedColor", typeof(Color), typeof(ChangeColorBehavior), 
            new PropertyMetadata(Colors.Red));
    }
}

Now, let’s create a simple Metro Windows Store app in Blend, and add a Rectangle:

To add our behavior, first select the Rectangle, then look for the Interaction.Behaviors attached property in the Properties panel:

Press the … button:

Select <Other Type> from the Drop down:

Notice that Blend has already filtered all the types in our application and shown as those that inherit from Behavior<T>. You may want to do a search here, but we don’t need that since this is a simple project. Select ChangeColorBehavior here, and press OK, then press the Add button.

Our behavior is now listed and editable! However, since the Behavior class is a descendant of the FrameWorkElement class (in order to allow bindings), there are a lot of unused properties here. I’ll try to address this issue later, but for now, let’s be happy that the PressedColor property is visible, and also editable:

When you’re done, press OK, and let’s see how the application runs.

Then press on the rectangle:

Yaay!

By the way, thanks to the shared XAML visual editor in Visual Studio 2012 and Blend 5, the above also works in Visual Studio:

I’ll dig deeper into Behaviors and Blend and I’ll try to make them even easier to use for a non-developer without touching XAML. This is just the first step, stay tuned!

Note: the above code has already been checked in to CodeProject. Next, Joost will release a new version and update the NuGet package. Until that happens, you have to download the source code of WinRTBehaviors. Update: Joost has updated the NuGet package, all cool