Silverlight RadialGradientBrush實現(xiàn)顏色填充

作者：佚名 2009-12-30 18:28:56

Silverlight RadialGradientBrush的應(yīng)用可以幫助我們實現(xiàn)一種以放射性的方式來進行顏色填充的效果。這里將會為大家詳細介紹。

如果我們在實際開發(fā)過程中想要實現(xiàn)一個顏色的填充的話，可以使用多種方法來實現(xiàn)。在這篇文章中我們將會為大家介紹其中一種Silverlight RadialGradientBrush實現(xiàn)方法，希望大家可以掌握這一技巧。#t#

Silverlight RadialGradientBrush使用放射性漸變來進行顏色填充，用GradientOrigin來指定放射源的位置坐標(biāo)，Center指定圖形的中心位置坐標(biāo)，RadiusX和RadiusY分別指定在X軸和Y軸上的放射半徑，同樣使用GradientStop指定不同顏色的漸變及偏移量，如下面的例子：

< Canvas Background="#CDFCAE">
< Ellipse Canvas.Top="30"
Canvas.Left="100"
Width="300" Height="180">
< Ellipse.Fill>
< RadialGradientBrush GradientOrigin=
"0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
< GradientStop Color="#FBFE03"
Offset="0.0" />
< GradientStop Color="#41F702"
Offset="0.25" />
< GradientStop Color="#FF0000"
Offset="0.75" />
< GradientStop Color="#0066FF"
Offset="1.0" />
< /RadialGradientBrush>
< /Ellipse.Fill>
< /Ellipse>
< /Canvas>

在這個Silverlight RadialGradientBrush示例中，對于上面提到的放射源位置的坐標(biāo)和圖形中心坐標(biāo)、在X軸和Y軸上的放射半徑它們四個之間的關(guān)系，大家看下面四個圓形，我們?yōu)樗膫€屬性設(shè)置不同的值：

< 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的相關(guān)應(yīng)用方法就為大家介紹到這里啦。

責(zé)任編輯：曹凱來源：博客園

Silverlight RadialGr