对于不是常规形状的路径而言，在不同的区域涂色同常规的图形涂色是一个道理：即使用LinearGradientBrush涂色。
在本篇文章中，会介绍
1、LinearGradientBrush中的StartPoint以及EndPoint。
2、LinearGradientBrush前台涂色以及后台涂色。
一、StartPoint、EndPoint以及颜色区别
1、在LinearGradientBrush中，StartPoint以及EndPoint的值分别指的是坐标值。在复杂路径所在的矩形区域中，可是将其分割为X和Y轴。如图
StartPoint指的是绘制颜色的起始点。例如，StartPoint="0,0"就指的是左上角的那个点，StartPoint="0.5,0"指的就是矩形上头那条边的中点。EndPoint也是同样的道理。在绘制颜色的过程中，通过设定你的起始和结束值可以决定你涂色的方向。
2、确定颜色是渐变还是同色
在LinearGradientBrush类中StartPoint以及EndPoint的值决定了起始位置和终点位置
GradientStop 是渐变画笔的基本构造块：
-
渐变停止点的 Color 属性指定渐变停止点的颜色。 可以使用预定义的颜色来设置颜色，也可以通过指定 ScRGB 或十六进制 ARGB 值来设置颜色。
-
渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。 偏移量是一个范围从 0 至 1 的 Double 值。 渐变停止点的偏移量值越接近 0，颜色越接近渐变起点。 渐变偏移量值越接近 1，颜色越接近渐变终点。
渐变停止点之间每个点的颜色按两个边界渐变停止点指定的颜色组合执行线性内插。 下图突出显示了上一示例中的渐变停止点。 圆圈标记渐变停止点的位置，虚线显示渐变轴。
（1）渐变颜色
即只指定offset的起始位置而不设定终点位置。例如（前台代码，后台在后面介绍）
渐变色
<Path.Fill> <LinearGradientBrush x:Name="MyLine" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="Yellow"/> <GradientStop Offset="0.3" Color="Yellow"/> <!--<GradientStop Offset="0.3" Color="Red"/>--> <GradientStop Offset="0.7" Color="Red"/> <!--<GradientStop Offset="0.7" Color="Black"/>--> <GradientStop Offset="1.0" Color="Black"/> </LinearGradientBrush> </Path.Fill>
效果图如下（在一个人形路径中按照比例涂色）
（2）纯色
即在一个区域就是指定的颜色，不会呈现渐变色
纯色
<Path.Fill> <LinearGradientBrush x:Name="MyLine" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="Yellow"/> <GradientStop Offset="0.3" Color="Yellow"/> <GradientStop Offset="0.3" Color="Red"/> <GradientStop Offset="0.7" Color="Red"/> <GradientStop Offset="0.7" Color="Black"/> <GradientStop Offset="1.0" Color="Black"/> </LinearGradientBrush> </Path.Fill>
效果图如下：
二、控制路径不同区域涂色的前、后台写法
在前面的例子中已经写了前台如何控制路径的涂色。即在Path的子节点中，即Path.Fill节点中控制LinearGradientBrush，再在其子节点GradientStop中控制所占区域大小、起始值以及颜色。
在后台写也是同样的道理。实例化GradientStop，控制了不同的属性后将其添加到声明的LinearGradientBrush的对象中，然后将LinearGradientBrush对象添加到相应的路径中。
我在下面的例子例子中实现的是纯色涂色，没有使用渐变色。
例子1：
前台代码:
<Path.Fill> <LinearGradientBrush x:Name="MyLine" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="Yellow"/> <GradientStop Offset="0.3" Color="Yellow"/> <GradientStop Offset="0.3" Color="Red"/> <GradientStop Offset="0.7" Color="Red"/> <GradientStop Offset="0.7" Color="Black"/> <GradientStop Offset="1.0" Color="Black"/> </LinearGradientBrush> </Path.Fill>
后台代码：
后台代码
GradientStop gs = new GradientStop(); gs.Offset = 0.0; gs.Color = Colors.Red; GradientStop gs1 = new GradientStop(); gs1.Offset = 0.3; gs1.Color = Colors.Red; GradientStop gs2 = new GradientStop(); gs2.Offset = 0.3; gs2.Color = Colors.Yellow; GradientStop gs3 = new GradientStop(); gs3.Offset = 0.7; gs3.Color = Colors.Yellow; LinearGradientBrush lgb = new LinearGradientBrush(); //MyLine指的是我在前台定义的LinearGradientBrush的Name lgb = (LinearGradientBrush)this.LayoutRoot.FindName("MyLine"); lgb.GradientStops.Add(gs); lgb.GradientStops.Add(gs1); lgb.GradientStops.Add(gs2); lgb.GradientStops.Add(gs3);
再写一个很简单的例子，就是输入参数，在人形控件中用不同的颜色显示其比例（类似饼图，颜色是同一种颜色的渐变色）
在这个例子中，我在旁边实现了图例，其就是自定的一个用户控件而已，其没有后台代码，前台的设计如下：
图利前台代码
<Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" x:Name="MyRec" Width="30" Height="30" Margin="0"/> <TextBlock Grid.Column="1" x:Name="MyTxt" Width="95" Height="30" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/> </Grid>
人形控件的代码前台代码如下：
人形控件前台代码
<Grid x:Name="LayoutRoot" Background="White" Width="230" Height="147"> <Grid.ColumnDefinitions> <ColumnDefinition Width="58"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Path Stroke="Black" Data="M14.102991,8.1419792 L4.7439861,8.0929832 C1.2799983,8.1899834 3.9790393E-13,10.980985 3.9790393E-13,11.954984 L3.9790393E-13,12.088986 L3.9790393E-13,12.678983 L3.9790393E-13,25.749983 C3.9790393E-13,26.605986 0.69299287,27.292982 1.5440058,27.292982 C2.3980093,27.292982 3.087981,26.605986 3.087981,25.749983 L3.087981,14.439984 L4.4029827,14.439984 L4.4029827,25.279982 C4.4029827,25.425985 4.419981,25.566984 4.4439983,25.709982 L4.4439983,45.07299 C4.4439983,46.312981 5.4029822,47.321983 6.5920076,47.321983 C7.7799954,47.321983 8.7420006,46.312981 8.7420006,45.07299 L8.7420006,27.991987 L9.807003,27.991987 L9.807003,45.07299 C9.807003,46.312981 10.770991,47.321983 11.95898,47.321983 C13.143976,47.321983 14.102991,46.312981 14.102991,45.07299 L14.102991,25.279982 L14.102991,25.156988 L14.102991,14.439984 L15.273004,14.439984 L15.273004,25.749983 C15.273004,26.605986 16.014977,27.292982 16.92498,27.292982 C17.838982,27.292982 18.583,26.605986 18.583,25.749983 L18.583,12.678983 L18.583,12.088986 L18.583,11.774983 C18.583,10.590984 17.030998,8.1419792 14.102991,8.1419792 M9.2929811,7.4230003 C11.33897,7.4230003 13.003978,5.7619963 13.003978,3.7110004 C13.003978,1.6599967 11.33897,0 9.2929811,0 C7.2429643,0 5.5809779,1.6599967 5.5809779,3.7110004 C5.5809779,5.7619963 7.2429643,7.4230003 9.2929811,7.4230003" Canvas.Left="0" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="145" Grid.ColumnSpan="2" Grid.Column="0" > <Path.Fill> <LinearGradientBrush x:Name="MyLGB" StartPoint="0.5,0" EndPoint="0.5,1"/> </Path.Fill> </Path> <Grid Grid.Column="1" x:Name="MyGrid" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> </Grid> </Grid>
在后台中，通过从使用该人形控件的页面传入两个数组参数，一个为在人形控件中所占比例的double数组，一个为其名称，后台代码去下：
人形控件的后台代码
1 public partial class MenControl : UserControl 2 { 3 //定义颜色数组（最大的显示个数为10个 ） 4 Color[] MyColor = { Color.FromArgb(255, 1, 53, 84), Color.FromArgb(255, 2, 74, 117), Color.FromArgb(255,3, 95, 150), Color.FromArgb(255, 3, 116, 184), Color.FromArgb(255, 4, 137, 217), Color.FromArgb(255, 4, 158, 251), Color.FromArgb(255, 38, 171, 251), Color.FromArgb(255, 71, 184, 252), Color.FromArgb(255, 121, 204, 253), Color.FromArgb(255, 172, 223, 253) }; 5 GradientStop gsStart; 6 GradientStop gsEnd; 7 LinearGradientBrush lgb; 8 TuLi MyTuLi; 9 public MenControl(string[] MyString,double[] MyDouble) 10 { 11 InitializeComponent(); 12 int count = MyString.Count(); 13 for (int i = 0; i < count; i++) 14 { 15 gsStart = new GradientStop(); 16 gsEnd = new GradientStop(); 17 lgb = new LinearGradientBrush(); 18 lgb = (LinearGradientBrush)this.LayoutRoot.FindName("MyLGB"); 19 MyTuLi = new TuLi(); 20 if (i==0) 21 { 22 gsStart.Offset = 0.0; 23 gsStart.Color=MyColor[i]; 24 gsEnd.Offset=MyDouble[i]; 25 gsEnd.Color=MyColor[i]; 26 } 27 else if (i>=1) 28 { 29 double num = 0; 30 double num1 = 0; 31 for (int j = 0; j <= i; j++) 32 { 33 if (j <= i - 1) 34 { 35 num += MyDouble[j]; 36 } 37 num1 += MyDouble[j]; 38 } 39 gsStart.Offset = num; 40 gsStart.Color = MyColor[i]; 41 gsEnd.Offset = num1; 42 gsEnd.Color = MyColor[i]; 43 } 44 lgb.GradientStops.Add(gsStart); 45 lgb.GradientStops.Add(gsEnd); 46 MyTuLi.SetValue(MarginProperty, new Thickness(0, 0, 0, 2)); 47 MyTuLi.MyRec.Fill = new SolidColorBrush(MyColor[i]); 48 MyTuLi.MyTxt.Text=MyString[i]; 49 //确定图利的位置 50 MyGrid.Children.Add(MyTuLi); 51 Grid.SetRow(MyTuLi, i); 52 } 53 } 54 }
调用的页面的后台代码如下：
调用后台代码
string[] MyString1 = { "动感地带", "全球通", "神州行"}; double[] MyDouble1 = { 0.4, 0.3, 0.3 }; public MainPage() { InitializeComponent(); Controls.MenControl men = new Controls.MenControl(MyString1,MyDouble1); Grid.Children.Add(men); Grid.SetColumn(men, 0); }
效果图如下：（很简陋，大家见谅）
