title: UWP XAML Menu Popup with Visible Tab
body: <p>I'm trying to create a <code>Menu</code> in <code>UWP</code> that slides out from the left, but also always has a tab to click to open it. A picture of what I am trying to achieve is here - <a href="https://i.imgur.com/D7RPI0Q.png" rel="nofollow noreferrer">https://i.imgur.com/D7RPI0Q.png</a></p>
  
  <p>I have got so far with this with the below code, and it nearly works. But as the popup and a <code>transition effect</code>, the red tab moves instantly when it is clicked which is not ideal.</p>
  
  <p>I have a feeling that I'm trying to reinvent the wheel here and there is already something built in that allows this.</p>
  
  <pre><code>        &lt;Grid Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="50"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Popup x:Name="FilterPopup" IsLightDismissEnabled="False" Width="0" Height="500" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" IsOpen="False"&gt;
                  &lt;Popup.ChildTransitions&gt;
                      &lt;TransitionCollection&gt;
                          &lt;PaneThemeTransition Edge="Left"/&gt;
                      &lt;/TransitionCollection&gt;
                  &lt;/Popup.ChildTransitions&gt;
                  &lt;Rectangle Width="200" Height="500" Fill="Blue"/&gt;
              &lt;/Popup&gt;
              &lt;Rectangle Tapped="Rectangle_Tapped" Grid.Column="1" Height="200" Fill="Red"/&gt;
          &lt;/Grid&gt;
  
  
  
          private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
          {
              if (FilterPopup.IsOpen)
              {
                  FilterPopup.IsOpen = false;
                  FilterPopup.Width = 0;
              }
              else
              {
                  FilterPopup.IsOpen = true;
                  FilterPopup.Width = 200;
              }
          }
  </code></pre>