WPF学习:3.Border & Brush

时间:2022-04-26 08:59:29

上一章《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允许放置一个简单的子元素在其中,看下面例子:

WPF学习:3.Border & Brush
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>
WPF学习:3.Border & Brush

  效果图:WPF学习:3.Border & Brush,仔细分析上面的代码,Width/Height指定了Border的的尺寸,Board.Background通过Brush指定背景的颜色,SolidColorBrush可以设置任何颜色的Brush,它的属性待会讨论。

  Board.Effect使用了一个DrowShaowEffect来增加阴影效果,需要注意的属性如下:

  1.Color:阴影颜色

   2.Opacity:透明度,范围0-1,0完全透明。

3.BlurRadius:模糊半径,可以增加这个系数来增加阴影的程度。0:WPF学习:3.Border & Brush,50:WPF学习:3.Border & Brush

   4.Direction:方向,0-360. 0:WPF学习:3.Border & Brush,90:WPF学习:3.Border & Brush

   5.ShdaowDepth:阴影深度,值越大,阴影被拖的就越远。0:WPF学习:3.Border & Brush,20:WPF学习:3.Border & Brush

讨论更多的例子:

WPF学习:3.Border & Brush

WPF学习:3.Border & Brush
 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>
WPF学习:3.Border & Brush

  第一个例子中,使用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)为蔚蓝色,颜色呈斜下的渐变。

  再看这一个例子:

WPF学习:3.Border & Brush

WPF学习:3.Border & Brush
 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>
WPF学习:3.Border & Brush

  这里我改变了渐变顺序,从左下角到右上角。同时改变了阴影效果的角度和颜色。

更多的画刷

  在前面我们已经讨论了使用常见的LinearGradient和SolidColorBrush的画刷,现在看下其他画刷。WPF学习:3.Border & Brush

  1.RadialGradientBrush:提供一个圆形的渐变,以一个起始点呈椭圆状向外散发渐变,GradientOriginal表示渐变的源点,默认位置为(.5,.5),即GradientOriginal和Center默认在一起,RadiusX和RadiusY表示椭圆的半径,其均值为0.5.,Offset表示离源点距离指定位置的颜色,将下列代码中的offset对换一下,可以获得第二幅图像。

WPF学习:3.Border & Brush
 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>
WPF学习:3.Border & Brush

  2.ImageBrush:提供能图片的画刷处理,需要指定图片,负责将位图填充到目标区域,Opacity设定图像的透明度。

WPF学习:3.Border & Brush

WPF学习:3.Border & Brush
 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>
WPF学习:3.Border & Brush

  使用OuterGlowEffect给图像加上一个效果。

VisualBrush:

  使用Visual对象来填充目标区域,所有控件都派生自Visual。那就意味着无论是一个按钮和RadioButton都完全可以填充到目标区域当中。但是需要注意的是VisualBrush仅仅是绘制了Visual的外观,填充到目标区域的按钮都是不能点击的,RadioButton也是不能选中的。

WPF学习:3.Border & Brush
 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>
WPF学习:3.Border & Brush

Bord Effects

  以我先前使用Border的经验来看,一些主要的Border效果是经常用到的。

  所有Border元素派生于支持两种边界效果的Border。

  1.Effect:应用与整个Border,任何在Border内的子元素都会受到效果的影响。

WPF学习:3.Border & Brush

    

      你能够使用BlurEffrct模糊Border内的文本,代码如下:

WPF学习:3.Border & Brush
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>
WPF学习:3.Border & Brush

  2. DropShawEffect:作用于Border之外,如上面部分讨论的。

Border BitmapEffects

  Border也能定义BitmapEffect,我在上面部分介绍了OuterGlowBitmapEffect和BevelBitmapEffect,接下来介绍剩下的。

  1.EmbossBitmapEffect:使边界突出,LightAngle指定了突出的角度。

WPF学习:3.Border & Brush
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>
WPF学习:3.Border & Brush

  2.DropShadowBitmapEffect:指定dropshadows, 可以附加写噪声。

WPF学习:3.Border & Brush

<DropShadowBitmapEffect Color="Red" Direction="200" Noise=".6"
ShadowDepth="10" Opacity=".6"/>

注意点

  在实际的软件中,Effect和BitmapEffect会严重影响软件的性能,最好避免使用,或者对小元素使用效果,不能将BitmapEffect使用于整个窗体。

文章来自似水无痕:http://www.cnblogs.com/keylei203/