title: How to Center a Popup Control on a Page
body: <p>I have the following <code>Popup</code> that I am using which is by default in the upper left hand corner of the screen. I would like to be able to center this within my view so that I can stretch it to the width and height of the screen as well and change the opacity. I would like the user to be able to see what is behind the popup when it is displayed on the screen, but have the popup cover everything as well. What I have so far is as follows</p>
  
  <pre><code>&lt;Grid x:Name="filterGrid"&gt;
                  &lt;Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.5"&gt;
                      &lt;Border Margin="3" BorderBrush="{StaticResource PhoneForegroundBrush}"&gt;
                              &lt;StackPanel Background="#FF1BA1E2"&gt;
                              &lt;TextBlock x:Name="modeTextBlock" HorizontalAlignment="Center"/&gt;
                              &lt;TextBlock Text="Do you wish to purchase the application?" TextWrapping="Wrap" HorizontalAlignment="Center"/&gt;
                                  &lt;Grid Margin="0,10" &gt;
                                  &lt;Grid.ColumnDefinitions&gt;
                                      &lt;ColumnDefinition Width=".5*"/&gt;
                                      &lt;ColumnDefinition Width=".5*"/&gt;
                                  &lt;/Grid.ColumnDefinitions&gt;
                                      &lt;Button x:Name="purchaseButton" Grid.Column="0" Content="purchase" Click="popupButton_Click"/&gt;
                                      &lt;Button x:Name="cancelButton" Grid.Column="1" Content="cancel" Click="popupButton_Click"/&gt;
                                  &lt;/Grid&gt;
                              &lt;/StackPanel&gt;
                      &lt;/Border&gt;
                  &lt;/Popup&gt;
              &lt;/Grid&gt;
  </code></pre>
  
  <p>Whenever I try to set <code>Width="Center"</code> and <code>Height="Center"</code> within the <code>Popup</code> element like the following</p>
  
  <pre><code>&lt;Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
  </code></pre>
  
  <p>The top left corner is what is centered, and so the popup is not centered in the middle of the control itself. Is there a way to calculate the proper dimensions based on the popup width and height as well as the page width and height and apply this accordingly? Or is there a way to do this correctly within XAML? Also, the Opacity value is not being set?</p>