专栏首页小狼的世界Silverlight学习笔记:布局之stackpanel

Silverlight学习笔记:布局之stackpanel

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

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

     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 不同,但是应该更接近于一般的理解。

Technorati Tags: silverlight,布局,stack panel

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 设计网事读书笔记

    从三月份的时候开始读,利用零零星星的时间,终于读完了千年的《设计网事》这本书。虽名为书,实则是他最近几年的博文汇集而来。纵观此书,却与阅读单篇感觉很不一样。下面...

    大江小浪
  • Crontab中的除号(slash)到底怎么用?

    crontab 是Linux中配置定时任务的工具,在各种配置中,我们经常会看到除号(Slash)的使用,那么这个除号到底标示什么意思,使用中有哪些需要注意的地方...

    大江小浪
  • Virtualbox镜像文件克隆问题

    VBoxManage clonehd centos-1.vdi centos-2.vdi

    大江小浪
  • Jquery的属性操作和DOM操作

           3 val()    :     获取或设置表单内容    (原生JS使用value)

    用户3159471
  • 界面设计技法之布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了。 回到主...

    牧云云
  • html编写规范

    今天我为大家介绍一下html的基本知识。 什么是html html指的是超文本标记语言(Hyper Text Markup Language),它包含一系列的标...

    企鹅号小编
  • 智能云上手指南:如何将历史数据迁移到万象优图

    6 月 21 日,腾讯云在 2017「云+未来」峰会上推出了战略新品——智能云,宣布将腾讯积累近 20 年的 AI 能力向政府、企业和开发者开放,其中首批开放计...

    云加社区
  • AD域整合的注意事项

    AD域环境是微软整个产品体系中非常重要的一个系统,是大部分微软应用的基础。在某些情况下由于公司规划原因或并购,会需要做AD域的迁移整合工作,或是两个AD域跨林进...

    嘉为科技
  • 常用模块

    ## 一、time与datetime模块 在Python中,通常有这几种方式来表示时间:

    hankleo
  • Qt读取图片之小坑

      可能是图片格式不对,于是使用二进制软件分别打开两个图片查看究竟是什么情况。 1.png图片内容:

    Qt君

扫码关注云+社区

领取腾讯云代金券