Silverlight RadialGradientBrush实现颜色填充

如果我们在实际开发过程中想要实现一个颜色的填充的话，可以使用多种方法来实现。在这篇文章中我们将会为大家介绍其中一种Silverlight RadialGradientBrush实现方法，希望大家可以掌握这一技巧。#t#

Silverlight RadialGradientBrush使用放射性渐变来进行颜色填充，用GradientOrigin来指定放射源的位置坐标，Center指定图形的中心位置坐标，RadiusX和RadiusY分别指定在X轴和Y轴上的放射半径，同样使用GradientStop指定不同颜色的渐变及偏移量，如下面的例子：

1. < Canvas Background="#CDFCAE"> 
2. < Ellipse Canvas.Top="30"
    Canvas.Left="100" 
3. Width="300" Height="180"> 
4. < Ellipse.Fill> 
5. < RadialGradientBrush GradientOrigin=
   "0.5,0.5" Center="0.5,0.5" 
6. RadiusX="0.5" RadiusY="0.5"> 
7. < GradientStop Color="#FBFE03" 
   Offset="0.0" /> 
8. < GradientStop Color="#41F702" 
   Offset="0.25" /> 
9. < GradientStop Color="#FF0000" 
   Offset="0.75" /> 
10. < GradientStop Color="#0066FF" 
    Offset="1.0" /> 
11. < /RadialGradientBrush> 
12. < /Ellipse.Fill> 
13. < /Ellipse> 
14. < /Canvas> 

在这个Silverlight RadialGradientBrush示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在X轴和Y轴上的放射半径它们四个之间的关系，大家看下面四个圆形，我们为四个属性设置不同的值：

< Canvas Background="#CDFCAE"> 
< Ellipse Canvas.Top="20" Canvas.Left="80" 
Width="120" Height="120"> 
< Ellipse.Fill> 
< RadialGradientBrush GradientOrigin="
0.5,0.5" Center="0.5,0.5" 
RadiusX="0.5" RadiusY="0.5"> 
< GradientStop Color="#FFFFFF" 
Offset="0.0" /> 
< GradientStop Color="#000000" 
Offset="1.0" /> 
< /RadialGradientBrush> 
< /Ellipse.Fill> 
< /Ellipse> 
< Ellipse Canvas.Top="20" 
Canvas.Left="280" 
Width="120" Height="120"> 
< Ellipse.Fill> 
< RadialGradientBrush GradientOrigin=
"0.75,0.25" Center="0.5,0.5" 
RadiusX="0.5" RadiusY="0.5"> 
< GradientStop Color="#FFFFFF" Offset="0.0" /> 
< GradientStop Color="#000000" Offset="1.0" /> 
< /RadialGradientBrush> 
< /Ellipse.Fill> 
< /Ellipse> 
< Ellipse Canvas.Top="160" Canvas.Left="80" 
Width="120" Height="120"> 
< Ellipse.Fill> 
< RadialGradientBrush GradientOrigin=
"0.5,0.5" Center="0.5,0.5" 
RadiusX="0.25" RadiusY="0.5"> 
< GradientStop Color="#FFFFFF" Offset="0.0" /> 
< GradientStop Color="#000000" Offset="1.0" /> 
< /RadialGradientBrush> 
< /Ellipse.Fill> 
< /Ellipse> 
< Ellipse Canvas.Top="160" Canvas.Left="280" 
Width="120" Height="120"> 
< Ellipse.Fill> 
< RadialGradientBrush GradientOrigin
="0.5,0.5" Center="0.5,0.5" 
RadiusX="0.5" RadiusY="0.25"> 
< GradientStop Color="#FFFFFF" Offset="0.0" /> 
< GradientStop Color="#000000" Offset="1.0" /> 
< /RadialGradientBrush> 
< /Ellipse.Fill> 
< /Ellipse> 
< /Canvas> 

Silverlight RadialGradientBrush的相关应用方法就为大家介绍到这里啦。