XAML中的中心弹出窗口

时间:2012-12-16 22:38:12

标签: xaml windows-8 microsoft-metro windows-runtime winrt-xaml

我使用以下代码创建了一个Popup,但我无法弄清楚如何将它居中 我试图在运行时自动更改边距,但我无法弄清楚如何做到这一点,但有人知道如何将弹出窗口居中吗?
它没有标准维度,因为我需要全球化我的程序

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

3 个答案:

答案 0 :(得分:9)

这是解决问题的方法。我正在重写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。

我希望很清楚:)

答案 1 :(得分:1)

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
    }

答案 2 :(得分:0)

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

x:name and name difference silverlight

并通过此链接获取WPF

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

根据我的一般理解,Name是Class的一个属性(例如:Grid或TextBlock等等),但是没有name属性的类需要以某些方式访问(例如:StoryBoard等),所以目的x:提供名称。在initializecomponent方法调用期间,使用FindName(string)方法将x:name和name映射到类,以使它们可以访问。

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

MainPage.xaml - &gt; MainPage.g.i.cs - &gt; MainPage.xaml.cs中