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的帮助文件。

扩展


布局控件的开发

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

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

Blend基础-布局控件的相关文章

Windows 8 Store Apps学习(7) 布局控件

Canvas, Grid, StackPanel, VirtualizingS 介绍 重新想象 Windows 8 Store Apps 之布局控件 Canvas - 绝对定位式布局 Grid - 网格式布局 StackPanel - 流式布局 VirtualizingStackPanel - 仅能用于 ItemsControl WrapGrid - 仅能用于 ItemsControl VariableSizedWrapGrid - 用于 Wrap 子元素集合 示例 1.Canvas 的 Dem

背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

原文:背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid [源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl 的布局控件) ItemsStackPa

背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid

原文:背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid [源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid 作者:webabcd 介绍背

重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid [源码下载] 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWra

Android常见布局控件之LinearLayout和TableLayout

一.LinearLayout布局控件 xml属性 android:baselineAligned:是否允许用户调整它内容的基线. android:baselineAlignedChildIndex:当一个线性布局与另一个布局是按基 线对齐的一部分,它可以指定其内容的基线对齐方式. android:gravity:指定控件中内容的基本内容. android:orientation:设置它内容的对其方向,有两个可以选择的值: horizontal和vertical.分别表示水平排列和垂直排列. Li

Windows 8风格应用开发入门 十七 布局控件

Panel类是开发Windows 8 Store应用中一个重要类,它在Windows 8 Store应用布局系统中扮演非常重要角色. Panel可以承载多个子元素,面板类可以把子元素存放在栈中.或网格里面.或把子元素停靠在其边缘等. Panel类自身是一个抽象类,下面是Panel类的层次结构: Windows 8 Store应用中包含的三个标准布局控件:Canvas(通常在常规布局中,尽量不要考虑使用Canvas,不过在某些特殊情况下,使用Canvas还是非常方便的).Grid(它是大多数常规布

Android编程布局控件之AbsoluteLayout用法实例分析_Android

本文实例讲述了Android编程布局控件之AbsoluteLayout用法.分享给大家供大家参考,具体如下: AbsoluteLayout是绝对布局管理器,指的是指定组件的左上角绝对坐标来指定组件的布局 <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android-如何动态加载布局控件

问题描述 如何动态加载布局控件 通过解析json,然后通过case判断加载不同的控件,如何该实现呢,求大神帮助 解决方案 使用惰性控件ViewStub实现布局动态加载使用惰性控件ViewStub实现布局动态加载使用惰性控件ViewStub实现布局动态加载---------------------- 解决方案二: jsonobject解析后,判断呗,然后就该创建啥就创建啥,可以利用反射,把创建什么也可以放到json里 解决方案三: 这个~~我也在问同样的问题 解决方案四: 这个~~我也在问同样的问

Windows 8.1 应用再出发 - 几种布局控件

原文:Windows 8.1 应用再出发 - 几种布局控件 本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝对定位对子元素进行布局.元素使用Canvas.Left 和 Canvas.Top 附加属性进行绝对定位.元素可以使用Canvas.ZIndex附加属性指定分层,Canvas.ZIndex是int类型,值越大,分层越靠前. 所以下面代码中,如