Blend基础布局控件

布局

---

什么是布局？

• Panels控件（其实就是容器控件）
• 对内部的子控件提供了自动布局功能
• 可以在容器控件内继续添加容器控件（一个复杂的界面往往是多种容器控件嵌套而组成的）
• 一些界面器控件也是嵌套了容器控件而组成的（比如ListBox就嵌套了StackPanel控件）
• 你也可以自己来制作一些容器控件

一些常见的布局控件

Canvas	最原始的容器控件，对子控件无自动布局功能。
StackPanel	能将子元素排列成一行（可沿水平或者垂直方向）
WarpPanel	元素从左到右按顺序排列，在包含他们的框的边缘处将内容换至下一行。
Grid	定义由行和列的灵活网格区域。
ViewBox	可拉伸或者缩放子元素。
Border	在一个子元素的周围绘制边框、背景。
DockPanel	可将子元素沿其边缘进行定位。
ScrollViewer	使内容显示在比其实际大小小的区域中，并适当显示滚动条。

具体使用

在新建立了Silverlight项目后，你会看到Blend自动帮你添加了一个布局控件“LayoutRoot”。

在右侧的属性栏目你可以看到这个布局控件的类型。

在右侧的工具栏中你可以找到更多的布局控件。

或者你知道自己想要的控件 直接输入他的名字便可以快速的找到他。

这里在LayoutRoot下添加上两个最简单的布局控件Canvas，并改变他们的背景颜色予以区分。

 

这里记住一个概念“所有的父控件对其子控件进行布局”。

尝试移动“Father”的位置，“Son”也跟着移动。即使“Son”在舞台上不在“Father”的内部，只要他们的在层次上的关系不发生变化，“Son”会一直受“Father”的影响。在Canvas中的表现是子控件和父控件的相对位置一直保持不变。

你也可以对现有的布局进行转化。

也能对现有的元素快速的组合到容器中。

所谓搭建自适应布局就是利用Grid的特性来搭建界面。

其内部的元素会根据父控件的属性来自行的调整自身的位置大小。

更加详细的Grid使用请翻阅Blend的帮助文件。

扩展

---

布局控件的开发

之前我写过一些布局控件开发的文章，并开源发布两个布局控件，有兴趣的朋友可以看看。

• 一个最基本的布局控件-panel
• Silverlight控件 - Carrousel
• Silverlight控件 - ScatterView

作者：Nasa 
文章出处：我和未来有约会 (http://nasa.cnblogs.com/) 
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。