Center popup in XAML

Question

I have created a Popup by using the following code, but I can not figure out how to center it
I tried to automatically change the margin on runtime, but I could not figure out how to do it, but do anybody has an idea of how to center the popup?
It does not has a standard-dimension cause I need to globalize my program

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="MainGrid">
   <Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup">
      <Grid>
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" />
         <TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
         <TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" />
         <TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
         <PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" />
         <StackPanel  Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal">
            <Button Name="Login"  x:Uid="LoginPopupLogin"  />
            <Button Name="Cancel" x:Uid="LoginPopupCancel" />
         </StackPanel>
      </Grid>
   </Popup>
</Grid>

UPDATE

I tried with user1603313's answer below, but it did not do the trick, as it says the size of the grid inside the popup is NaN.
I also tried to move the method into the grid, but it didn't do the trick either
The method I am talking about is this with the grid updated properly

private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e)
{
   LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
   LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;
}

Solution 1

Here's a solution to you problem. i am rewriting the xaml code and along with the modification and you can find the explanation after the code.

     <Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup" Loaded="LoginPopup_Loaded_1">
        <Grid Background="Red" x:Name="gdChild" Height="Auto" Width="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" />
            <TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
            <TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" />
            <TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
            <PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" />
            <StackPanel  Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal">
                <Button Name="Login"  x:Uid="LoginPopupLogin"  />
                <Button Name="Cancel" x:Uid="LoginPopupCancel" />
            </StackPanel>
        </Grid>
    </Popup>

Here I have added an event Loaded="LoginPopup_Loaded_1" to the xaml of the popup

Here's the event code in C#

    private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e)
    {
        LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
        LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;
    }

Explanation :

HorizontalOffset gets the distance between the left side of the application window and the left side of the popup.

Similarly vertical offset gets the distance between the top of the window and top of the popup

SINCE we have to center align it so we have to subtract half the width and the height of the popup from the the width and the height of the application window ( center of the popup is half the distance of the popup from it's top and left boundary )

the code is written in Loaded="LoginPopup_Loaded_1" event because this event is called when the element is rendered in the application window and Grid is taken because it is the container Grid of all the child elements.

i hope m clear :)

Solution 2

Re : And is it possible to run Loaded, when the screen is rotated? – The87Boy 24 mins ago

Answer to this is yes you can execute the same set of code by creating a method and call that method on Window.Current.SizeChanged += Current_SizeChanged;

 void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    {
        //call custom method from loaded event as well as size changed event
    }