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