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

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

本系列将教大家以实做案例认识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之路

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

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

时间: 2024-12-25 13:01:01

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

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

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

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

原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? ? ? 就是要让不会的新手都看的懂! ? ? ? <实至名归的容器大哥> Blend 4内的容器有很多种,比较常运用到的除了有Grid.Can

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

原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」: 以及加码赠送安装扩充元件-「Silverlight Toolkit」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」: 以及加码赠送安装扩充元件-「Silverlight Toolki

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

原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」. ? ? ? 就是要让不会的新手都看的懂! ? ? <忠於原味.不动如山> 拥有良好操守的傻大姊

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

原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析. 若是对Pathlistbox基本属性还不认识的朋友,请返回上一章,小猴子良心建议:先求精.再求广! 01 开启一个新专案後,在主要工作区放入一个Ellipse,并调整到适当的位置 接着,建立我们的文字「I Love Blend 4」 这边要注意的一点: 若要做出范例的排列方式,每个字元必独立在自

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

原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Pathlistbox」 ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Pathlistbox」 ? 就是要让不会的新手都看的懂! ? <先来了解Pathlistbox的基本功能> 01 开启一个新专案後,在主

零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? ? ? 01 开启一个新专案,并且置入一个Button,调整到适当大小 ? 在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同 不熟的人请看如何用Blend制作一

零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II

原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox. 看Blend如何把CheckBox变成飞碟! ? 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox. 看Blend如何把CheckBox变成飞碟! ? ? ? 灵感取自经典动画!「怪兽大战外星人」!!!!!! ? ? ? 本章需要两张图片,一为幽浮.另一个是

零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变藏宝箱! ? 本章将教大家如何运用CheckBox做实作上的变化:看我怎麽把CheckBox变藏宝箱! ? 最近帮公司做了一个互动式的小游戏,运用了CheckBox的功能,就顺便介绍给大家 为了利益回避,以及日後不必要的麻烦,本章范例已经简化了很多东西,只留下与相关的图片及功能 ? 01 先简单介绍