零元学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里最简单的布局容器，可以使用Border制作一个带有边框的布局容器。

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

?

我们直接延续着上一章的范例往下做。

?

01

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

?

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

?

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

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

让我们从原始码来看：

		   1: <UserControl

		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

		   5:     x:Class="SilverlightApplication16.MainPage"

		   6:     Width="640" Height="480">

		   7:? 

		   8:     <Grid x:Name="LayoutRoot" Background="White">

		   9:         <Border BorderBrush="Black" BorderThickness="1" Margin="227,110,201,91">

		  10:             <ScrollViewer Margin="0" Cursor="Arrow" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderThickness="0">

		  11:                 <StackPanel d:LayoutOverrides="VerticalAlignment" Height="296" Width="140">

		  12:                     <Button Content="Button" Margin="7"/>

		  13:                     <Button Content="Button" Margin="7,0"/>

		  14:                     <Button Content="Button" Margin="7,7,7,0"/>

		  15:                     <Button Content="Button" Margin="7,7,7,0"/>

		  16:                     <Button Content="Button" Margin="7,7,7,0"/>

		  17:                     <Button Content="Button" Margin="7,7,7,0"/>

		  18:                     <Button Content="Button" Margin="7,7,7,0"/>

		  19:                     <Button Content="Button" Margin="7,7,7,0"/>

		  20:                     <Button Content="Button" Margin="7,7,7,0"/>

		  21:                     <Button Content="Button" Margin="7,7,7,0"/>

		  22:                 </StackPanel>

		  23:             </ScrollViewer>

		  24:         </Border>

		  25:     </Grid>

		  26: </UserControl>

?

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

?

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

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

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

?

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

??

?

02

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

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

?

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

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

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

?

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

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

?

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

?

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

?

?

?

本篇的教学就到此。

?

?

?

?

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

?

一步一步迈向HIE之路

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

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