Windows10 UWP开发
Windows10 UWP开发 - 响应式设计
本篇随笔与大家简单讨论一下在开发适配不同分辨率、宽高比的Windows10 Universal App布局时的可行方式与小技巧。经验均从实践中总结，可能有诸多不完善和浅薄之处，欢迎读者严格指正。另外本文也只是抛砖引玉之用，希望能收获更多更好的实战经验。
自适配的必要性说了这么多，我们首先可能会问了，为什么要做响应式设计？其原因有以下两点：
Windows10的跨平台性Windows10是微软宣称可以统一运行于PC&平板&手机&Xbox等诸多平台的操作系统，当然这也是universal一词的由来。如果你希望你的应用不仅仅局限于某一个平台，那么做一些响应式布局就非常必要了。
Win10 UWP的容器窗口可自定义大小即使你的应用仅针对windows rt的平板用户，win10对于uwp的全新处理方式也让开发者不能免于分辨率适配。下图分别是Win8.1和Win10的应用商店应用对比：
不难发现，为了增强store app的实用度，桌面环境下的uwp是可以自定义窗口尺寸的。为了让应用别轻易被用户玩崩坏，整理整理仪容还是相当有必要的。
废话少说，接下来，我们来看看手中能用于做响应式设计的手段吧。
自适配布局的方法 与网页设计类比不知道读者们有多少有html+css布局经历，这一套东西尽管在布局上不算完美，但用起来也算得心应手，熟悉后能使网页布局有基本良好的适应性。
所以这里我就先说说网页前端布局与XAML布局的区别与联系吧。好消息是，一言以蔽之：几乎HTML能做的、XAML都可以。具体地说，几种在网页布局上常见手法xaml实现如下：
也就是没有布局咯…对于结构简单的内容呈现(比如本篇博客)，用这种方式足矣。如同下面的代码模型一样
<!DOCTYPE html> <html> <body> <p style="font-size:70px">I am title</p> <div style="width:100px;height:100px;background:rgb(230,230,250);display:inline-block;"></div> <span style="font-size:30px">Inline text</span> <div style="font-size:32px"> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </div> </body> </html>
所有的元素从上到下、左到右排列，排列不下的则进入下一行。该效果使用HTML实现非常简单，由于大部分html元素是inline的，故直接将其从上到下排列即可。
在XAML中，事情会麻烦一点，由于所有元素均不占位而浮动于界面上，故需要借助其他控件的帮助：Grid可用来从上到下安排元素，而对于同一行的元素则可以用stackpanel安排。如果需要响应度更高的布局如当宽度不够时自动换行等特性，则需配合ListView与ItemsWrapGrid进行布局。详细代码模型见下，十分简单，故不再赘述。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientation="Vertical" Margin="70,70,70,10"> <TextBlock Text="I am title." FontSize="70"/> <StackPanel Orientation="Horizontal"> <Grid Background="Lavender" Width="100" Height="100"/> <TextBlock Text="Inline text." VerticalAlignment="Bottom" FontSize="30"/> </StackPanel> <TextBlock Text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." TextWrapping="Wrap" FontSize="32"/> </StackPanel> </Grid>
Absolute大法温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/70231.html
