title: Explaining how to use VisualStateManager for a beginner
body: <p>I know little Xaml/WPF. I'm trying to design a custom <code>Style</code> in a Windows 8 metro app for a <code>Button</code> which has a Magenta background, and when pressed, has a blue background.I understand I need to use <code>VisualStateManager</code> 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:</p>
  
  <pre><code>&lt;Style x:Name="test" TargetType="Button"&gt;
          &lt;Setter Property="Background" Value="Magenta"/&gt;
          &lt;Setter Property="Content" Value="Test style" /&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Grid&gt;                          
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                  &lt;VisualState x:Name="Pressed"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;turn the background blue&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you for your time </p>