天天看点

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

将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。

?

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。

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

<专情王子?查理B>

Border是Blend里最简单的布局容器,可以使用Border制作一个带有边框的布局容器。

Border最重要的特色是,Border内只允许容纳一种子物件。

01

运用上一章的范例,在主要工作区放入一个Border

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

接着,把范例所做的ScrollViewer拉进刚刚的Border里面

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

可以测试一下,Border是不是只能放入一个子物件。

会发现,Border只能放入一个子物件,但是子物件却不受这个限制;

让我们从原始码来看:

在我们的范例里Border包含了一个ScrollViewer,不过StackPanel却包含了数个Button。

这边我们可以从Properties设定Border的长相。

设定Border的边框粗细Properties->Appearance->BroderThickness

接着改变边框颜色Properties->Brushes->BorderBrush

看,我们的ScrollViewer有了新的边框

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

02

接下来要教大家如何做Border的变化运用,只需要一点小技巧

若是你不喜欢Border预设的四角方框框,记得把下面的设定技巧学起来喔!

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

接着设定Properties->Appearance->CornerRadius,打上「20」後看看Border的变化

Border的四个角变成圆角,如下图

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

若是要使其中几个角,变为原角的做法只需要做下面的设定:

在CornerRadius打上「20 , 0 , 50 ,100」,会变为下图的样子

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

由上图得知,可以分别设定四个角的半径弧度,分别是以顺时针方向由左上到左下输入数值。

还可以配合BroderThickness加上BorderBrush的设定,做出阴影边框的效果

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

本篇的教学就到此。

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

一步一步迈向HIE之路

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

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

继续阅读