×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

If you’ve heard the news about Silverlight 2 Beta 2 and Expression Blend 2.5 (June 2008 preview), you will notice something else in addition to being able to skin your controls easier.  Remember how you may have had to create different states for your element using “MouseOver State" and then create storyboards to transition to states?  There’s now a better way.

Enter VisualStateManager.

Let’s take a look and see if we can simplify this down a bit a basic understanding.  Let’s use something that most everyone should be able to relate to with states: Button.  A button has MouseOver, MouseOut, MouseDown, etc. states that you can see.  Using VisualStateManager and the new UI ability to customize templates, we can make our lives easier.

Start in Expression Blend and drop a button on the default design surface.  I’ve created mine larger just for context, but whatever you want is fine.  You should have something like this:

Now, using the method in one of my previous posts about skinning the controls, right-click on the button and choose to edit the template.  I’d choose Edit a Copy for now to make things easier for now…keep it a document resource as well.  After you’ve done that, take a look in the upper left pallette (assuming default and you haven’t moved your palettes around…in which case you probably already know about VSM and are smarter than me anyway):

The various states of this control are represented in this particular template.  Some other controls might have a blank palette here until some are added, but Button has some default states.  As a designer now you can simply concentrate on what the final look of the element (in our case a Button) in each state.  Just define the state and what the element should look like in that state.  The State palette shows a few things.  You’ll notice “Base” as well as two other named containers, “CommonStates” and “FocusStates” which are what are called state groups and containers for different states.

Beneath that you can select a state and see it’s final state.  Want to change the MouseOver state, select it in the state palette and start customizing the template.  Let’s change the MouseOver state, select it and let’s change some properties.  By default it looks like this:

You’ll also notice a few things changed.  Basically the design surface goes into Timeline recording mode and a subtle new feature in the objects palette indicating the property being animated/changed…in this case the BackgroundGradient:

I’m selecting the BackgroundGradient element and then changing the color within the Properties palette.  Let’s change it to red.  There is no need for me to pay attention to any timeline stop points or anything, just concentrate on what I want the final Button to look like, position, etc. in this state:

That’s it.  MouseOver will now represent my new state.  I didn’t have to create any new StoryBoard elements or anything.  This is in part where VSM does some magic.  You see, the VSM engine bascially knows the beginning end states between any given transition (i.e., Normal –> MouseOver).  The VSM engine automatically handles the transition for us.  Think of it as creating a dynamic StoryBoard on the fly and executing it.  If we run the application and mouse over the Button, it changes to our state.

Notice the time in the state palette for a given state:

This controls the duration of the transition TO that final state.

The VSM model also enables you to move between states via code.  VisualStateManager.GoToState() is a static method that enables you to move between states and optionally use the transition or just get to the state.  For example if we had our Button named "foo" and had some other event we could do this:

VisualStateManager.GoToState(foo, "MouseOver", true);

The last parameter is to use the transition or not.  True would do the transition based on the duration set in that state.  False just gets to that state.

The theory is that VisualStateManager now makes it easy for us with our skinning, etc., but also separates more from the developer/designer so that the designer can concentrate on the final look and experience of the final states rather than having to code something up.

A Button used above is a simple example and I hope it helps demonstrate the VSM class available.  There could be other uses than the simple Button of course :-) and I hope to see some creative uses.  As a for instance, I've seen a lot of applications with slide-out control panel implementations.  You could use VisualStateManager and set the "collapsed" and "open" states for a control panel and just concentrate on the final stages of each and let VSM handle the transitions, etc. 

For some further designer-driven tutorials on this model, head on over to Nibbles where Celso will have some tutorials on what VSM means to designers in more depth.  Also be sure to check out Christian’s blog for more information on VisualStateManager.

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


Gravatar
6/4/2008 11:42 AM | # re: Silverlight and the VisualStateManager
Great - will this work in WPF post 3.5 SP1?
6/4/2008 11:44 AM | # re: Silverlight and the VisualStateManager
Great stuff!!! This is the feature set that I've been waiting for....but linking to things I can't yet download is torture!

You make an announcement about something I really want but can't have. I see glimpses of things and can look but not touch. Congratulations to the powers that be...this week is rapidly becoming the nerdiest strip tease ever!

All joking aside, this looks amazing. I've done control skinning in other RIA environments but it's always been involved and cumbersome. This looks very rich and intuitive; can't wait to see what kind of applications come out of this.
6/4/2008 12:09 PM | # re: Silverlight and the VisualStateManager
Wow, very usefull tool :)

I can't wait any more. It's not fare that you already can use this and we can only watch! ;)
6/4/2008 12:39 PM | # re: Silverlight and the VisualStateManager
tretr
6/4/2008 3:44 PM | # We've been waiting for this!
Monica and I have been waiting for this! I'm so glad that it made it in. Skinning stuff with states was proving to be a real pain. I mean, it was doable (with a lot of F5ing), but it wasn't fun.

I'd really like to make great skins (ala Corrina), but the tool was in the way (at least in terms of designing for interactions). But now, there's nothing holding me back besides my lack of artistic skills ;)
6/6/2008 4:08 PM | # re: Silverlight and the VisualStateManager
Tim, you write great blog entries.

I'm also curious about whether this technique will be available in WPF 3.5 SP1? A quick hunt through the assemblies using Reflector didn't reveal VisualStateManager in the 3.5 SP1 beta bits.
Gravatar
6/7/2008 12:59 PM | # re: Silverlight and the VisualStateManager
cool :)
any plans on making VisualStateManager.GoToState() an extension method though? :)
6/7/2008 1:27 PM | # re: Silverlight and the VisualStateManager
@Rob: Later this year we will also be adding Visual State Manager (VSM) support to WPF as well, which will let you use the same approach with Windows applications as well as share control templates between WPF and Silverlight projects.
6/9/2008 8:46 PM | # re: Silverlight and the VisualStateManager
Can you provide us a running sample in visual studio 2008, not in expression 2.5?
6/11/2008 9:37 PM | # re: Silverlight and the VisualStateManager
@codism: if you look at the XAML that the Blend tool generates, that's your Visual Studio version. It essentially are nodes in the .Resources node of your element(s) with VisualStateGroup and VisualState nodes defining the final interaction.
6/16/2008 7:51 PM | # Visual State Manager
I was trying to create a UserControl in Visual Studio 2008 and use the Visual State Manager.

Would you have tips on that?

I was basically trying to create a ContentControl (below) and put:

bool ok = VisualStateManager.GoToState(this,"MakeRed",false);

in the UserControl constructor but nothing seemed to happen. I haven't found out how to set the "visual group" or how it figures into the whole VisualStateManager architecture although I do understand how it's used in the provided controls. I just don't know how it's set.

<ControlTemplate>
<Grid>
<Grid.RowDefinitions >
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>

<vsm:VisualStateManager.VisualStateGroups >
<vsm:VisualStateGroup x:Name="Normal" >
<vsm:VisualState x:Name="MakeRed" >

<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="(Rectangle.Fill)(SolidColorBrush.Color)"
To="Red"
Duration="0:0:0.5" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups >

<Rectangle
x:Name="MyRect"
Grid.Column="0"
Width="20"
Height="20"
Fill="Blue"/>

<ContentPresenter Grid.Column="1"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
6/17/2008 8:42 AM | # re: "Would you have tips on that?"

I think that I've found my answer! I moved the VisualStateManager class into the parent (the contentcontrol is in a grid) and now things work and, apparently, I can't target Name's inside the ControlTemplate either so MyRect is now outside of the template. Perhaps VisualStates can impact stuff inside of a control template but I'm not sure.
7/22/2008 9:49 AM | # re: Silverlight and the VisualStateManager
Terrific post. You explain how to work with VSM using a simple control that has states everyone can visualize. You gave me an elegant idea to show/hide the controls for a Silverlight app I'm working on:

"applications with slide-out control panel implementations [with] "collapsed" and "open" states"

Thanks.

9/22/2008 8:54 AM | # re: Silverlight and the VisualStateManager
Can I get the visual state manager for my .NET 3.5 yet? I'd sure like to use this.
9/22/2008 9:10 AM | # re: Silverlight and the VisualStateManager
9/25/2008 8:02 AM | # re: Silverlight and the VisualStateManager
Anyone know how to check what the state is of a component though?
9/30/2008 1:28 AM | # re: Silverlight and the VisualStateManager
How can a VisualStateGroup be reused across controls? The XAML created by the example above has the UIElement name hard coded -- how can I make this dynamic? For example if I want to use the states created in this example across seven buttons, do I need to have seven identical VisualStateGroups or can one be reused?
10/10/2008 9:15 AM | # re: Silverlight and the VisualStateManager
Thomas:
The VisualStateManager is in the "actual control". You then re-use the control 7 times to get 7 buttons. If they need different styles, you just change their templates. The VSM is in the logic side and decides what states a control should have. How many times you instantiate the control doesn't matter. They all share the same states...but might have different templates...
2/23/2009 10:22 AM | # re: Silverlight and the VisualStateManager
One importing thing lacking is a MouseOff state. Every client/designer immediate asks for a mouseOff state. Most Silverlight button control are missing this vital state.
Also lacking, a trasition option or back to 'base state' that could essentially function as a mouse off state.

I could build a custom control, but rebuilding every state? yuk.
2/23/2009 2:57 PM | # re: Silverlight and the VisualStateManager
Alek -- it's called MouseLeave (and MouseEnter)
4/9/2009 10:44 AM | # Expression Bledn 2.5 Preview Expired and Conflicts with VS Web Developer
Seemlingly the Expression Blend 2.5 Preview is expired. It can still be downloaded and installed, but if I start it, the message comes, that it is expired and the subsequent version should be used.
In some blogs I found, that the functionality of 2.5 is said the be downgraded to 2.0 SP1.
Moreover seeminlgy 2.5 is not compatible with MS VS Web Developer 2008. It breaks the compilation. Only after deinstall and install of 2.0 SP 1 again, VS also works.
However in 2.0 SP 1 I could not reproduce the behavior you describe.
I managed to edit XAML Visual State Machines with Storyboards. This works. But Expression Blend did not help me much with this.
The "don't worry about the details" functionality is still not accessible to me.
8/4/2010 3:07 AM | # re: Silverlight and the VisualStateManager
Thanks very much, this is quite straight forward help. :)
1/10/2011 3:50 AM | # re: Silverlight and the VisualStateManager
Hi Tim, I'm having some trouble in turning the wpf triggers in Silverlight VisualStateManager functionality. I have this simple style that allows me to have a red border on a selected ListBoxItem.

<Style x:Key="SelectableThumb" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Border" Margin="2" CornerRadius="2" Padding="2" BorderBrush="LightGray" BorderThickness="2" >
<Image Margin="1" Stretch="None" Source="{Binding Path=Thumb}" Cursor="Hand"></Image>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Is this functionality replicable with a VSM?
Do you know of some sample already existing in the internet jungle?
Thanks
2/22/2011 11:15 PM | # re: Silverlight and the VisualStateManager
hey tim plzz help me...
here is the link of a banner that i made in silverlight....

www.mycareerengine.com/main/web/cr/TestPage.html

i want to make the buttons work but m not able to can u plzz help me..????

 
Please add 4 and 1 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.