画布应用制作响应式布局。

微软技术分享。

今天介绍如何在画布应用中配置响应式布局。所谓响应式布局也就是页面的空间，每行的数量会根据应用的宽度自适应变化，以达到更好的显示效果。

·开始，先添加一个屏幕用来完成今天的演示。

·在页面上插入水瓶容器组件用来布局，修改一下组件的宽度和高度。这里面主要关注宽度和高度计算的方式，这个容易的宽高是根据hurt的宽高计算而来的。

·插入一个普通容器组件用来添加表单需要的标题和单行文本控件。

·取消容器的灵活宽度，宽度设置为负极宽度的四分之一。

·排好空间的位置，用复制粘贴的方式复制出来一堆兄弟姐妹容器，这样比较方便。

·选中容器的宽度，看到这里有个小失误，应该设置为负极宽度四分之一，然后减去宽度十。

·这里还需要检查一下应用的设置，需要将设置里调整为合适页面的开关关掉，这样才会有响应的效果。

·再插入一个文本标签用来保存当前页面的尺寸。演示一下，可以看到屏幕的尺寸会随着屏幕的宽度变小而不断变小。响应式布局也是根据这个原理的，把容器的宽度都修改为根据屏幕尺寸变化而变化。

再看看效果，当然为了页面美观还可以调整一下容器的间距。特别要讲的是屏幕尺寸中的四代表平板横屏，三代表平板竖屏，二代表手机横屏，一代表手机竖屏。大家理解了这个布局会更加得心应手。可以看到短短几分钟就完成了一个页面的响应式布局，画布应用是如此的简单。

今天的分享就到这里，微软技术分享，关注您不迷路。