WPF 动画(形状、画刷)
一:形状
在WPF用户界面中,可以通过形状(Shape)来绘制直线、椭圆、矩形及一些多边形的类。通过这些基本的图像,组合成为复杂的图形。
Shape类中,主要的形状有Rectangle(),Ellipse(),Line,Polyline(),Polygon(),Path(),都继承自抽象类System.Windows.Shapes.Shape。
名称 | 作用 |
Rectangle | 矩形 |
Ellipse | 椭圆 |
Line | 直线 |
Polyline | 一系列相互连接的直线 |
Polygon | 一系列连接的直线的闭合图像 |
Path | 将多个基本形状组合成单独的元素 |
在Shape类中,有一些重要的属性,下面用一个矩形和椭圆例子来简单介绍。
<StackPanel>
<Ellipse Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Ellipse> <!--fill填充对象,stroke边框颜色-->
<Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Rectangle>
<Label Content="圆角边距10"></Label>
<Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" RadiusX="10" RadiusY="10" HorizontalAlignment="Left"></Rectangle><!--Radius影像矩形的圆角大小--> </StackPanel>
Fill属性决定填充的颜色,Stroke边框颜色,在Rectangle类中多了RadiusX、RadiusY,决定了矩形圆角的大小。
小结:
在图元拜访过程中,一般不使用StackPanel、DockPanel、WrapPanel面板,因为他们被设计成了独立的元素,Grid面板稍微灵活一点,它允许同一个单元格中放置 任意个元素。最理想的是用Canvas容器,直接用为每个形状指定坐标。
小技巧:
不要用Canvas占据整个窗口,可以先创建个Grid面板,在Grid面板的某个单元格中使用Canvas容器。对于可以自由流动的动态用户界面中锁定一小部分进行绘图,是一种非常好的方法。
3.使用Viewbox控件缩放形状
使用Canvas面板唯一的限制是不能改变图元自身的尺寸适应窗口大小。有些情况下,我们希望图元随着窗口大小改变尺寸,这样可以更好的利用可用空间。而使用Viewbox这个类只接受一个子元素,不过子元素可以是布局容器,在容器中可以包含其他元素。通常我们在Viewbox中放置Canvas,然后再Canvas面板中放置图形。
下面的例子就是在Viewbox中放置Canvas,Canvas中放置矩形和椭圆,随窗口大小改变进行缩放。
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions> <Label Content="The first row of a grid"></Label> <Viewbox Grid.Row="1" HorizontalAlignment="Left">
<Canvas Width="200" Height="150">
<Ellipse Fill="Yellow" Stroke="Black" Canvas.Left="10" Canvas.Top="50" Width="100" Height="50" HorizontalAlignment="Left"></Ellipse>
<Rectangle Fill="Yellow" Stroke="Black" Canvas.Left="30" Canvas.Top="40" Width="100" Height="50"></Rectangle>
</Canvas>
</Viewbox>
</Grid>
在涉及到缩放图形时,最好被缩放的是矢量图,这样的话尺寸改变,图像不会因为分辨率不高,变得不清晰。
Line直线:
由2个点来控制,X1点和X2点决定线段的起始位置,Line类中没有Fill属性,只能用Stroke属性填充线段的颜色,坐标原点在布局容器的左上角。
<Line Stroke="Blue" X1="0" Y1="0" X2="50" Y2="50"></Line>
Polyline折线:
用多个连续的点控制,依次连接。
<Polyline Stroke="Blue" Points="0,0 20,60 40,0 60,60 80,0 100,80"></Polyline>
Polygon多边形:
Polygon类和Polyline类相似,是一系列点的集合,不过最好加上了一条线,将第一个点和最后一根点连了起来。绘制五角星
<Polygon Fill="Green" Stroke="Blue" Points="15,200 68,70 110,200 0,125 135,125"></Polygon>
二:画刷
画刷填充区域,常见的画刷有
名称 | 说明 |
SolidColorBrush | 使用单一颜色区域绘制 |
LinearGradientBrush | 可以从一种颜色渐变到另一种颜色,也可以多种颜色渐变,线性渐变 |
RadialGradientBrush | 径向渐变填充,类似圆的放射 |
ImageBrush | 用可被拉伸缩放的图像填充区域 |
DrawingBrush | 使用Drawing对象绘制区域,对象可包含已定义的形状和位图 |
VisualBrush | 可使用该画刷讲部分用户界面复制到另一个区域。 |
BitmapCacheBrush | 使用Visual对象缓冲的内容绘制区域,和VB画刷类似,但效率更高 |
使用RadialGradientBrush画刷画一个径向渐变的圆,GradientOrigin设置径向渐变的中心,offset偏移量
<Ellipse Stroke="Black" Width="200" Height="200">
<Ellipse.Fill>
<RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Blue" Offset="1"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
使用ImageBrush可以用位图填充区域,通过设置ImageSource属性来指定希望的位图,
<Grid Margin="5">
<Grid.Background>
<ImageBrush ImageSource="123.jpg"/>
</Grid.Background>
</Grid>
WPF 动画(形状、画刷)的更多相关文章
- 简述WPF中的画刷(Brush)
原文:简述WPF中的画刷(Brush) -------------------------------------------------------------------------------- ...
- WPF样式之画刷结合样式
第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...
- WPF中线性渐变画刷的一个小窍门
最近被项目里面控件的设计搞的死去活来的,大部分的设计都会需要使用进度条的功能,因为UI形状的变态,使用ProgressBar不能满足需求,没办法就自己想办法实现进度显示.折腾的多了发现一个很不错的方法 ...
- WPF线性渐变画刷应用之——炫彩线条
效果图: Xaml代码: <Rectangle Width="800" Height="10"> <Rectangle.Fill> &l ...
- WPF学习系列之八(形状,画刷和变换)
形状,画刷和变换 概述: 在许多用户界面技术中,普通控件和自定义绘图之间具有清晰的区别.通常来说,绘图特性只用于特定的应用程序--如游戏,数据可视化和物理仿真等.而WPF具有一个非常不同的原则.它 ...
- 深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例
原文:深入WPF中的图像画刷(ImageBrush)之1--ImageBrush使用举例 昨天我在<简述WPF中的画刷(Brush) >中简要介绍了WPF中的画刷的使用.现在接着深入研究 ...
- 深入WPF中的图像画刷(ImageBrush)之2——ImageBrush的铺设方式
原文:深入WPF中的图像画刷(ImageBrush)之2--ImageBrush的铺设方式 ------------------------------------------------------ ...
- WPF 10天修炼 第八天 - 形状、画刷和变换
图形 在WPF中使用绘图最简单的就是使用Shape类.Shape类继承自FrameworkElement,是一个专门用来绘图的类.Shape类中年派生的类有直线.矩形.多边形和圆形等. System. ...
- 【WPF学习】第四十章 画刷
画刷填充区域,不管是元素的背景色.前景色以及边框,还是形状的内部填充和笔画(Stroke).最简单的画刷类型是SolidColorBrush,这种画刷填充一种固定.连续的颜色.在XAML中设置形状的S ...
随机推荐
- mongo里面根据对象字段的ID查询 db.Photo.find({'owner.$id':ObjectId('xxxx')}) , 并且使用forEach循环修改查询的数据
var ones = db.Photo.find({'owner.$id':ObjectId("5344f0dab7c58e8e098b4567")}) db.Photo.find ...
- WCF 入门(25,26,27,28)
前言 项目赶时间,工期紧,熬过这段时间应该就好了吧.希望如此. 今天把自己那部分写的差不多了,回来和小伙伴一起又看了一遍<夏洛特烦恼>,还挺好看的,明天继续加班,do it. 第25-28 ...
- WCF入门 (13)
前言 公司略无聊,周三前同事推荐跳槽,于是会去更新了一下简历,突然发现,快一年了,我竟然想不出我可以往简历上添加点什么值得自豪的东西.下午和小伙伴聊了一会天,他告诉我,可以往简历上写上“英语口语水平有 ...
- mysqldump使用方法
1.mysqldump的几种常用方法: (1)导出整个数据库(包括数据库中的数据) mysqldump -u username -p dbname > dbname.sql (2)导出数据库结构 ...
- “耐撕”团队 2016.03.30 站立会议
1. 时间: 16:45--17:05 总计:20分钟 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...
- iBATIS sqlMapConfig配置详解
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMapConfig PUBLIC & ...
- text-align:justify_内容居中对齐
一直发现text-align : justify这个对齐方式不好使,都不知道为什么么么哒: 因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符,用户代理会把这个行的最后几个字符往右边拉,实 ...
- startsWith
if (!String.prototype.startsWith) { Object.defineProperty(String.prototype, 'startsWith', { enumerab ...
- 50行代码仿backbone_todos
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- android 6.0 SDK中删除HttpClient的相关类的解决方法
一.出现的情况 在eclipse或 android studio开发, 设置android SDK的编译版本为23时,且使用了httpClient相关类的库项目:如android-async-http ...