CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

简介: 做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。 布局篇-如何做一个自适应窗口大小的布局 Canvas是对其子控件绝对定位的子控件需要设置宽高。

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。

布局篇-如何做一个自适应窗口大小的布局

Canvas是对其子控件绝对定位的子控件需要设置宽高。Grid而是对其子控件设置上下左右边距的子控件不一定需要设置宽高直接用Auto属性即可大小受父控件影响。

了解了特性及可以开始制作了。首先先从最外层的UserControl做起,在这里给他一个固定的宽高。这个宽高在发布的时候是可以改变的。主要是LayoutRoot这一层。

LayoutRoot的控件为Grid。宽度和高度都是Auto。这样他的大小就由silverlight程序大小的本事决定了。

最重要的的是LayoutRoot内部的子控件是要设置了边距也都会自适应。

这里来具体的看一下例子。

把刚才导出的XAML文件粘贴到Blend中全部选中右键组合,选择Grid。

其内部子控件的设置如下

其自身的设置。由于宽度是一定的,只需要适应高度即可

全部的层如下

先把界面全部作出,之后可以根据需要把这些模块改成UserControl。

 


作者:nasa
出处:nasa.cnblogs.com
联系:nasa_wz@hotmail.com
QQ:12446006

相关文章
|
5月前
|
容器
探索浮动布局的原理与实践
探索浮动布局的原理与实践
|
8月前
|
编解码 前端开发 UED
最常见的自适应布局方案
【4月更文挑战第2天】 最常见的自适应布局方案
88 9
|
8月前
|
前端开发 容器
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
86 1
|
8月前
什么是瀑布流布局?瀑布流式布局的优缺点
什么是瀑布流布局?瀑布流式布局的优缺点
539 0
|
编解码 前端开发 容器
ECharts力导向布局图增加滚动条
ECharts力导向布局图增加滚动条
101 0
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
95 0
|
编译器
ElementUI之基础布局及混合布局
ElementUI之基础布局及混合布局
172 0
|
编解码 前端开发 UED
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
428 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)