title: VisualStateGroup Triggering Animation in Another VisualStateGroup
body: <p>There's something fundamental about <code>VisualStateGroup</code>s that I'm not understanding. Everything I've read has led me to believe that they are orthogonal. That is, a state change in one group won't affect other groups. Indeed, they would be rather pointless if this were not the case.</p>
  
  <p>However, in an attempt to understand some odd behavior I was encountering, I put together a simple example that shows that a state change in one group can trigger an animation in another. I'm trying to understand how this can be.</p>
  
  <p>All I want is a <code>ToggleButton</code>-based control to have one appearance when toggled (<code>IsChecked == true</code>) regardless of whether it has focus or whether the mouse is over it, for example.</p>
  
  <p>Firstly, I have a very simple control that transitions between custom states in a custom group:</p>
  
  <pre><code>using System.Windows;
  using System.Windows.Controls.Primitives;
  using System.Windows.Input;
  
  [TemplateVisualState(Name = normalState, GroupName = activationGroupName)]
  [TemplateVisualState(Name = hoverState, GroupName = activationGroupName)]
  [TemplateVisualState(Name = activatedState, GroupName = activationGroupName)]
  public class CustomControl : ToggleButton
  {
      private const string activationGroupName = "Activation";
      private const string normalState = "Normal";
      private const string hoverState = "Hover";
      private const string activatedState = "Activated";
  
      public CustomControl()
      {
          this.DefaultStyleKey = typeof(CustomControl);
  
          this.Checked += delegate
          {
              this.UpdateStates();
          };
          this.Unchecked += delegate
          {
              this.UpdateStates();
          };
      }
  
      public override void OnApplyTemplate()
      {
          base.OnApplyTemplate();
          this.UpdateStates();
      }
  
      protected override void OnMouseEnter(MouseEventArgs e)
      {
          base.OnMouseEnter(e);
          this.UpdateStates();
      }
  
      protected override void OnMouseLeave(MouseEventArgs e)
      {
          base.OnMouseLeave(e);
          this.UpdateStates();
      }
  
      private void UpdateStates()
      {
          var state = normalState;
  
          if (this.IsChecked.HasValue &amp;&amp; this.IsChecked.Value)
          {
              state = activatedState;
          }
          else if (this.IsMouseOver)
          {
              state = hoverState;
          }
  
          VisualStateManager.GoToState(this, state, true);
      }
  }
  </code></pre>
  
  <p>Secondly, I have a template for this control that changes the background color based on the current state:</p>
  
  <pre><code>&lt;Style TargetType="local:CustomControl"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="local:CustomControl"&gt;
                  &lt;Grid&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="Activation"&gt;
                              &lt;VisualStateGroup.Transitions&gt;
                                  &lt;VisualTransition To="Normal" GeneratedDuration="00:00:0.2"/&gt;
                              &lt;/VisualStateGroup.Transitions&gt;
  
                              &lt;VisualState x:Name="Normal"/&gt;
  
                              &lt;VisualState x:Name="Hover"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="00:00:0.2" To="Red" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
  
                              &lt;VisualState x:Name="Activated"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="00:00:0.2" To="Blue" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
  
                      &lt;Grid x:Name="grid" Background="White"&gt;
                          &lt;TextBlock&gt;ToggleButton that should be white normally, red on hover, and blue when checked&lt;/TextBlock&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>For the most part it works, but when the control loses focus it transitions back to the normal state.</p>
  
  <p>I can get around this by explicitly handling focus changes in my control and enacting a state update:</p>
  
  <pre><code>public CustomControl()
  {
      this.DefaultStyleKey = typeof(CustomControl);
  
      this.Checked += delegate
      {
          this.UpdateStates();
      };
      this.Unchecked += delegate
      {
          this.UpdateStates();
      };
  
      // explicitly handle focus changes
      this.GotFocus += delegate
      {
          this.UpdateStates();
      };
      this.LostFocus += delegate
      {
          this.UpdateStates();
      };
  }
  </code></pre>
  
  <p>However, it makes no sense to me why I have to do this.</p>
  
  <p>Why is a state change in one <code>VisualStateGroup</code> causing an animation defined by another to execute? And what is the simplest, most correct way for me to achieve my stated goal?</p>
  
  <p>Thanks</p>