Silverlight Brush画刷

Silverlight中，共有如下几种画刷

SolidColorBrush:单色画刷
LinearGradientBrush:线性渐变画刷
RadialGradientBrush:放射渐变画刷
ImageBrush：图像画刷
VideoBrush:影像画刷

1.solidColorBrush:单色画刷

<Rectangle x:Name="solidcolor1" Width="100" Height="100" Fill="Red" />  <Rectangle x:Name="solidcolor2" Canvas.Left="100" Canvas.Top="150" Width="100" Height="100" Fill="#22FF0000" />  <Rectangle x:Name="solidcolor3" Canvas.Left="200" Canvas.Top="250" Width="100" Height="100"> <Rectangle.Fill> <SolidColorB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> Color="#99FF0000" </Rectangle.Fill> </Rectangle>

2.LinearGradientBrush:线性渐变画刷

LinerGradientBrush线性渐变画刷将顺着渐变轴来渐变填充一个区域。为了使用线性渐变，需要指定渐变的颜色和渐变的方向，也就是渐变轴，通过修改渐变轴，可以创建水平或者垂直的渐变。在渐变画刷中，GradientStop是每个渐变画刷的最基本的构建块，通常需要指定Color属性和Offset属性。

Offset属性：表示沿着渐变轴的偏移量，这是一个Double类型的值。值的范围是0-1之间，0表示渐变周起始位置，1表示渐变轴结束部分的值，这个值通常是像对于要填充区域的比例值。

<Rectangle Width="200" Height="100"> <Rectangle.Fill>  <LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> StartPoint="0,0" EndPoint="1,0">  <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>

3.RadialGradientBrush:放射渐变画刷

<Rectangle Width="200" Height="100"> <Rectangle.Fill> <RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1" /> </RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>

<Rectangle Width="100" Height="100"> <Rectangle.Fill> <RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>  <TextBlock Canvas.Left="0" Canvas.Top="110" > GradientOrigin:0.5,0.5 <LineBreak></LineBreak> <Run Text="Center:0.5,0.5" Foreground="Red"></Run> <LineBreak></LineBreak> <Run Text="RadiusX:0.5" Foreground="Red"/> <LineBreak /> <Run Text="RadiusY:0.5" Foreground="Red"/> </TextBlock>  <Rectangle Width="100" Height="100" Canvas.Left="180" Canvas.Top="0"> <Rectangle.Fill> <RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>  <TextBlock Canvas.Left="180" Canvas.Top="110" > GradientOrigin:0.75,0.25 <LineBreak></LineBreak> <Run Text="Center:0.5,0.5" Foreground="Red"></Run> <LineBreak></LineBreak> <Run Text="RadiusX:0.5" Foreground="Red"/> <LineBreak /> <Run Text="RadiusY:0.5" Foreground="Red"/> </TextBlock>  <Rectangle Width="100" Height="100" Canvas.Left="0" Canvas.Top="220"> <Rectangle.Fill> <RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> GradientOrigin="0.5,0.5" RadiusX="0.25" RadiusY="0.5"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>  <TextBlock Canvas.Left="0" Canvas.Top="320" > GradientOrigin:0.5,0.5 <LineBreak></LineBreak> <Run Text="Center:0.5,0.5" Foreground="Red"></Run> <LineBreak></LineBreak> <Run Text="RadiusX:0.25" Foreground="Red"/> <LineBreak /> <Run Text="RadiusY:0.5" Foreground="Red"/> </TextBlock>  <Rectangle Width="100" Height="100" Canvas.Left="180" Canvas.Top="220"> <Rectangle.Fill> <RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.25"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> </Rectangle>  <TextBlock Canvas.Left="180" Canvas.Top="320" > GradientOrigin:0.5,0.5" Foreground="Red"></Run> <LineBreak></LineBreak> <Run Text="RadiusX:0.5" Foreground="Red"/> <LineBreak /> <Run Text="RadiusY:0.25" Foreground="Red"/> </TextBlock>

线性渐变画刷的渐变轴是沿着一条直线进行渐变，而放射渐变画刷则是沿着一个圆形进行渐变，形成一种放射状的效果。

4.ImageBrush：图像画刷

<Canvas.Background> <ImageB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> ImageSource="desktop.jpg" Stretch="UniformToFill"></ImageB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Canvas.Background>

5.VideoBrush

<MediaElement x:Name="KeyboardDemo" Source="Keyboard.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False"/>  <TextBlock Canvas.Left="5" Canvas.Top="30" FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground>  <VideoB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> SourceName ="KeyboardDemo" Stretch="UniformToFill"></VideoB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </TextBlock.Foreground> </TextBlock>

Silverlight Brush画刷

相关推荐