title: Make a button have different normal/hover appearances depending on state
body: <p>I'm working on making a simple Tic Tac Toe game in C# using UWP.</p>
  
  <p>I'd like to add some effects, so that when the mouse hovers over a cell, it shows a ghost of the symbol.  But if a symbol has already been placed there, it should fade the symbol slightly.</p>
  
  <p><strong>What would be a good way of achieving this?</strong></p>
  
  <blockquote>
    <p>Example of the desired effects:<br />
    <a href="https://i.stack.imgur.com/TiG75.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TiG75.png" alt="enter image description here"></a> <br />
    Top centre is symbol placed, mouse not over.<br>
    Centre is symbol placed, mouse over.<br>
    Centre right is symbol not placed, mouse over.<br>
    Other cells are symbol not placed, mouse not over.</p>
  </blockquote>
  
  <p>Currently, I have a ControlTemplate defined as such:</p>
  
  <pre class="lang-cs prettyprint-override"><code>&lt;VisualStateGroup x:Name="CommonStates"&gt;
      &lt;VisualState x:Name="NormalSolid" &gt;
          &lt;Storyboard&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0" Value="0.75"/&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/VisualState&gt;
      &lt;VisualState x:Name="PointerOverSolid"&gt;
          &lt;Storyboard&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0" Value="1"/&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.75"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/VisualState&gt;
      &lt;VisualState x:Name="Normal" &gt;
          &lt;Storyboard&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0" Value="0.25"/&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/VisualState&gt;
      &lt;VisualState x:Name="PointerOver"&gt;
          &lt;Storyboard&gt;
              &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                  &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.25"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/VisualState&gt;
  &lt;/VisualStateGroup&gt;
  </code></pre>
  
  <p></p>
  
  <p>Then, it is changed like so:</p>
  
  <pre><code>private void GameButton_PointerExited(object sender, PointerRoutedEventArgs e)
  {
      GameButton button = sender as GameButton;
      VisualStateManager.GoToState(button, "Normal" + (!this.ShapePlaced ? "" : "Solid"), true);
  
  }
  
  private void GameButton_PointerEntered(object sender, PointerRoutedEventArgs e)
  {
      GameButton button = sender as GameButton;
      VisualStateManager.GoToState(button, "PointerOver" + (!this.ShapePlaced ? "" : "Solid"), true);
  }
  </code></pre>
  
  <p>(Where GameButton is a simple subclass of Button, and PlayerIcon is a shape representing the shape drawn)</p>
  
  <p>But this leads to problems with click + dragging around the buttons, as well being unreliable. Would it be possible to place the 2 sets of states (shape placed vs not placed) in different VisualStateGroups, and switch the 'active' group depending on it's current state?</p>
  
  <p>Essentially, I need 2 Normal states, 2 PointerOver states, and a way to switch between them.</p>