zoukankan      html  css  js  c++  java
  • silverlight学习布局之:布局stackpanel

    在用户界面设计方面的竞争多半是围绕着如何制作出有吸引力、使用、灵活的用户界面而开展的,在基于浏览器的应用中进行界面的设计是一种更加需要技巧的工作,因为我们的客户端总是丰富多样而又难以准确预测,幸好,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不同,但是应该更近于一般的理解。

  • 相关阅读:
    wsl 2 unbuntu 部署 asp.net core 使用 nginx 做反向代理,调试文件上传失败
    【原创】Linux PCI驱动框架分析(三)
    JavaScript 的灵异事件之一
    javascript 对http的get请求参数编码encodeURIComponent、encodeURI 和Java 解码
    Docker 容器逃逸漏洞 (CVE-2020-15257)
    如何关掉页面版知乎的登录模态框
    一个让java程序员有杀人的冲动的Xerces冲突问题
    双十一 大促 云服务器哪家好 哪家强(价格最低)
    git 拉取指定目录
    nginx 剔除 $args 变量中任意指定参数之万金油
  • 原文地址:https://www.cnblogs.com/zhijianliutang/p/2250588.html
Copyright © 2011-2022 走看看