title: What is the proper way to implement VisualStates for multiple VisualStateGroups?
body: <p>This question is a follow-up to <a href="https://stackoverflow.com/q/25801126/975724">my previous question</a> as well as <a href="https://stackoverflow.com/q/12589636/975724">this related question</a> about how <code>VisualStates</code> work in WPF.</p>
  <p>Currently, my understanding is that animating the same property within different <code>VisualStateGroups</code> can cause problems (see the linked questions).</p>
  <p>To resolve these problems, it requires loop-holes to be taken advantage of.  <em>(Perhaps loop-hole isn't the correct term, but it appears that the solution isn't what the WPF designers intended.)</em></p>
  <h2>I'm wondering what is the correct way to animate the same property in multiple <code>VisualStateGroups</code> without causing adverse side-effects.  If it is not possible, what is the correct route for achieving the same visual behavior for a control?</h2>
  <p>I was able to find some related documentation at <a href="http://msdn.microsoft.com/en-us/library/cc189093(v=vs.95).aspx#specifying_the_behavior_of_a_control_when_it_transitions_between_states" rel="nofollow noreferrer">MSDN</a>:</p>
  <blockquote>
  <p>The control is always in exactly one state per group. For example, a Button can have focus even when the mouse pointer is not over it, so a Button in the Focused state can be in the MouseOver, Pressed, or Normal state.</p>
  </blockquote>
  <p>This leads me to a second question...</p>
  <h2>How can you provide a visual behavior that should only occur when two specific <code>VisualStates</code> are active?</h2>
  <p>Take for example a <code>ToggleButton</code>:</p>
  <ul>
  <li>If the button is <strong>Checked</strong>, I would like to display <strong>Behavior 1</strong>.</li>
  <li>If the button is <strong>Disabled</strong>, I would like to display <strong>Behavior 2</strong>.</li>
  <li>Finally, if the button is <strong>Checked</strong> and <strong>Disabled</strong>, I would like to display <strong>Behavior 3</strong>.</li>
  </ul>
  <p>In the above example, how would you go about rendering the third visual behavior?</p>