Explaining how to use VisualStateManager for a beginner

Question

I know little Xaml/WPF. I'm trying to design a custom Style in a Windows 8 metro app for a Button which has a Magenta background, and when pressed, has a blue background.I understand I need to use VisualStateManager but I can't find anything online which makes sense to someone with little knowledge of the subject. There's a lot of assumed knowledge. Here's what I've got so far:

<Style x:Name="test" TargetType="Button">
        <Setter Property="Background" Value="Magenta"/>
        <Setter Property="Content" Value="Test style" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>                          
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <turn the background blue>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This code may be very wrong but as I said, I've been trying to patch bits of information I don't understand together to create an outcome.

Thank you for your time

Answer 1

Don't even bother trying to write it by hand as a beginner. The original mechanism from WPF (Triggers) was pretty simple to write by hand, but VSM that is meant to serve as its replacement on the newer XAML platforms is much more verbose and designed specifically to be used in design tools.

To save yourself a lot of headache just do the editing in Blend and then you can look at the XAML it generates if you want to learn more of the detail to edit by hand in the future. The Blend experience is pretty straightforward - select a state to edit in the States panel and you'll see a preview of it. Any changes you make while that State is selected will then be applied as Storyboards on that State.

Answer 2

I am sure there are many people around here, taking the time to write an explanation how you create visual states and what they're for. Still I will take a little time to explain some things about VSM that I believe are not mentioned in the docs, but are good knowing:

You already know that you can change between different graphical representations of your control. These States are exclusive within a scope (VisualStateGroup). Meaning You can define a group with three states f.e. Regular, Pressed and MouseOver. Only one state within a group can applied at a given time, but you can combine these with other groups like Writeable or Readonly States.

How are they correctly used: Not looking at special cases you normaly have a single Method UpdateStates(bool useTransitions) within your control holding a few to many if cases. You check your internal control state like

if (this.IsReadOnly) -> VisualStateManager.GoToState("ReadOnlyState",...

The UpdateStates Method gets called whenever you change... well state. Meaning you will have DependencyProperties and for each (relevant) a DPChangeHandler (at the register call). Inside the ChangeHandler (and where else needed) you just call the UpdateStates Method and let your control decide which state activate.

This is at least how MS does it inside their Controls.

Hope that helped you a little. :)