零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 - JavaScript

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

本系列将教大家以实做案例认识Blend 4 的布局容器，此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」；及加码赠送「ScrollViewer」的运用。

就是要让不会的新手都看的懂!

<排排站、乾净整洁>

StackPanel的特性为推叠、并且排序，我们来看下面的实做。

开启一个新专案後，在主要工作区放入一个StackPanel

接着，随意放入物件，我们来看看效果(范例放置的是Button)

会发现Button随着StackPanel垂直且整齐的排列，并且自动调整宽度贴着StackPanel。

来看看StackPanel的Layout设定有甚麽不一样的。

StackPanel比较特别的是多了Orientation选项，预设是Vertical垂直排列；

点击後方下拉式选单，可以改为Horizontal水平排列。

跟Grid一样，StackPanel也可以设定Margin，关於Grid不了解的朋友可以看这里。

由於，我们放入的Button预设为Auot，所以自动调整宽度贴着StackPanel，这里可以使用Margin调整Button的大小。

若是你不想要Button自动调整宽度贴着StackPanel，你也可以针对Button设定宽高或是边界的属性。

接下来，要介绍的是ScrollViewer，我们直接延续StackPanel的范例往下做。

在主要工作区，放入一个ScrollViewer

选定StackPanel後，把StackPanel拉进ScrollViewer里

而ScrollViewer会对过长的内容自动生成拖动的控制bar

我们也可以从Properties->Layout->VerticalScrollBarVisibility设定

Auto = 当内容过多时，自动显示bar

Disabled = 禁用bar

Hidden = 隐藏bar

Visible =显示bar

范例选择Hidden，如下图，右侧的bar不见了

也可以设定当滑鼠移到ScrollViewer的显示方式

从Properties->Common Properties->Cursor设定

Cursor有许多选项，一般来说，都是使用Arrow(箭头)，大家可以自己试试看其他的设定。

还有很多好玩的设定，这边就不一一介绍噜!

下一章，将会以实作介绍Border的特性与设定。

本篇的教学就到此。

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」