title: UserControl child fill Window
body: <p>I have a UserControl that is a portion of a wpf window. </p>
  
  <pre><code>&lt;Window&gt;
      &lt;Grid&gt;
          &lt;!--some other display elements would be here--&gt;
          &lt;local:MyUserControl x:Name="Foo" Padding="0,42,0,50"/&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Inside MyUserControl I have an element that is a gallery that is normally hidden, but when visible, it should fill the entire screen. </p>
  
  <pre><code>&lt;UserControl&gt;
      &lt;Grid&gt;
          &lt;!--main display elements would be here--&gt;
          &lt;Grid Name="Gallery" Visibility="Hidden"&gt;
              &lt;Rectangle Fill="Black" Opacity="0.75"/&gt;
              &lt;TextBlock Name="GalleryLabel" Foreground="White" TextAlignment="Center"&gt;Current Image Title&lt;/TextBlock&gt;
              &lt;Button Name="CloseGallery" Style="{DynamicResource WhiteTextButton}" Margin="0,0,0,0" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Click="GalleryClose_OnClick"&gt;X&lt;/Button&gt;
              &lt;Image Name="GalleryImage" Margin="25"/&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>How can I set the Gallery to fill the entire Window rather than just the UserControl? </p>
  
  <p>I was able to get it to work by adding <code>Margin="0,-42,0,-50"</code> to Gallery, but I don't like that solution. I would rather do something that doesn't involve hard-coding values in the UserControl so that I would be able to have more flexiblility in using it.</p>
  
  <p>Normally it looks like:
  <a href="https://i.stack.imgur.com/3eYvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3eYvB.png" alt="Normal Window"></a>
  where the green Foo area is MyUserControl, and the rest of the things in the window are other elements.</p>
  
  <p>At certain points, I have a gallery display an image, which should fill the entire screen like:
  <a href="https://i.stack.imgur.com/P9V4R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P9V4R.png" alt="enter image description here"></a>
  which should fill the entire screen and have a black opaque overlay, along with an image displayed on top of the overlay.</p>