WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush)
前面我们介绍到，Path对象表示一个用直线或者曲线连接的图形，我们可以使用Path.Data属性来设置该图形的形状，同时我们也可以使用Data.Fill属性来设置该图形中的填充色或背景图片等。
下面我们先来看一段代码
<Window x:Class="WPF.SimpleGraph.PathFill.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Canvas>
<Path Stroke="DarkGray" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="40,40" IsClosed="True">
<LineSegment Point="40,130"></LineSegment>
<ArcSegment Point="60,150" Size="20,20" ></ArcSegment>
<LineSegment Point="200,150"></LineSegment>
<ArcSegment Point="220,130" Size="20,20"></ArcSegment>
<LineSegment Point="220,40"></LineSegment>
<ArcSegment Point="200,20" Size="20,20"></ArcSegment>
<LineSegment Point="60,20"></LineSegment>
<ArcSegment Point="40,40" Size="20,20"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0.25"></GradientStop>
<GradientStop Color="LightBlue" Offset="0.5"></GradientStop>
<GradientStop Color="Blue" Offset="0.75"></GradientStop>
<GradientStop Color="DarkBlue" Offset="1"></GradientStop>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Canvas>
<Path Stroke="DarkGray" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="40,40" IsClosed="True">
<LineSegment Point="40,130"></LineSegment>
<ArcSegment Point="60,150" Size="20,20" ></ArcSegment>
<LineSegment Point="200,150"></LineSegment>
<ArcSegment Point="220,130" Size="20,20"></ArcSegment>
<LineSegment Point="220,40"></LineSegment>
<ArcSegment Point="200,20" Size="20,20"></ArcSegment>
<LineSegment Point="60,20"></LineSegment>
<ArcSegment Point="40,40" Size="20,20"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0.25"></GradientStop>
<GradientStop Color="LightBlue" Offset="0.5"></GradientStop>
<GradientStop Color="Blue" Offset="0.75"></GradientStop>
<GradientStop Color="DarkBlue" Offset="1"></GradientStop>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</Window>
它的执行结果是：
下面我们来分析一下该图形的产生原理
首先，我们通过Path.Data来绘制了一个弧形角的矩形
然后，使用Path.Fill来向该矩形中填充渐变色。
LinearGradientBrush类：使用线性渐变绘制区域。
我们可以使用LinearGradientBrush类来绘制一个颜色渐变的区域，它有一个StartPoint属性表示线性渐变的二维起始坐标，而EndPoint指渐变的终止坐标。默认的线性渐变是沿对角方向进行的。
如图所示，它描绘了以对角线方向描绘渐变线
渐变值的取值范围是0-1，它用小数来表示从起点到终点的比率
比如说，我们想要以水平中轴来做渐变线(如下图)
我们可以将调整StartPoint和EndPoint
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
我们可以使用GradientStop来描述渐变的颜色和位置。
GradientStop类：描述渐变中过渡点的位置和颜色。
GradientStop的Color属性表示渐变的颜色，Offset表示渐变从上一个位置开始，到Offset位置结束的渐变
例如下面的代码
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Yellow" Offset="0.5"></GradientStop>
<GradientStop Color="LightBlue" Offset="0.7"></GradientStop>
</LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.5"></GradientStop>
<GradientStop Color="LightBlue" Offset="0.7"></GradientStop>
</LinearGradientBrush>
它表示从0-0.5这个段区域的颜色是Yellow
0.5-0.7这段区域表示从Yellow到LightBlue的渐变
0.7-1这段区域的颜色是LightBlue
