XAML 中的中心弹出窗口

Question

我使用以下代码创建了一个弹出窗口，但我不知道如何将其居中
我试图在运行时自动更改边距，但我不知道该怎么做，但是有人知道如何使弹出窗口居中吗？
它没有标准尺寸，因为我需要全球化我的程序

<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>

更新

我在下面尝试了 user1603313 的答案，但它没有成功，因为它说弹出窗口内的网格大小是 NaN。
我也尝试将方法移到网格中，但它也没有成功
我正在谈论的方法是正确更新网格

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;
}

Answer 1

这里有一个解决您问题的方法。我正在重写xaml代码和修改，你可以在代码后面找到解释。

     <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>

这里我在弹出窗口的 xaml 中添加了一个事件 Loaded="LoginPopup_Loaded_1"

这是 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;
    }

解释：

Horizo​​ntalOffset 获取应用程序窗口左侧和弹出窗口左侧之间的距离。

类似垂直偏移获取窗口顶部和弹出窗口顶部之间的距离

因为我们必须将其居中对齐，所以我们必须从应用程序窗口的宽度和高度中减去弹出窗口的宽度和高度的一半（弹出窗口的中心是弹出窗口到其顶部距离的一半和左边界）

代码写在Loaded="LoginPopup_Loaded_1"事件中，因为在应用程序窗口中渲染元素时调用该事件，并采用Grid，因为它是所有子元素的容器Grid。

我希望我清楚:)

Answer 2

关于 x:name 和 name 属性，你问我要解释的内容与下面链接中写的相同

x:name and name difference silverlight

还可以通过此链接查看 WPF

In WPF, what are the differences between the x:Name and Name attributes?

根据我的一般理解，名称是类的属性（例如：Grid 或 TextBlock 等等），但没有名称属性的类需要以某种方式访问​​（例如：StoryBoard 等），因此提供目的 x:name。在 initializecomponent 方法调用期间，x:name 和 name 使用 FindName(string) 方法映射到类，以便它们变得可访问。

现在内部发生的事情是长话短说

MainPage.xaml -> MainPage.g.i.cs -> MainPage.xaml.cs

Answer 3

Re: 屏幕旋转时是否可以运行Loaded？ – The87Boy 24 分钟前

答案是肯定的，您可以通过创建一个方法并在 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
    }