title: How do I correctly bind a Popup to a ToggleButton?
body: <p>I am trying to do something that seems relatively simple and logic from a user interface level but I have one bug that is very annoying. I have a <code>ToggleButton</code> and I am trying to show a <code>Popup</code> when the button is toggled in and hide the <code>Popup</code> when the button is toggled out. The <code>Popup</code> also hides when the user clicks away from it.</p>
  
  <p>Everything is working as expected with the following XAML except when I click the toggle button after the <code>Popup</code> is shown, the <code>Popup</code> disappears for a split second then reappears.</p>
  
  <p>I suspect what's going on here is that clicking away from the <code>Popup</code> is causing it to toggle the button off then immediately after the button is toggled back on as the mouse clicks it. I just don't know how to go about fixing it.</p>
  
  <p>Any help is appreciated. Thanks.</p>
  
  <pre><code>    &lt;ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" /&gt;
  
      &lt;Popup StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}"&gt;
          &lt;Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black"&gt;
              &lt;TextBlock&gt;This is a test&lt;/TextBlock&gt;
          &lt;/Border&gt;                
      &lt;/Popup&gt;
  </code></pre>