UWP中弹出框屏幕适配问题

Posted 2020-06-29 _KeyBoy

  上次在UWP中的消息提示框(二)中谈到弹出框在虚拟导航栏的手机上被遮挡问题，今天接就着扯。

   上次给用户控件指定的宽高都是Window.Current.Bounds的宽高，而这个获取到的是包含应用程序窗口的高度和宽度（以有效（视图）像素为单位）的 Rect 值，在手机上是状态栏和虚拟导航栏的高度也算进去的，所以通过这个宽高去设置一些控件的宽高是不那么准确的。

  其实还有另一个API：Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds，VisibleBounds顾名思义是获取窗口（应用程序视图）的可见区，在手机上是不包含状态栏和虚拟导航栏的高度，所以在一些弹窗需要在靠屏幕底部放置按钮的需求里可能这个API更适合我们。

　　但是只给弹窗的宽高指定为Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds获取的宽高也还是有问题的，Popup在弹出的时候默认锚点是屏幕最左上角（不排除状态栏），所以在状态栏显示的情况就会出现底部高度偏上的情况，还需要设置一个距上边距为状态栏高度的Margin。还有别忘记虚拟导航栏的手机可以隐藏、显示虚拟导航栏，所以应该还需要订阅VisibleBoundsChanged的事件

　　来看看代码，在上次的代码上做修改，需要在用户控件的构造和可见区的宽高变化时区指定宽高，所以写成一个方法：

 private void MeasurePopupSize()
        {
            this.Width = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Width;

            double marginTop = 0;
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
                marginTop = Windows.UI.ViewManagement.StatusBar.GetForCurrentView().OccludedRect.Height;
            this.Height = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Height;
            this.Margin = new Thickness(0, marginTop, 0, 0);
        }

构造改成：

 private MessagePopupWindow()
        {
            this.InitializeComponent();
            m_Popup = new Popup();
            Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBoundsChanged += (s,e)=>
            {
                MeasurePopupSize();
            };
            MeasurePopupSize();
            m_Popup.Child = this;
            this.Loaded += MessagePopupWindow_Loaded;
            this.Unloaded += MessagePopupWindow_Unloaded;
        }

示例代码也做了更新，欢迎围观 https://github.com/kkkeyboy/UWPPopup