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

原文:[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

 

时间: 2017-09-20

[UWP]涨姿势UWP源码——适配电脑和手机的相关文章

[UWP]涨姿势UWP源码——UI布局

原文:[UWP]涨姿势UWP源码--UI布局 懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页面,在PC和Tablet上呈左右分开,左边以列表显示新闻标题及简述,右边则显示新闻正文. 对于这样的一个布局,Grid无疑是最为合适的Panel,大体是以下的结构: <Grid> <Grid.ColumnDefinitions> <C

[UWP]涨姿势UWP源码——RSS feed的获取和解析

原文:[UWP]涨姿势UWP源码--RSS feed的获取和解析 本篇开始具体分析涨姿势UWP这个APP的代码,首先从数据的源头着手,即RSS feed的获取和解析,相关的类为RssReader,所有和数据相关的操作均放在里面. 涨姿势网站提供的RSS feed地址为http://www.zhangzishi.cc/feed,在UWP中想要通过发送http request并从URI接受http response,最简单的方式就是使用HttpClient: public async Task<st

[UWP]涨姿势UWP源码——极简的RSS阅读器

原文:[UWP]涨姿势UWP源码--极简的RSS阅读器 涨姿势UWP,一个开源的RSS阅读器,一个纯粹的项目,一个有道德的APP,一个脱离了低级趣味的作者,一些有益于人民的代码.骚年,还等什么,来涨点姿势吧! 该项目代码可能会引起部分人群的不适,敏感人群请在父母陪同下阅读. 看到第三段的骚年们,我想你们是对这个RSS的阅读器感兴趣了,该项目是一个极为简单的UWP的工程,代码托管在GitHub上,供有兴趣学习UWP APP开发的童鞋们参考.工程主要包括以下几个文件: 工程 文件 备注 ZhangZ

[UWP]涨姿势UWP源码——IsolatedStorage

原文:[UWP]涨姿势UWP源码--IsolatedStorage 前一篇涨姿势UWP源码分析从数据源着手,解释了RSS feed的获取和解析,本篇则会就数据源的保存和读取进行举例. 和之前的Windows Runtime一样,UWP采用IsolatedStorage的方式来存储APP的私有数据,这样做到APP之间互不干扰,减少了错误及安全隐患.现在的Application的设计似乎都流行这个做法. UWP中对应用程序数据存储区的访问,通常使用ApplicationData这个类来操作,我们把最

[UWP]涨姿势UWP源码——Unit Test

原文:[UWP]涨姿势UWP源码--Unit Test 之前我们讨论了涨姿势UWP的RSS数据源获取,以及作为文件存储到本地,再将数据转化成Model对象.这部分非UI的内容非常适合添加Unit Test.不涉及UI的话,UT写起来简单高效,很是值得投入一点时间以保证程序的可靠性. UWP的Unit Test创建起来并不复杂,首先在涨姿势UWP解决方案下,创建和ZhangZiShiRssRead工程同级的UT工程:ZhangZiShiRssRead.UTTest. 点击确定之后,会创建新的UT工

源码-IMSDroid,部分手机需要hacked,有谁解决过这个问题

问题描述 IMSDroid,部分手机需要hacked,有谁解决过这个问题 源码中是这样描述的:Whether we need special hack for buggy speaker. For example all Samsung devices need to be hacked.测试手机Htc_7060. public static boolean useSetModeToHackSpeaker(){ return (isSamsung() && !isSamsungGalaxy

求一个C# P2P 远程控制的实例源码

问题描述 求一个C# P2P 远程控制的实例源码 A电脑想获得B电脑的远程桌面,通过服务器打洞.求有客户端和服务器端的实例源码. 解决方案 C# Winfrom实现远程控制http://blog.csdn.net/cnming/article/details/2686297 可以参考这个帖子http://bbs.csdn.net/topics/270075124 解决方案二: http://download.csdn.net/detail/newps/1698123 解决方案三: 直接用远程桌面

手机版论坛哪有? 手机版论坛源码程序,最好能换界面的,

问题描述 手机版论坛哪有? 手机版论坛源码程序,最好能换界面的, 手机版论坛源码程序,最好 手机版论坛源码程序,最好能换界面的, 能换界面的, 手机版论坛源码程序,最好能换界面的, 解决方案 discuz!本地论坛与手机版---------------------- 解决方案二: http://www.devstore.cn/code/info/420.html eoe客户端源码,不过完整看懂有些难度,楼主可以试试

android-dulife安卓手机客户端的源码,急求

问题描述 dulife安卓手机客户端的源码,急求 dulife手环的安卓手机客户端的源码,或者手机端测试的源码,百度手环Android手机客户端源码