Dotneteers.net
All for .net, .net for all!

Adding and Editing WinRT Behaviors with Blend

VBandi's blog

Syndication

Subscribe

Generic Content

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 Smile

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:

image

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

image

Press the … button:

image

Select <Other Type> from the Drop down:

image

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.

image

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:

image

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

image

Then press on the rectangle:

image

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:

image

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 Smile


Posted Sep 14 2012, 11:06 AM by vbandi

Comments

Joost van Schaik wrote re: Adding and Editing WinRT Behaviors with Blend
on Fri, Sep 14 2012 11:46

NuGet package armed an ready sir ;-) Thanks for helping out, this is turning out to be a true community effort!

Adding and Editing WinRT Behaviors with Blend | azkafaiz.com wrote Adding and Editing WinRT Behaviors with Blend | azkafaiz.com
on Fri, Sep 14 2012 12:31

Pingback from  Adding and Editing WinRT Behaviors with Blend | azkafaiz.com

Adding and Editing WinRT Behaviors with Blend wrote Adding and Editing WinRT Behaviors with Blend
on Fri, Sep 14 2012 13:30

Pingback from  Adding and Editing WinRT Behaviors with Blend

Dew Drop – September 14, 2012 (#1,401) | Alvin Ashcraft's Morning Dew wrote Dew Drop &ndash; September 14, 2012 (#1,401) | Alvin Ashcraft&#039;s Morning Dew
on Fri, Sep 14 2012 14:16

Pingback from  Dew Drop – September 14, 2012 (#1,401) | Alvin Ashcraft's Morning Dew

Windows 8 Developer Links – 2012-09-17Dan Rigby | Dan Rigby wrote Windows 8 Developer Links &#8211; 2012-09-17Dan Rigby | Dan Rigby
on Mon, Sep 17 2012 3:59

Pingback from  Windows 8 Developer Links – 2012-09-17Dan Rigby | Dan Rigby

Joel Cochran » Weekly roundup 09/21/12 wrote Joel Cochran &raquo; Weekly roundup 09/21/12
on Fri, Sep 21 2012 20:02

Pingback from  Joel Cochran » Weekly roundup 09/21/12

Mike Brown wrote re: Adding and Editing WinRT Behaviors with Blend
on Thu, Oct 11 2012 4:28

You can derive an attached behavior from dependency object. Eliminates some of the overhead of using framework element. Check out my post on Attached Behaviors in WinRT www.azurecoding.net/.../attached-behaviors-in-winrt

joseph12 wrote re: Adding and Editing WinRT Behaviors with Blend
on Tue, Oct 23 2012 17:41

keep visiting this blog site.Thanks for sharing it.

<a href="chrisbenoit12.blog.com/.../">android mobile development</a>