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.