Silverlight VisualState changes using DataBinding not code behind
I hate the fact that I have to keep using code behind to trigger VisualState changes in my view. Frequently I just want to change a visual state of a control based on the properties of the object to which the control is bound – such as making additional options visible or invisible, changing the mode of the display based on information stored in the model etc.
So I’ve come up with a control that helps! The VisualStateController can be placed in the XAML for a control and be bound to a property of the databound object using its StateMode dependency property.
- If the property is a bool then two further properties OnState and OffState are used to determine the visual state of the control based on the value of the property.
- If the property is an enum then the visual state will be set the the text string name of the enum value.
- If the property is a string it will be used to directly set the visual state
Now changes causing normal binding updates will automatically trigger the visual state changes.
<VisualStateCtrls:VisualStateController StateMode="{Binding IsSelected}"
OnState="Selected"
OffState="Unselected"/>
<VisualStateCtrls:VisualStateController StateMode="{Binding IsResizable}"
OnState="Sizers"
OffState="NoSizers"/>
The VisualStateController binds automatically to the UserControl (or Control) that it is a child of. You can put it inside any panel within the body of your UserControl’s XAML.
You can find the project and source code here.
If you want to achieve the same thing using triggers and a slightly more wordy approach, you can use blend and triggers – see here for details.
Hi Mike,
I have an issue, maybe you could guide me a little, I have a combobox, with a required validation. If it is null and I try to save, it gets the red contourn (invalid visual state I guess). If I select one item, the red validation rectangle doesn’t go away, in fact I have to delete the error property in the ValidationErrors of my entity (I don’t know why yet). How could I change the visual state of my control!
I’m not an expert on validation, but the thing to do would be to use VisualStateManager.GotoState to set the validation state of the control to the mode which indicates valid. If the combo hasn’t been restyled then you would do something like:
VisualStateManager.GotoState(myCombo, “Valid”, true);
Hi Mike, I’m missing something obvious here – how is the VisualStateController associated with a control on a form?
David
It walks the visual tree and attaches to the first parent Control that it finds. So normally you just put it anywhere inside a panel within a UserControl and it sets the visual state of that UserControl.
Best
Mike
If you want to set visual states on sub controls – you should probably use the Blend triggering method – I’m using mine to set the state of a control that is editing some datacontext. I guess I could add a target control property that if set would use that one instead – didn’t need that for my own stuff, but might be useful…