学Silverlight 2系列（27）：使用Brush进行填充

核心提示： 在这个示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在X轴和Y轴上的放射半径它们四个之间的关系，学Silverlight 2系列（27）：使用Brush进行填充(5)，大家看下面四个圆形，我们为四个属性设置不同的值：<Canvas Background="#CDFC

在这个示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在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>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。

ImageBrush

ImageBrush使用图片来对图形进行填充，使用方式比较简单，我们只需要指定ImageSource属性就可以了，如下面的例子使用图片来填充一个矩形：

<Canvas Background="#CDFCAE">
　　<Rectangle Canvas.Top="40" Canvas.Left="100"
　　　 Width="300" Height="160" Stroke="Green"
　　　 StrokeThickness="4" RadiusX="10" RadiusY="10">
　　　　<Rectangle.Fill>
　　　　　　<ImageBrush ImageSource="bg1.png"></ImageBrush>
　　　　</Rectangle.Fill>
　　</Rectangle>
</Canvas>

运行后效果如下所示：

对于图片我们后面会有专门一篇文章进行讲解，这里就不再说明。

结束语

本文简单介绍了Silverlight中的Brushes，这些Brushes对于自定义控件的外观或者做出更酷更炫的界面效果，将会有很大的帮助。