[UWP]涨姿势UWP源码——适配电脑和手机

2021-09-07 19:44:27

上一篇我们介绍了绘制主界面的MainPage.xaml，本篇则会结合MainPage.xaml.cs来讲一讲如何适配电脑和手机这些不同尺寸的设备。

同时适配电脑和手机存在几个麻烦的地方：

屏幕尺寸差距过大，不太适合以手机为基准，然后在电脑上等比放大。
手机屏幕小，但是分辨率高。比如Lumia 950的2K屏就默认采用400%的比例来显示。
手机一般默认竖屏。电脑会有16：9，3：2各种比例，且默认横屏。导致整体布局需要调整。

其他细节讨论可以看我之前写的一些心得：

http://www.cnblogs.com/manupstairs/p/5143414.html

在涨姿势UWP中，通过Page对象的SizeChanged事件来控制界面尺寸变化。有童鞋可能要问，既然都是以屏幕Width为依据变化，为什么不在XAML中使用AdaptiveTrigger 的MinWindowWidth属性。

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState >
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="769" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="GridRootLayout.HorizontalAlignment" Value="Left"></Setter>
                        <Setter Target="GridRootLayout.VerticalAlignment" Value="Top"></Setter>
                        <Setter Target="GridRootLayout.Width" Value="320"></Setter>
                        <Setter Target="GridRootLayout.Height" Value="640"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

上面代码通过AdaptiveTrigger在Width等于769时，将GridRootLayout的HorizontalAlignment，VerticalAlignment，Width和Height四个属性重新赋值，确实是官方Sample给出的用法。我之前也介绍过这种用法：

http://www.cnblogs.com/manupstairs/p/5267418.html

相较而言，SizeChanged的实现显得更为灵活：

可以将界面变化赋值的代码封装成一个方法，在多处调用。
可以有需要计算的复杂条件判断，而不仅仅是MinWindowWidth这种的值判断。

代码中我提取了一个UpdateLayout方法，在SizeChanged时传递e.NewSize.Width作为参数。以Width为依据，同时判断SelectedItem是否为null，进一步计算页面的布局。另外UpdateLayout方法还会在ViewModel的自定义事件UpdateLayoutEvent被触发时调用。

        private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            UpdateLayout(e.NewSize.Width);
        }

        private void UpdateLayout(double newWidth)
        {
            if (newWidth <= 800)
            {
                this.splitView.DisplayMode = SplitViewDisplayMode.Overlay;
                this.borderMiddle.Width = 0;
                if (listViewItems.SelectedItem == null)
                {
                    columnRight.Width = zeroGridLength;
                    columnLeft.Width = oneStarGridLength;
                    columnRightBar.Width = zeroGridLength;
                    columnLeftBar.Width = oneStarGridLength;
                }
                else
                {
                    columnLeft.Width = zeroGridLength;
                    columnRight.Width = oneStarGridLength;
                    columnLeftBar.Width = zeroGridLength;
                    columnRightBar.Width = oneStarGridLength;
                }
            }
            else
            {
                columnLeft.Width = fourStarGridLength;
                columnRight.Width = sixStarGridLength;
                columnLeftBar.Width = fourStarGridLength;
                columnRightBar.Width = sixStarGridLength;
                this.splitView.DisplayMode = SplitViewDisplayMode.CompactOverlay;
                this.borderMiddle.Width = 48;
            }
        }

在MainPage.xaml.cs中，我们还处理了系统Back按钮的事件，这在手机和平板上会起到作用。

            SystemNavigationManager.GetForCurrentView().BackRequested += (sender, e) =>
            {
                if (vm.SelectedItem != null)
                {
                    vm.SelectedItem = null;
                    e.Handled = true;
                }
            };

另外需要注意的是，如果要处理手机的状态栏，需要额外的添加引用“Windows Mobile Extensions for the UWP”。

添加之后的引用列表如下图：

特别要注意的是，即使添加了“Windows Mobile Extensions for the UWP”，在访问Mobile特有的API之前，仍需要通过if判断来避免程序崩溃。这里如果不进行if判断，在PC和Tablet上运行时就会闪退。

            if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
            {
                StatusBar.GetForCurrentView().BackgroundColor = Colors.Transparent;
                StatusBar.GetForCurrentView().ForegroundColor = Colors.Black;
            }

本篇主要介绍如何通过SizeChanged来实现自适应布局，谢谢能看到这里的各位！

Windows 10 Create Update 4月11日就要正式推出了，Windows Phone据说又要崛起了……

GitHub源代码地址：

https://github.com/manupstairs/ZhangZiShiRSSRead

Windows Store：

https://www.microsoft.com/zh-cn/store/p/%e6%b6%a8%e5%a7%bf%e5%8a%bfuwp/9nblggh3zqd1

码农公寓

相关文章