Up until Blend 3, UI designers had difficult time prototyping a real functional UI. The main problem was the lack of behaviors. Creating a UI prototype that deals with navigation, window creation on event, animation on data changes etc, usually ends up with source code development. And when it comes to coding, UI designers had to have kind of developer colleague.
XAML Tools
Over time, developers (like me :) created many XAML extensions using both XAML Markup Extensions and the powerful Attached Property mechanism. See this post for example. The main problems with such an approach are the lack of Blend support (no simple drag-drop mechanism for using those tools) and standardization.
Attached Behaviors
Blend 3 offers many new features for UI designer, and I think that the most powerful feature in Blend 3 is Attached Behaviors. You can think of an attached behavior as an action triggered by an event or property change and that could be attached to any visual element. For example clicking on a button, we want to change a visual state, navigate to different page or even popup a window. The great thing in these behaviors is that they use the same approach as many developers use to create their XAML tools I’ve described above, which are attached properties, and thanks to Blend 3 it’s very simple to use attached behaviors. You should just pick a behavior and drag-drop it on an element.
Using Behaviors
Lets say that you’ve designed a prototype with one or more buttons to control animation, and you want to start and stop the animation by clicking the buttons. In addition to that you want each button to be disabled if not relevant. As a UI designer it looks like I have to deal with logic, and logic is code!
Using Blend 3 behaviors we can easily achieve that as following:
-
Create the animation scenario.
-
Create start and stop buttons.
-
Go to Assets –> Behaviors in Blend 3.
-
Drag-drop ChangePropertyAction behavior to the Play button and set the behavior to disable the button.
-
Drag-drop ChangePropertyAction behavior to the Play button and set the behavior to enable the stop button.
-
Repeat these steps for the stop button.
Resources
For additional behaviors, go to Expression Gallery and search for the term “behavior”.
You may also find David Hill’s approach to Helix navigation using Blend behaviors very interesting.
You may download the demo code from here.
In the next post I’ll explain how to extend blend behaviors and demonstrate how to create custom behaviors.