正文
零元学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
CRLF
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
CRLF
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
CRLF
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
CRLF
5: x:Class="SilverlightApplication16.MainPage"
CRLF
6: Width="640" Height="480">
CRLF
7:?
CRLF
8: <Grid x:Name="LayoutRoot" Background="White">
CRLF
9: <Border BorderBrush="Black" BorderThickness="1" Margin="227,110,201,91">
CRLF
10: <ScrollViewer Margin="0" Cursor="Arrow" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderThickness="0">
CRLF
11: <StackPanel d:LayoutOverrides="VerticalAlignment" Height="296" Width="140">
CRLF
12: <Button Content="Button" Margin="7"/>
CRLF
13: <Button Content="Button" Margin="7,0"/>
CRLF
14: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
15: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
16: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
17: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
18: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
19: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
20: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
21: <Button Content="Button" Margin="7,7,7,0"/>
CRLF
22: </StackPanel>
CRLF
23: </ScrollViewer>
CRLF
24: </Border>
CRLF
25: </Grid>
CRLF
26: </UserControl>
CRLF
?
在我们的范例里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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您
