[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