上一章《WPF学习：2.Layout-Panels-Countainers》主要介绍了布局，容器和面板。这一章主要开始介绍Border(边界)和Brush（画刷）。
代码地址：http://www.cnblogs.com/keylei203/archive/2013/03/12/keylei203.html
引言
在任何WPF的程序设计中，Border都占主要部分，一般都会使用很多Border装饰用户界面。从直接在window上放置borders到在ListBoxItem上放置Borders，boarder在美化界面方面起到了重要的作用。
Border确切来说只是一个可以放置UI元素的矩形区域，但是Border和Rectangle最大的不同是Border允许放置一个简单的子元素在其中，看下面例子：
1 <Border Width="50" Height="50" x:Name="brdElement"> 2 <Border.Background> 3 <SolidColorBrush Color="Bisque"></SolidColorBrush> 4 </Border.Background> 5 <Border.Effect> 6 <DropShadowEffect BlurRadius="10" Color="Red" Direction="235" Opacity=".5" 7 RenderingBias="Quality" ShadowDepth="10" /> 8 </Border.Effect> 9 </Border>
效果图：
，仔细分析上面的代码，Width/Height指定了Border的的尺寸，Board.Background通过Brush指定背景的颜色，SolidColorBrush可以设置任何颜色的Brush，它的属性待会讨论。
Board.Effect使用了一个DrowShaowEffect来增加阴影效果，需要注意的属性如下：
1.Color：阴影颜色
2.Opacity:透明度，范围0-1,0完全透明。
3.BlurRadius：模糊半径，可以增加这个系数来增加阴影的程度。0：
，50:
4.Direction：方向，0-360. 0:
,90:
5.ShdaowDepth：阴影深度，值越大，阴影被拖的就越远。0:
,20:
讨论更多的例子：
1 <Border Width="50" Height="50" x:Name="brdElement"> 2 <Border.Background> 3 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 4 <LinearGradientBrush.GradientStops> 5 <GradientStop Color="Red" Offset="0"/> 6 <GradientStop Color="Pink" Offset=".5"/> 7 <GradientStop Color="Azure" Offset="1"/> 8 </LinearGradientBrush.GradientStops> 9 </LinearGradientBrush> 10 </Border.Background> 11 <Border.Effect> 12 <DropShadowEffect BlurRadius="10" Color="Red" 13 Direction="45" Opacity=".4" RenderingBias="Performance" ShadowDepth="30" /> 14 </Border.Effect> 15 </Border>
第一个例子中，使用SolidColorBrush指定一个3步的LinearGradientBrush，StartPoint和EndPoint必须指定，StartPoint是梯度开始的点，（0,0）代表左上角，（1,1）代表右下角第一个0代表X的偏置，第二个0代表Y的偏置， 我使用了坐标是（0,0）-（1,1）从从左上角到右下角，Gradient是直线变化，GradientStops定义了Gradient的颜色。offset是相对量表示，表示此点的位置是在开始位置向重点位置相对比列， 这里我定义所有的颜色从0到1，效果是坐标（0,0）为红色，坐标（0.5,0.5）为粉红色，（1,1）为蔚蓝色，颜色呈斜下的渐变。
再看这一个例子：
1 <Border Width="50" Height="50" x:Name="brdElement" BorderBrush="Goldenrod" 2 BorderThickness="2"> 3 <Border.Background> 4 <LinearGradientBrush StartPoint="0,1" EndPoint="1,0"> 5 <LinearGradientBrush.GradientStops> 6 <GradientStop Color="BurlyWood" Offset="0"/> 7 <GradientStop Color="MediumBlue" Offset=".5"/> 8 <GradientStop Color="SlateGray" Offset="1"/> 9 </LinearGradientBrush.GradientStops> 10 </LinearGradientBrush> 11 </Border.Background> 12 <Border.Effect> 13 <DropShadowEffect BlurRadius="10" Color="CadetBlue" Direction="0" 14 Opacity=".4" RenderingBias="Performance" ShadowDepth="15" /> 15 </Border.Effect> 16 </Border>
这里我改变了渐变顺序，从左下角到右上角。同时改变了阴影效果的角度和颜色。
更多的画刷
在前面我们已经讨论了使用常见的LinearGradient和SolidColorBrush的画刷，现在看下其他画刷。
1.RadialGradientBrush：提供一个圆形的渐变，以一个起始点呈椭圆状向外散发渐变，GradientOriginal表示渐变的源点，默认位置为(.5,.5)，即GradientOriginal和Center默认在一起，RadiusX和RadiusY表示椭圆的半径，其均值为0.5.，Offset表示离源点距离指定位置的颜色，将下列代码中的offset对换一下，可以获得第二幅图像。
1 <BorderWidth="50" Height="50" BorderBrush="Black" BorderThickness="2">
2 <Border.Background> 3 <RadialGradientBrush GradientOrigin=".25,.75" RadiusX=".6" 4 RadiusY=".6"> 5 <RadialGradientBrush.GradientStops> 6 <GradientStop Color="Red" Offset="0"></GradientStop> 7 <GradientStop Color="Yellow" Offset="1"></GradientStop> 8 </RadialGradientBrush.GradientStops> 9 </RadialGradientBrush> 10 </Border.Background> 11 </Border>
2.ImageBrush：提供能图片的画刷处理，需要指定图片，负责将位图填充到目标区域，Opacity设定图像的透明度。
1 <Border Width="100" Height="100" > 2 <Border.Background> 3 <ImageBrush ImageSource="图像路径" Opacity=".7"> 4 <!--<ImageBrush.Transform> 5 <SkewTransform AngleX="10" AngleY="10" /> 6 </ImageBrush.Transform>--> 7 </ImageBrush> 8 </Border.Background> 9 <Border.BitmapEffect> 10 <OuterGlowBitmapEffect GlowColor="Brown" GlowSize="20" Noise="3"/> 11 </Border.BitmapEffect> 12 </Border>
使用OuterGlowEffect给图像加上一个效果。
VisualBrush：
使用Visual对象来填充目标区域，所有控件都派生自Visual。那就意味着无论是一个按钮和RadioButton都完全可以填充到目标区域当中。但是需要注意的是VisualBrush仅仅是绘制了Visual的外观，填充到目标区域的按钮都是不能点击的，RadioButton也是不能选中的。
1 <Border Width="100" Height="100" x:Name="brdElement" CornerRadius="5" >
2 <Border.Background>
3 <ImageBrush ImageSource="图像路径" Opacity=".7">
4 </ImageBrush>
5 </Border.Background>
6 <Border.BitmapEffect>
7 <BevelBitmapEffect BevelWidth="5" EdgeProfile="BulgedUp"
8 LightAngle="90" Smoothness=".5" Relief=".7"/>
9 </Border.BitmapEffect>
10 </Border>
11 <Border Width="100" Height="100" Margin="20,0,0,0">
12 <Border.Background>
13 <VisualBrush TileMode="FlipXY" Viewport="1,1,1,1"
14 Stretch="UniformToFill" Visual="{Binding ElementName=目标名称}">
15 </VisualBrush>
16 </Border.Background>
17 </Border>
Bord Effects
以我先前使用Border的经验来看，一些主要的Border效果是经常用到的。
所有Border元素派生于支持两种边界效果的Border。
1.Effect：应用与整个Border,任何在Border内的子元素都会受到效果的影响。
你能够使用BlurEffrct模糊Border内的文本，代码如下：
1 <Border Background="AliceBlue" Width="100" Height="100" CornerRadius="5" 2 BorderBrush="Black" BorderThickness="2"> 3 <Border.Effect> 4 <BlurEffect Radius="3" RenderingBias="Quality" /> 5 </Border.Effect> 6 <TextBlock HorizontalAlignment="Center" 7 VerticalAlignment="Center" Text="This is inside Blured Border" 8 TextWrapping="Wrap" TextTrimming="WordEllipsis"/> 9 </Border>
2. DropShawEffect：作用于Border之外，如上面部分讨论的。
Border BitmapEffects
Border也能定义BitmapEffect，我在上面部分介绍了OuterGlowBitmapEffect和BevelBitmapEffect，接下来介绍剩下的。
1.EmbossBitmapEffect：使边界突出，LightAngle指定了突出的角度。
1 <Border Background="AliceBlue" Width="100" Height="100" CornerRadius="5" 2 BorderBrush="Black" BorderThickness="2"> 3 <Border.BitmapEffect> 4 <EmbossBitmapEffect LightAngle="270" Relief=".4" /> 5 </Border.BitmapEffect> 6 <TextBlock HorizontalAlignment="Center" Foreground="Gold" 7 FontSize="20" VerticalAlignment="Center" Text="This is Embossed" 8 TextWrapping="Wrap" TextTrimming="WordEllipsis"/> 9 </Border>
2.DropShadowBitmapEffect:指定dropshadows, 可以附加写噪声。
<DropShadowBitmapEffect Color="Red" Direction="200" Noise=".6"
ShadowDepth="10" Opacity=".6"/>
注意点
在实际的软件中，Effect和BitmapEffect会严重影响软件的性能，最好避免使用，或者对小元素使用效果，不能将BitmapEffect使用于整个窗体。
文章来自似水无痕：http://www.cnblogs.com/keylei203/
原文地址：https://www.cnblogs.com/Im-Victor/p/10615022.html