Silverlight RadialGradientBrush实现颜色填充

开发 开发工具
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轴上的放射半径它们四个之间的关系,大家看下面四个圆形,我们为四个属性设置不同的值:

 

  1. < Canvas Background="#CDFCAE"> 
  2. < Ellipse Canvas.Top="20" Canvas.Left="80" 
  3. Width="120" Height="120"> 
  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="#FFFFFF" 
    Offset="0.0" /> 
  8. < GradientStop Color="#000000" 
    Offset="1.0" /> 
  9. < /RadialGradientBrush> 
  10. < /Ellipse.Fill> 
  11. < /Ellipse> 
  12. < Ellipse Canvas.Top="20" 
    Canvas.Left="280" 
  13. Width="120" Height="120"> 
  14. < Ellipse.Fill> 
  15. < RadialGradientBrush GradientOrigin=
    "0.75,0.25" Center="0.5,0.5" 
  16. RadiusX="0.5" RadiusY="0.5"> 
  17. < GradientStop Color="#FFFFFF" Offset="0.0" /> 
  18. < GradientStop Color="#000000" Offset="1.0" /> 
  19. < /RadialGradientBrush> 
  20. < /Ellipse.Fill> 
  21. < /Ellipse> 
  22. < Ellipse Canvas.Top="160" Canvas.Left="80" 
  23. Width="120" Height="120"> 
  24. < Ellipse.Fill> 
  25. < RadialGradientBrush GradientOrigin=
    "0.5,0.5" Center="0.5,0.5" 
  26. RadiusX="0.25" RadiusY="0.5"> 
  27. < GradientStop Color="#FFFFFF" Offset="0.0" /> 
  28. < GradientStop Color="#000000" Offset="1.0" /> 
  29. < /RadialGradientBrush> 
  30. < /Ellipse.Fill> 
  31. < /Ellipse> 
  32. < Ellipse Canvas.Top="160" Canvas.Left="280" 
  33. Width="120" Height="120"> 
  34. < Ellipse.Fill> 
  35. < RadialGradientBrush GradientOrigin
    ="0.5,0.5" Center="0.5,0.5" 
  36. RadiusX="0.5" RadiusY="0.25"> 
  37. < GradientStop Color="#FFFFFF" Offset="0.0" /> 
  38. < GradientStop Color="#000000" Offset="1.0" /> 
  39. < /RadialGradientBrush> 
  40. < /Ellipse.Fill> 
  41. < /Ellipse> 
  42. < /Canvas> 

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

责任编辑:曹凯 来源: 博客园
相关推荐

2009-12-31 09:13:14

Silverlight

2009-12-31 11:23:23

Silverlight

2009-12-30 15:42:08

Silverlight

2009-12-29 17:34:52

Silverlight

2009-12-29 18:02:26

SilverLight

2010-01-04 17:29:00

Silverlight

2009-12-29 17:47:36

Silverlight

2009-12-30 13:51:43

Silverlight

2009-12-30 16:43:47

Silverlight

2009-12-30 15:26:02

Silverlight

2009-12-30 16:10:10

Silverlight

2010-01-04 13:09:51

Silverlight

2009-12-29 18:09:00

Silverlight

2009-12-30 17:19:09

Silverlight

2009-12-29 18:34:21

Silverlight

2010-01-04 14:14:43

Silverlight

2009-09-27 13:38:03

Silverlight

2009-09-28 10:35:45

Silverlight

2010-01-04 19:14:46

Silverlight

2009-11-06 13:40:30

Silverlight
点赞
收藏

51CTO技术栈公众号