控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

Silverlight学习笔记:布局之stackpanel

作者:Cocowool 出处:博客园 2010年02月08日 阅读:

在用户界面设计方面的竞争多半是围绕着如何制作出有吸引力、实用、灵活的用户界面而展开的。在基于浏览器的应用中进行界面的设计则是一项更加需要技巧的工作,因为我们的客户端总是丰富多样而又难以准确预测。幸好,Silverlight 继承了 WPF 中灵活性的界面设计的特点。

Silverlight 中使用 layout model 进行布局的管理,我们将所有的元素都放在一个容器 Container 中。每个容器都有自己的界面逻辑,比如 stackpanel、grid、canvas等。我们甚至可以创建具有自定义逻辑的容器。所有的容器都从抽象类 System.Windows.Controls.Panel.class 继承而来。Panel 类的层级关系如下图:

image

     Panel 类有 Background 和 children 这两个公共的属性,这是布局开始的第一步,在 silverlight 中,最 主要的 panel 有:stackpanel、grid、canvas。这几个类我们可以在 System.Windows.Controls 中找到。Stackpanel 一般用来做水平或者垂直的排布;grid 通过行和列来布局元素,基本上就是表格布局;canvas 利用绝对的坐标来实现定位。一个典型的 silverlight ,一般是采用 grid 来进行布局,其中还可以嵌套其他的基本布局元素。

 

     需要改变 panel 的background 属性时,我们多数会想到采用一个表示“颜色”的对象,但是 silverlight 采用了一种更为灵活的方式,brush 对象,这样就可以提供“纯色”(Solid Color)、“线性渐变”、“圆形渐变”这样的颜色效果,brush 对象存在于 System.Windows.Media 中。

 

例如,我们可以用一句话来改变当前 grid 的背景。

LayoutRoot.Background = new SolidColorBrush(Colors.Blue);

 

布局元素的一些属性

背景: Background
改变背景的方法有三种,一种通过之前示例的写 code 的方式;另外一种是直接在元素上添加 background= "#aabbcc" 这样的方式;最后一种是利用 <Grid.background></Grid.background>这样的标签必合起来,中间可以添加较为复杂的背景变化。

边框: Borders
边框的掌握就更为简单,我们只要记住了 Background、BorderBrush And BorderThickness、CornerRadius、Padding 就可以应付了。

Stackpanel的布局方式

stackpanel 作为一个基本的布局元素,提供了将 UIElement 进行水平或者垂直排布的功能,就像一个堆栈一样。他使用起来也非常方便,将所有的元素都放入 <Stackpanel></Stackpanel>标签中就OK了。我们可以通过调整 HoriazonAlignment 和 VerticalAlignment 来调整水平或垂直。 默认情况下,stackpanel 会占据一个容器内所有的剩余空间,如果我们不希望这样,我们可以对位于 stackpanel 内的元素分别定义他们的尺寸属性,包括 Width、Height、MinWidth、MinHeight、MaxWidth、MaxHeight。但是还有一个问题,任何用户界面的设计,都会存在一定的空间来分隔视觉上不同的元素,想要实现这个功能,我们需要使用 Margin 属性。我们可以给 Margin 设置一个单个的值,这样四个方向上的 margin 都相同,也可以按照 Margin=“5,3,2,5”,这样方向的顺序分别是 左、上、右、下,和 CSS 中的定义不同,习惯起来感觉还有点吃力。在多个元素之间计算 Margin 时,其所用的规则也和 CSS 不同,但是应该更接近于一般的理解。

image

 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统