调整父级大小时如何确保弹出控件与其父级页面匹配？ UWP

Question

我有一个弹出窗口，打开时会填满整个页面。

<Grid x:Name="gridRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Open" HorizontalAlignment="Center" Click="{x:Bind viewModel.OpenPopup}" />
    <Popup x:Name="popupCorrect" VerticalAlignment="Top" IsOpen="{Binding IsOpen}" IsLightDismissEnabled="False">
        <Popup.ChildTransitions>
            <TransitionCollection>
                <PaneThemeTransition Edge="Left" />
            </TransitionCollection>
        </Popup.ChildTransitions>
        <uc:MyPopup  Width="{Binding ElementName=gridRoot, Path=ActualWidth}" Height="{Binding ElementName=gridRoot, Path=ActualHeight}"/>
    </Popup>
</Grid>

弹出窗口是一个用户控件

<Grid Background="Red">
    <Button Content="Close" HorizontalAlignment="Center" Click="{x:Bind viewModel.ClosePopup}" />
</Grid>

1. 页面

1. 显示弹出窗口时

1. 关闭弹出窗口，调整页面大小，然后重新打开弹出窗口。请注意，即使它的 Width 和 Height 绑定到 gridRoot ，它也不匹配容器页面的新大小。我是否必须为弹出窗口手动设置新的Width 和Height？为什么我不能通过绑定来实现这一点？在“OrientationChanged”期间，此问题也出现在移动设备上

Answer 1

根据 Decade Moon 的评论，这是如何调整弹出窗口的大小以匹配父容器的大小变化。

在后面的代码中创建一个依赖属性

    public double PageWidth
    {
        get { return (double)GetValue(PageWidthProperty); }
        set { SetValue(PageWidthProperty, value); }
    }

    public static readonly DependencyProperty PageWidthProperty =
        DependencyProperty.Register("PageWidth", typeof(double), typeof(GamePage), new PropertyMetadata(0d));



    public double PageHeight
    {
        get { return (double)GetValue(PageHeightProperty); }
        set { SetValue(PageHeightProperty, value); }
    }

    public static readonly DependencyProperty PageHeightProperty =
        DependencyProperty.Register("PageHeight", typeof(double), typeof(GamePage), new PropertyMetadata(0d));

更新SizeChanged事件的值

    private void GamePage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width > 0d && e.NewSize.Height > 0d)
        {
            PageWidth = e.NewSize.Width;
            PageHeight = e.NewSize.Height;
        }
    }

然后在 XAML 中，只需使用 x:Bind 来绑定弹出框的宽度和高度

        <Popup x:Name="popupCorrect" VerticalAlignment="Top" IsOpen="{Binding IsPopupCorrectOpen, Mode=TwoWay}" IsLightDismissEnabled="False">
        <Popup.ChildTransitions>
            <TransitionCollection>
                <PaneThemeTransition Edge="Left" />
            </TransitionCollection>
        </Popup.ChildTransitions>
        <uc:PopupCorrect Width="{x:Bind PageWidth, Mode=TwoWay}" Height="{x:Bind PageHeight, Mode=TwoWay}"/>
    </Popup>

非常直接。请记住不要将ActualWidth 或ActualHeight 属性用于绑定源作为they do not raise the PropertyChanged event。

虽然它有一个 ActualWidthProperty 支持字段，但 ActualWidth 不会引发属性更改通知，它应该被视为常规 CLR 属性而不是依赖属性。

出于 ElementName 绑定的目的，ActualWidth 在更改时不会发布更新（由于其异步和运行时计算性质）。不要尝试将 ActualWidth 用作 ElementName 绑定的绑定源。如果您有需要基于 ActualWidth 进行更新的场景，请使用 SizeChanged 处理程序。

Answer 2

@PutraKg 有个好办法。

但我有两种方法可以解决。

第一个是设置VerticalAlignment="Center" HorizontalAlignment="Center"，可以使弹窗居中。

但我认为你不满足于把它放在中心。

最好的方法是使用屏幕位置。

您可以获取 Grid 的屏幕位置并使其弹出。

在打开按钮中

    private void Button_OnClick(object sender, RoutedEventArgs e)
    {
        var grid = (UIElement)popupCorrect.Parent; //get grid
        var p = grid.TransformToVisual (Window.Current.Content).TransformPoint(new Point(0, 0)); //get point
        popupCorrect.HorizontalOffset = p.X;
        popupCorrect.VerticalOffset = p.Y;
        popupCorrect.IsOpen = !popupCorrect.IsOpen;
    }