本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。
本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的乖宝宝-「StackPanel」;及加码赠送「ScrollViewer」的运用。
就是要让不会的新手都看的懂!
<排排站、乾净整洁>
StackPanel的特性为推叠、并且排序,我们来看下面的实做。
01
开启一个新专案後,在主要工作区放入一个StackPanel
?
接着,随意放入物件,我们来看看效果(范例放置的是Button)
?
会发现Button随着StackPanel垂直且整齐的排列,并且自动调整宽度贴着StackPanel。
?
02
来看看StackPanel的Layout设定有甚麽不一样的。
StackPanel比较特别的是多了Orientation选项,预设是Vertical垂直排列;
点击後方下拉式选单,可以改为Horizontal水平排列。
?
跟Grid一样,StackPanel也可以设定Margin,关於Grid不了解的朋友可以看这里。
由於,我们放入的Button预设为Auot,所以自动调整宽度贴着StackPanel,这里可以使用Margin调整Button的大小。
若是你不想要Button自动调整宽度贴着StackPanel,你也可以针对Button设定宽高或是边界的属性。
?
03
接下来,要介绍的是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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您