Silverlight RadialGradientBrush實(shí)現(xiàn)顏色填充
如果我們在實(shí)際開發(fā)過程中想要實(shí)現(xiàn)一個顏色的填充的話,可以使用多種方法來實(shí)現(xiàn)。在這篇文章中我們將會為大家介紹其中一種Silverlight RadialGradientBrush實(shí)現(xiàn)方法,希望大家可以掌握這一技巧。#t#
Silverlight RadialGradientBrush使用放射性漸變來進(jìn)行顏色填充,用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)用方法就為大家介紹到這里啦。