上一章《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/

WPF学习:3.Border & Brush的更多相关文章

  1. WPF学习之资源-Resources

    WPF学习之资源-Resources WPF通过资源来保存一些可以被重复利用的样式,对象定义以及一些传统的资源如二进制数据,图片等等,而在其支持上也更能体现出这些资源定义的优越性.比如通过Resour ...

  2. WPF学习之路初识

    WPF学习之路初识   WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...

  3. WPF学习(8)数据绑定

    说到数据绑定,其实这并不是一个新的玩意儿.了解asp.net的朋友都知道,在asp.net中已经用到了这个概念,例如Repeater等的数据绑定.那么,在WPF中的数据绑定相比较传统的asp.net中 ...

  4. 命令——WPF学习之深入浅出

    WPF学习之深入浅出话命令   WPF为我们准备了完善的命令系统,你可能会问:“有了路由事件为什么还需要命令系统呢?”.事件的作用是发布.传播一些消息,消息传达到了接收者,事件的指令也就算完成了,至于 ...

  5. WPF学习12:基于MVVM Light 制作图形编辑工具(3)

    本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续 这一次的目标是完成 两个任务. 本节完成后的效果: 本文分为三个部分: 1.对之前代码不合理的地方重新设计. 2.图形可选 ...

  6. WPF学习11:基于MVVM Light 制作图形编辑工具(2)

    本文是WPF学习10:基于MVVM Light 制作图形编辑工具(1)的后续 这一次的目标是完成 两个任务. 画布 效果: 画布上,选择的方案是:直接以Image作为画布,使用RenderTarget ...

  7. WPF学习10:基于MVVM Light 制作图形编辑工具(1)

    图形编辑器的功能如下图所示: 除了MVVM Light 框架是一个新东西之外,本文所涉及内容之前的WPF学习0-9基本都有相关介绍. 本节中,将搭建编辑器的界面,搭建MVVM Light 框架的使用环 ...

  8. WPF学习(8)数据绑定 https://www.cnblogs.com/jellochen/p/3541197.html

    说到数据绑定,其实这并不是一个新的玩意儿.了解asp.net的朋友都知道,在asp.net中已经用到了这个概念,例如Repeater等的数据绑定.那么,在WPF中的数据绑定相比较传统的asp.net中 ...

  9. 【WPF学习】第五十三章 动画类型回顾

    创建动画面临的第一个挑战是为动画选择正确的属性.期望的结果(例如,在窗口中移动元素)与需要使用的属性(在这种情况下是Canvas.Left和Canvas.Top属性)之间的关系并不总是很直观.下面是一 ...

随机推荐

  1. 二十八、layui的日历组件使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Django create和save方法

    Django的模型(Model)的本质是类,并不是一个具体的对象(Object).当你设计好模型后,你就可以对Model进行实例化从而创建一个一个具体的对象.Django对于创建对象提供了2种不同的s ...

  3. Web并发页面访问量统计实现

    Web并发页面访问量统计实现 - huangshulang1234的博客 - CSDN博客https://blog.csdn.net/huangshulang1234/article/details/ ...

  4. java异常处理规范

    异常处理的优势[存在意义]:异常检测者有检测出异常的能力,但不知道在出现该异常的情况下应该怎么处理.故库方法一般会抛出异常给调用者来处理.所以总结而言,异常处理的优势就是,将处理错误(调用者处理)从检 ...

  5. 面试题(一续Spring)

    9.Spring体系结构和jar用途 参考https://blog.csdn.net/sunchen2012/article/details/53939253 spring官网给出了一张spring3 ...

  6. python之函数闭包、可迭代对象和迭代器

    一.函数名的应用 # 1,函数名就是函数的内存地址,而函数名()则是运行这个函数. def func(): return print(func) # 返回一个地址 # 2,函数名可以作为变量. def ...

  7. LoadRunner【第五篇】关联

    关联的定义及使用场景 关联:将服务器提供动态变化的值存放在变量中,当需要使用该变量时,由LoadRunner自动从服务器响应的信息中获取该值,并在后面使用的过程中进行替换.(也可能是前端页面动态生成的 ...

  8. Linux Centos7.x 安装部署Mysql5.7几种方式的操作手册

    简述 Linux  Centos7.x 操作系统版本下针对Mysql的安装和使用多少跟之前的Centos6之前版本有所不同的,下面介绍下在centos7.x环境里安装mysql5.7的几种方法: 一. ...

  9. ubuntu文件搜索统计

    一.在ubuntu下如何搜索文件 1.特点:快速,但是是模糊查找,例如 找 #whereis mysql 它会把mysql,mysql.ini,mysql.*所在的目录都找出来.我一般的查找都用这条命 ...

  10. IScroll某些手机下不触发ScrollEnd问题处理

    同样是微信7.0,看起来内核都是x5内核,两款不同的手机,一个有问题,一个没有问题. IScroll在问题手机下会出现快速拨动时候不触发ScrollEnd事件现象,轻点一次才会触发,解决办法 docu ...