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

Silverlight中使用Layout model进行布局的管理,我们将所有的元素放在一个容器container中,每个容器都有自己的界面逻辑,比如ackpanel,grid,canvas等,我们甚至可以创建具有自定义逻辑的容器。所有的容器都从抽象类system.windows.controls.panel.class继承而来.panel类的层级关系为:panel——》frameworkelement——》ulelement——》dependencyobject

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

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

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

layoutroot.background=new solidcolorbrush(colors.red);

布局元素的一些属性

背景:background

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

边框:borders

边框的掌握就更为简单,我们只要记住了background、broundbrush and  borderthickness 、cornerRadius、padding就可以应付了。

stackpane的布局方式

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

silverlight学习布局之:布局stackpanel相关推荐

  1. Silverlight学习笔记(3):Silverlight的界面布局

    在上一篇中讲述了使用VS2010开发Silverlight的一些基础知识,并且讲述了Silverlight的部署和代码安全知识,这一篇主要是讲述如何在Silverlight中摆放界面元素. 记得早年前 ...

  2. 谷歌论文:使用深度强化学习的芯片布局

    来源:半导体行业观察 摘 要 在本项目中,我们提出了一种基于学习的芯片布局方法,这是芯片设计过程中最复杂,最耗时的阶段之一.与以前的方法不同,我们的方法具有从过去的经验中学习并随着时间的推移而不断改进 ...

  3. silverlight元素FrameworkElement.LayoutUpdated布局变化事件

    silverlight的元素基类FrameworkElement有事件LayoutUpdated,该事件表示元素发生布局变化后出发,什么是 布局发生变化,比较多了,比如尺寸的变化width heigh ...

  4. 前端学习总结——CSS布局方式之传统布局

    传统布局 传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局 例如:采用表格方式实现如下简单模型的布局 (1)固定布局 即用具体的像素值来确定模型的宽和高等值. ...

  5. Element UI学习记录之布局

    目录 Element UI学习记录之布局 一.Layout布局 二.Container布局容器 Element UI学习记录之布局 一.Layout布局 基本概念:一行通过分割为24栅格栏进行布局,如 ...

  6. 前端基础知识学习总结--百分比布局、Flex布局

    #博学谷IT学习技术支持# 一.百分比布局:能够使用百分比布局开发网页.百分比布局, 也叫流式布局 .效果: 宽度自适应,高度固定. 二.Flex布局:能够使用Flex布局模型灵活.快速的开发网页 F ...

  7. 关于HTML学习重点-绝对布局和相对布局总结

    其实这篇文章早就该写了,很久写了关于HTML布局相关的经验总结,一直在百度云上,只是偶尔查询翻到对应资料,担心日后很难找到,所以最后还是决心以文章的形式记录下来供大家参考查阅,实现这篇文章应有的价值: ...

  8. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  9. html局对布局和相对布局,关于HTML学习重点-绝对布局和相对布局总结

    其实这篇文章早就该写了,很久写了关于HTML布局相关的经验总结,一直在百度云上,只是偶尔查询翻到对应资料,担心日后很难找到,所以最后还是决心以文章的形式记录下来供大家参考查阅,实现这篇文章应有的价值: ...

  10. CSS 学习笔记 - 网格布局(栅格系统)

    CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...

最新文章

  1. arcgis server发布地图服务中文标注不能显示
  2. linux apache 安装 rewrite,Linux主机下Apache如何使用rewrite模块
  3. 获取WPF的DataGrid控件中,是否存在没有通过错误验证的Cell
  4. 实例1.2:获得应用程序主窗口指针
  5. redux中间件原理-讲义
  6. 允许保存文件 html5,html5 保存文件
  7. 使用GIT不小心merge后的回滚操作
  8. 「管理数学基础」3.4 凸分析:最优性的充要条件、无约束极小化问题、一般非线性规划问题
  9. office版本都有哪些_文员需要熟练掌握哪些办公软件啊?
  10. Kafka从上手到实践 - 实践真知:搭建Kafka相关的UI工具 | 凌云时刻
  11. 2021-03-31【Caltech行人数据集的 .vbb 转 .xml 】(学习记录)
  12. 联想计算机怎么改为光驱启动,联想笔记本光驱启动设置方法
  13. 第三届CCF计算机职业资格认证考试题解(C++)
  14. 零基础学python知乎-知乎:参与量化投资实训营是一种怎样的体验?
  15. cadence xbl封装转AD
  16. 豆瓣APP上线7.0新版本,从工具到社区的进化之路
  17. Ps Camera Raw 打开图像错位花屏原因- PC 上的独立显卡背锅
  18. Transformers库安装报错
  19. C++算法练习题 T1(henu.hjy)
  20. crazygames一个神奇的网站

热门文章

  1. iOS UIView成像流程
  2. html如何提交保存,html表单提交保存
  3. XamarinEssentials教程设置首选项Preferences的值
  4. OpenVAS漏洞扫描基础教程之连接OpenVAS服务
  5. Xamarin Anroid开发教程之Anroid开发工具及应用介绍
  6. matlab gui优化,matlabgui优化程序
  7. python建模仿真报告_Python|数学建模|排队论仿真
  8. mysql 获取距离当前最新的记录_一文带你了解 MySQL 中的各种锁机制!
  9. exe一机一码加密工具_Python代码加密混淆
  10. 英特尔图形学专家被AMD挖走,研发实时光追技术,从部门主管变成副总裁