XAML中的中心弹出窗口 [英] Center popup in XAML

问题描述

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

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>

更新

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

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

推荐答案

这是解决您问题的方法.我正在重写xaml代码以及所做的修改，您可以在代码后找到解释.

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>

在这里，我已将事件Loaded="LoginPopup_Loaded_1"添加到弹出窗口的xaml中

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

这是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获取应用程序窗口左侧和弹出窗口左侧之间的距离.

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 )

代码是用Loaded="LoginPopup_Loaded_1"事件编写的，因为在元素在应用程序窗口中呈现时调用此事件，而采用Grid是因为它是所有子元素的容器Grid.

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.

我希望我明白了:)

这篇关于XAML中的中心弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！