Blend基础-布局控件

简介: 布局 什么是布局? Panels控件(其实就是容器控件)对内部的子控件提供了自动布局功能可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件嵌套而组成的)一些界面器控件也是嵌套了容器控件而组成的(比如ListBox就嵌套了StackPanel控件)你也可以自己来制作一些容器控件 一些常见的布局控件 Canvas 最原始的容器控件,对子控件无自动布局功能。
布局


什么是布局?
  • 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的帮助文件。

扩展

布局控件的开发

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

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

相关文章
|
6月前
|
前端开发
Canvas背景色绘画样式设计
Canvas背景色绘画样式设计
|
8月前
|
前端开发
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)
142 0
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
151 0
|
编解码
unity3dUGUI之UI粒子特效自适应缩放
using UnityEngine; using System.Collections; using System.Collections.Generic; public class UIParticleScale : MonoBehaviour...
1597 0
|
C++
duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小
转载请说明原出处,谢谢~~          Duilib给控件贴图功能可以附带多个属性,各个属性的配合可以达到许多效果。以下是duilib支持的所有贴图属性: 贴图描述:          Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。
1837 0
Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)
原文:Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)   模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。
1094 0
|
C#
在WPF设计工具Blend2中制作立方体图片效果
原文:在WPF设计工具Blend2中制作立方体图片效果 --------------------------------------------------------------------------------引用时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
1077 0
|
容器
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)   Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的。
1025 0
Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)
原文:Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)   Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。
851 0
|
前端开发
Blend_技巧篇_淡入淡出
原文:Blend_技巧篇_淡入淡出 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010265681/article/details/76651773 1、实现原理 1.1 利用UIElement.OpacityMask属性,用于改变对象区域的不透明度的画笔。
877 0