重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke,
Brush
作者：webabcd
介绍
重新想象 Windows 8 Store Apps
之 绘图
- Shape - 图形
- Path - 路径
- Stroke - 笔划
- Brush - 画笔
示例
1、演示如何绘制图形
Drawing/Shape.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="XamlDemo.Drawing.Shape"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:XamlDemo.Drawing"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span>></span><span><!--</span><span>
绘制图形
</span><span>--></span><span><!--</span><span>画直线</span><span>--></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="300"</span><span> Y2</span><span>="100"</span><span> Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="3"</span><span>/></span><span><!--</span><span>画矩形</span><span>--></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="50"</span><span> Fill</span><span>="Red"</span><span> Stroke</span><span>="Yellow"</span><span> StrokeThickness</span><span>="3"</span><span>/></span><span><!--</span><span>画折线（即多条连接起来的直线）</span><span>--></span><span><</span><span>Polyline </span><span>Points</span><span>="10,100 50,10 100,100"</span><span> Stroke</span><span>="Green"</span><span> StrokeThickness</span><span>="3"</span><span>/></span><span><!--</span><span>画多边形</span><span>--></span><span><</span><span>Polygon </span><span>Points</span><span>="50,50 100,50 300,100 200,100 100,200"</span><span> Fill</span><span>="Yellow"</span><span> Stroke</span><span>="Red"</span><span> StrokeThickness</span><span>="6"</span><span>/></span><span><!--</span><span>画椭圆</span><span>--></span><span><</span><span>Ellipse </span><span>Width</span><span>="100"</span><span> Height</span><span>="50"</span><span> Fill</span><span>="Orange"</span><span> Stroke</span><span>="Red"</span><span> StrokeThickness</span><span>="6"</span><span>/></span><span><!--</span><span>
Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚举）
Fill - 充满容器，不保留长宽比
None - 不做任何处理，如果图片比容器大，则多出的部分被剪裁
Uniform - 等比缩放到容器（默认值）
UniformToFill - 充满容器，且保留长宽比，多出的部分被剪裁
</span><span>--></span><span><</span><span>Grid </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span> Background</span><span>="Black"</span><span>></span><span><</span><span>Ellipse </span><span>Fill</span><span>="Orange"</span><span> Stroke</span><span>="Red"</span><span> StrokeThickness</span><span>="6"</span><span> Stretch</span><span>="UniformToFill"</span><span>/></span><span></</span><span>Grid</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>
2、演示如何绘制路径
Drawing/Path.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="XamlDemo.Drawing.Path"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:XamlDemo.Drawing"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><!--</span><span>通过 Path 绘制图形</span><span>--></span><span><!--</span><span>
Path.Data - 要绘制的 Geometry
</span><span>--></span><span><</span><span>Path </span><span>Fill</span><span>="Yellow"</span><span> Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="6"</span><span>></span><span><</span><span>Path.Data</span><span>></span><span><!--</span><span>
EllipseGeometry - 椭圆
Center - 原点坐标
RadiusX - X轴半径
RadiusY - Y轴半径
</span><span>--></span><span><</span><span>EllipseGeometry </span><span>Center</span><span>="50,25"</span><span> RadiusX</span><span>="50"</span><span> RadiusY</span><span>="25"</span><span>/></span><span></</span><span>Path.Data</span><span>></span><span></</span><span>Path</span><span>></span><span><</span><span>Path </span><span>Fill</span><span>="Yellow"</span><span> Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="6"</span><span>></span><span><</span><span>Path.Data</span><span>></span><span><!--</span><span>
RectangleGeometry - 矩形
Rect - 左上角点的坐标，矩形宽，矩形高
</span><span>--></span><span><</span><span>RectangleGeometry </span><span>Rect</span><span>="100,0,100,50"</span><span>/></span><span></</span><span>Path.Data</span><span>></span><span></</span><span>Path</span><span>></span><span><</span><span>Path </span><span>Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="6"</span><span>></span><span><</span><span>Path.Data</span><span>></span><span><!--</span><span>
LineGeometry - 线
StartPoint - 起点坐标
EndPoint - 终点坐标
</span><span>--></span><span><</span><span>LineGeometry </span><span>StartPoint</span><span>="200,0"</span><span> EndPoint</span><span>="300,100"</span><span>/></span><span></</span><span>Path.Data</span><span>></span><span></</span><span>Path</span><span>></span><span><</span><span>Path </span><span>Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="6"</span><span>></span><span><</span><span>Path.Data</span><span>></span><span><!--</span><span>
PathGeometry - 路径，一个可能由弧、曲线、椭圆、直线、矩形组成的复杂图形
</span><span>--></span><span><</span><span>PathGeometry</span><span>></span><span><</span><span>PathGeometry.Figures</span><span>></span><span><!--</span><span>
StartPoint - 起点坐标
</span><span>--></span><span><</span><span>PathFigure </span><span>StartPoint</span><span>="300,0"</span><span>></span><span><</span><span>PathFigure.Segments</span><span>></span><span><!--</span><span>
Path 的 Segment 集合
</span><span>--></span><span><</span><span>PathSegmentCollection</span><span>></span><span><!--</span><span>
LineSegment - 单一线段
PolyLineSegment - 线段集合
ArcSegment - 弧（椭圆的一部分）
BezierSegment - 两点之间的一条三次贝塞尔曲线
QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线
PolyBezierSegment - 一条或多条三次贝塞尔曲线
PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线
</span><span>--></span><span><!--</span><span>
Size - 弧的 X 轴和 Y 轴半径
Point - 该 Segment 的终点坐标，即下一个 Segment 的起点坐标
</span><span>--></span><span><</span><span>ArcSegment </span><span>Size</span><span>="100,50"</span><span> Point</span><span>="400,100"</span><span>/></span><span><!--</span><span>
Point - 该 Segment 的终点坐标，即下一个 Segment 的起点坐标
</span><span>--></span><span><</span><span>LineSegment </span><span>Point</span><span>="500,200"</span><span>/></span><span></</span><span>PathSegmentCollection</span><span>></span><span></</span><span>PathFigure.Segments</span><span>></span><span></</span><span>PathFigure</span><span>></span><span></</span><span>PathGeometry.Figures</span><span>></span><span></</span><span>PathGeometry</span><span>></span><span></</span><span>Path.Data</span><span>></span><span></</span><span>Path</span><span>></span><span><</span><span>Path </span><span>Fill</span><span>="Yellow"</span><span> Stroke</span><span>="Blue"</span><span> StrokeThickness</span><span>="6"</span><span>></span><span><</span><span>Path.Data</span><span>></span><span><!--</span><span>
GeometryGroup - 由一个或多个 Geometry 组成
FillRule - 填充规则（System.Windows.Media.FillRule 枚举）
EvenOdd - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数，则点在内部；如果为偶数，则点在外部。
Nonzero - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后检查形状段与该射线的交点。从零开始计数，每当线段从左向右穿过该射线时加 1，而每当路径段从右向左穿过该射线时减 1。计算交点的数目后，如果结果为零，则说明该点位于路径外部。否则，它位于路径内部。
</span><span>--></span><span><</span><span>GeometryGroup </span><span>FillRule</span><span>="EvenOdd"</span><span>></span><span><</span><span>LineGeometry </span><span>StartPoint</span><span>="200,0"</span><span> EndPoint</span><span>="300,100"</span><span>/></span><span><</span><span>EllipseGeometry </span><span>Center</span><span>="250,50"</span><span> RadiusX</span><span>="50"</span><span> RadiusY</span><span>="50"</span><span>/></span><span><</span><span>RectangleGeometry </span><span>Rect</span><span>="200, 0, 100, 100"</span><span>/></span><span></</span><span>GeometryGroup</span><span>></span><span></</span><span>Path.Data</span><span>></span><span></</span><span>Path</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>
3、演示 Stroke（笔划）的应用
Drawing/Stroke.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="XamlDemo.Drawing.Stroke"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:XamlDemo.Drawing"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span>></span><span><!--</span><span>Stroke - 笔划</span><span>--></span><span><!--</span><span>
StrokeDashArray - 虚线实体和虚线间隙的值的集合
以本例为例：第1条实线长度2，第1条虚线长度4，第2条实线长度6，第2条虚线长度2，第3条实线长度4，第3条虚线长度6
长度为 StrokeDashArray 乘以 StrokeThickness/2
</span><span>--></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2 4 6"</span><span>/></span><span><!--</span><span>
StrokeDashCap - 虚线两端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
PenLineCap.Flat - 无。默认值
PenLineCap.Round - 直径等于 StrokeThickness
PenLineCap.Square - 高度等于 StrokeThickness 并且 宽度等于 StrokeThickness/2
PenLineCap.Triangle - 底边长等于 StrokeThickness 的等腰直角三角形
</span><span>--></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeDashCap</span><span>="Flat"</span><span>/></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeDashCap</span><span>="Round"</span><span>/></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeDashCap</span><span>="Square"</span><span>/></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeDashCap</span><span>="Triangle"</span><span>/></span><span><!--</span><span>
StrokeStartLineCap - 虚线起始端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
StrokeEndLineCap - 虚线终结端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
</span><span>--></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeStartLineCap</span><span>="Triangle"</span><span> StrokeEndLineCap</span><span>="Round"</span><span>/></span><span><!--</span><span>
StrokeDashOffset - 虚线的起始点的便宜位置
以下举例：画一条以虚线间隙为起始的虚线
</span><span>--></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="1000"</span><span> Y2</span><span>="0"</span><span> Margin</span><span>="0 30 0 0"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeDashArray</span><span>="2"</span><span> StrokeDashOffset</span><span>="10"</span><span>/></span><span><!--</span><span>
StrokeLineJoin - 图形连接点处的连接类型（System.Windows.Media.PenLineJoin 枚举）
StrokeLineJoin.Bevel - 线形连接
StrokeLineJoin.Miter - 角形连接。默认值
StrokeLineJoin.Round - 弧形连接
</span><span>--></span><span><</span><span>StackPanel </span><span>Margin</span><span>="0 30 0 0"</span><span> Orientation</span><span>="Horizontal"</span><span>></span><span><</span><span>Polyline </span><span>Points</span><span>="10,100 50,10 100,100"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> HorizontalAlignment</span><span>="Center"</span><span> StrokeLineJoin</span><span>="Bevel"</span><span>/></span><span><</span><span>Polyline </span><span>Points</span><span>="10,100 50,10 100,100"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> HorizontalAlignment</span><span>="Center"</span><span> StrokeLineJoin</span><span>="Miter"</span><span>/></span><span><</span><span>Polyline </span><span>Points</span><span>="10,100 50,10 100,100"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> HorizontalAlignment</span><span>="Center"</span><span> StrokeLineJoin</span><span>="Round"</span><span>/></span><span></</span><span>StackPanel</span><span>></span><span><!--</span><span>
StrokeMiterLimit - 斜接长度（蓝色线部分）与 StrokeThickness/2 的比值。默认值 10，最小值 1
</span><span>--></span><span><</span><span>Grid </span><span>Margin</span><span>="0 30 0 0"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Grid.ColumnDefinitions</span><span>></span><span><</span><span>ColumnDefinition </span><span>Width</span><span>="120"</span><span>/></span><span><</span><span>ColumnDefinition </span><span>Width</span><span>="120"</span><span>/></span><span><</span><span>ColumnDefinition </span><span>Width</span><span>="120"</span><span>/></span><span></</span><span>Grid.ColumnDefinitions</span><span>></span><span><</span><span>Polyline </span><span>Grid.Column</span><span>="0"</span><span> Points</span><span>="0,100 50,10 100,100"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeMiterLimit</span><span>="1"</span><span>/></span><span><</span><span>Line </span><span>Grid.Column</span><span>="0"</span><span> X1</span><span>="50"</span><span> Y1</span><span>="10"</span><span> X2</span><span>="50"</span><span> Y2</span><span>="0"</span><span> Stroke</span><span>="Blue"</span><span>/></span><span><</span><span>Polyline </span><span>Grid.Column</span><span>="0"</span><span> Points</span><span>="0,100 50,10 100,100"</span><span> Stroke</span><span>="Red"</span><span>/></span><span><</span><span>Polyline </span><span>Grid.Column</span><span>="1"</span><span> Points</span><span>="0,100 50,10 100,100"</span><span> Stroke</span><span>="Orange"</span><span> StrokeThickness</span><span>="20"</span><span> StrokeMiterLimit</span><span>="2.0"</span><span>/></span><span><</span><span>Line </span><span>Grid.Column</span><span>="1"</span><span> X1</span><span>="50"</span><span> Y1</span><span>="10"</span><span> X2</span><span>="50"</span><span> Y2</span><span>="-10"</span><span> Stroke</span><span>="Blue"</span><span>/></span><span><</span><span>Polyline </span><span>Grid.Column</span><span>="1"</span><span> Points</span><span>="0,100 50,10 100,100"</span><span> Stroke</span><span>="Red"</span><span>/></span><span></</span><span>Grid</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>
4、演示 Brush（画笔）的应用
Drawing/Brush.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="XamlDemo.Drawing.Brush"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:XamlDemo.Drawing"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><!--</span><span>Brush - 画笔</span><span>--></span><span><!--</span><span>
SolidColorBrush - 单色画笔
Color - 颜色
格式如下：
预定义的Color的名称。如：Red, Green, Blue
#RGB。如：#F00
#ARGB（A为Alpha值）。如：#FF00, #F0F0, #F00F
#RGB。如：#FF0000, #00FF00, #0000FF
#ARGB（A为Alpha值）。如：#FFFF0000, #FF00FF00, #FF0000FF
</span><span>--></span><span><</span><span>Ellipse </span><span>Margin</span><span>="10"</span><span> Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> Stroke</span><span>="Yellow"</span><span> StrokeThickness</span><span>="3"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Ellipse.Fill</span><span>></span><span><</span><span>SolidColorBrush </span><span>Color</span><span>="#88FF0000"</span><span>/></span><span></</span><span>Ellipse.Fill</span><span>></span><span></</span><span>Ellipse</span><span>></span><span><!--</span><span>
ImageBrush - 图像画笔
ImageSource - 图片地址
Stretch - 拉伸方式
AlignmentX - 水平方向的对齐方式。Center（默认值）, Left, Right
AlignmentY - 垂直方向的对齐方式。Center（默认值）, Top, Bottom
</span><span>--></span><span><</span><span>Rectangle </span><span>Width</span><span>="100"</span><span> Height</span><span>="100"</span><span> Stroke</span><span>="Red"</span><span> StrokeThickness</span><span>="1"</span><span> HorizontalAlignment</span><span>="Left"</span><span> Margin</span><span>="0 10 0 0"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><</span><span>ImageBrush </span><span>ImageSource</span><span>="/Assets/Logo.png"</span><span> AlignmentX</span><span>="Right"</span><span> AlignmentY</span><span>="Bottom"</span><span> Stretch</span><span>="Fill"</span><span>/></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>WebView </span><span>x:Name</span><span>="webView"</span><span> Source</span><span>="http://webabcd.cnblogs.com"</span><span> Width</span><span>="300"</span><span> Height</span><span>="100"</span><span> LoadCompleted</span><span>="webView_LoadCompleted_1"</span><span> HorizontalAlignment</span><span>="Left"</span><span> Margin</span><span>="0 10 0 0"</span><span>/></span><span><!--</span><span>
WebView - 浏览器画笔
SourceName - WebView 指向的 http 地址
注：如果需要显示 WebView 的最新结果，需要调用 WebViewBrush.Redraw() 方法
</span><span>--></span><span><</span><span>Rectangle </span><span>Width</span><span>="300"</span><span> Height</span><span>="100"</span><span> Stroke</span><span>="Red"</span><span> HorizontalAlignment</span><span>="Left"</span><span> Margin</span><span>="0 10 0 0"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><</span><span>WebViewBrush </span><span>x:Name</span><span>="webViewBrush"</span><span> SourceName</span><span>="webView"</span><span>/></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>StackPanel </span><span>Orientation</span><span>="Horizontal"</span><span> HorizontalAlignment</span><span>="Left"</span><span> Margin</span><span>="0 10 0 0"</span><span>></span><span><</span><span>Grid</span><span>></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><!--</span><span>
LinearGradientBrush - 线性渐变画笔
StartPoint - 线性渐变的起点。默认渐变方向为对角线方向，默认值为左上角0,0
EndPoint - 线性渐变的终点。默认渐变方向为对角线方向，默认值为右下角1,1
GradientStop - 渐变中，过渡点的设置
Color - 过渡点的颜色
Offset - 过渡点的位置。相对于渐变线的比值。最小值0.0（默认值），最大值1.0
ColorInterpolationMode - 插入渐变颜色的方式（System.Windows.Media.ColorInterpolationMode 枚举）
ScRgbLinearInterpolation - scRGB
SRgbLinearInterpolation - sRGB。默认值
</span><span>--></span><span><</span><span>LinearGradientBrush </span><span>StartPoint</span><span>="0,0"</span><span> EndPoint</span><span>="1,1"</span><span> ColorInterpolationMode</span><span>="SRgbLinearInterpolation"</span><span>></span><span><</span><span>GradientStop </span><span>Color</span><span>="Red"</span><span> Offset</span><span>="0.0"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Green"</span><span> Offset</span><span>="0.25"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Blue"</span><span> Offset</span><span>="0.75"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Yellow"</span><span> Offset</span><span>="1.0"</span><span>/></span><span></</span><span>LinearGradientBrush</span><span>></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="200"</span><span> Y2</span><span>="100"</span><span> Stroke</span><span>="Black"</span><span> HorizontalAlignment</span><span>="Left"</span><span>/></span><span></</span><span>Grid</span><span>></span><span><</span><span>Grid </span><span>Margin</span><span>="10 0 0 0"</span><span>></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><!--</span><span>
MappingMode - 指定线性渐变的起点（StartPoint）和终点（EndPoint）相对于输出区域是相对的还是绝对的（System.Windows.Media.BrushMappingMode 枚举）
MappingMode.RelativeToBoundingBox - 相对坐标。默认值
MappingMode.Absolute - 绝对坐标
</span><span>--></span><span><</span><span>LinearGradientBrush </span><span>StartPoint</span><span>="0,0"</span><span> EndPoint</span><span>="200,100"</span><span> MappingMode</span><span>="Absolute"</span><span>></span><span><</span><span>GradientStop </span><span>Color</span><span>="Red"</span><span> Offset</span><span>="0.0"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Green"</span><span> Offset</span><span>="0.25"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Blue"</span><span> Offset</span><span>="0.75"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Yellow"</span><span> Offset</span><span>="1.0"</span><span>/></span><span></</span><span>LinearGradientBrush</span><span>></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>Line </span><span>X1</span><span>="0"</span><span> Y1</span><span>="0"</span><span> X2</span><span>="200"</span><span> Y2</span><span>="100"</span><span> Stroke</span><span>="Black"</span><span> HorizontalAlignment</span><span>="Left"</span><span>/></span><span></</span><span>Grid</span><span>></span><span><</span><span>Grid </span><span>Margin</span><span>="10 0 0 0"</span><span>></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><!--</span><span>
SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
GradientSpreadMethod.Pad - 用线性渐变线末端的颜色值填充剩余空间。默认值
</span><span>--></span><span><</span><span>LinearGradientBrush </span><span>StartPoint</span><span>="0.4,0.5"</span><span> EndPoint</span><span>="0.6,0.5"</span><span> SpreadMethod</span><span>="Pad"</span><span>></span><span><</span><span>GradientStop </span><span>Color</span><span>="Red"</span><span> Offset</span><span>="0.0"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Green"</span><span> Offset</span><span>="1.0"</span><span>/></span><span></</span><span>LinearGradientBrush</span><span>></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>Line </span><span>X1</span><span>="80"</span><span> Y1</span><span>="50"</span><span> X2</span><span>="120"</span><span> Y2</span><span>="50"</span><span> Stroke</span><span>="Black"</span><span> HorizontalAlignment</span><span>="Left"</span><span>/></span><span></</span><span>Grid</span><span>></span><span><</span><span>Grid </span><span>Margin</span><span>="10 0 0 0"</span><span>></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><!--</span><span>
SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
GradientSpreadMethod.Reflect - 相邻填充区域，以 相反方向 重复渐变，直至填充满整个剩余空间
</span><span>--></span><span><</span><span>LinearGradientBrush </span><span>StartPoint</span><span>="0.4,0.5"</span><span> EndPoint</span><span>="0.6,0.5"</span><span> SpreadMethod</span><span>="Reflect"</span><span>></span><span><</span><span>GradientStop </span><span>Color</span><span>="Red"</span><span> Offset</span><span>="0.0"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Green"</span><span> Offset</span><span>="1.0"</span><span>/></span><span></</span><span>LinearGradientBrush</span><span>></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>Line </span><span>X1</span><span>="80"</span><span> Y1</span><span>="50"</span><span> X2</span><span>="120"</span><span> Y2</span><span>="50"</span><span> Stroke</span><span>="Black"</span><span> HorizontalAlignment</span><span>="Left"</span><span>/></span><span></</span><span>Grid</span><span>></span><span><</span><span>Grid </span><span>Margin</span><span>="10 0 0 0"</span><span>></span><span><</span><span>Rectangle </span><span>Width</span><span>="200"</span><span> Height</span><span>="100"</span><span> HorizontalAlignment</span><span>="Left"</span><span>></span><span><</span><span>Rectangle.Fill</span><span>></span><span><!--</span><span>
SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
GradientSpreadMethod.Repeat - 相邻填充区域，以 相同方向 重复渐变，直至填充满整个剩余空间
</span><span>--></span><span><</span><span>LinearGradientBrush </span><span>StartPoint</span><span>="0.4,0.5"</span><span> EndPoint</span><span>="0.6,0.5"</span><span> SpreadMethod</span><span>="Repeat"</span><span>></span><span><</span><span>GradientStop </span><span>Color</span><span>="Red"</span><span> Offset</span><span>="0.0"</span><span>/></span><span><</span><span>GradientStop </span><span>Color</span><span>="Green"</span><span> Offset</span><span>="1.0"</span><span>/></span><span></</span><span>LinearGradientBrush</span><span>></span><span></</span><span>Rectangle.Fill</span><span>></span><span></</span><span>Rectangle</span><span>></span><span><</span><span>Line </span><span>X1</span><span>="80"</span><span> Y1</span><span>="50"</span><span> X2</span><span>="120"</span><span> Y2</span><span>="50"</span><span> Stroke</span><span>="Black"</span><span> HorizontalAlignment</span><span>="Left"</span><span>/></span><span></</span><span>Grid</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>Drawing/Brush.xaml.cs
<span>using</span><span> Windows.UI.Xaml.Controls;
</span><span>using</span><span> Windows.UI.Xaml.Navigation;
</span><span>namespace</span><span> XamlDemo.Drawing
{
</span><span>public</span><span>sealed</span><span>partial</span><span>class</span><span> Brush : Page
{
</span><span>public</span><span> Brush()
{
</span><span>this</span><span>.InitializeComponent();
}
</span><span>private</span><span>void</span> webView_LoadCompleted_1(<span>object</span><span> sender, NavigationEventArgs e)
{
</span><span>//</span><span> WebView 加载完毕后重绘 WebViewBrush</span><span> webViewBrush.Redraw();
}
}
}</span>
OK
[源码下载]
原文：http://www.cnblogs.com/lonelyxmas/p/3588073.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！