[UWP]漲姿勢UWP源碼——適配電腦和手機

上一篇我們介紹了繪制主界面的MainPage.xaml，本篇則會結合MainPage.xaml.cs來講一講如何適配電腦和手機這些不同尺寸的設備。

同時適配電腦和手機存在幾個麻煩的地方：

1. 屏幕尺寸差距過大，不太適合以手機為基准，然后在電腦上等比放大。
2. 手機屏幕小，但是分辨率高。比如Lumia 950的2K屏就默認采用400%的比例來顯示。
3. 手機一般默認豎屏。電腦會有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的實現顯得更為靈活：

1. 可以將界面變化賦值的代碼封裝成一個方法，在多處調用。
2. 可以有需要計算的復雜條件判斷，而不僅僅是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