稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush

稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush,ImageBrush,VideoBrush,LinearGradientBrush,RadialGradientBrush

作者： webabcd

介绍
Silverlight 2.0 画笔：
    SolidColorBrush - 单色画笔
    ImageBrush - 图像画笔
    VideoBrush - 视频画笔
    LinearGradientBrush - 线性渐变画笔
    RadialGradientBrush - 放射性渐变画笔

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例
1、SolidColorBrush.xaml

< UserControl x:Class ="Silverlight20.Brush .solidColorBrush"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

< Ellipse Margin ="10" Width ="200" Height ="100" stroke ="Yellow" strokeThickness ="3" >

< Ellipse.Fill >

<!--

Color - 颜色

格式如下：

预定义的Color的名称。如：Red, Green, Blue

#RGB。如：#F00

#ARGB（A为Alpha值）。如：#FF00, #F0F0, #F00F

#RGB。如：#FF0000, #00FF00, #0000FF

#ARGB（A为Alpha值）。如：#FFFF0000, #FF00FF00, #FF0000FF

Opacity - 不透明度。0 - 1之间

-->

< SolidColorBrush Color ="#FF0000" Opacity ="0.5" />

</ Ellipse.Fill >

</ Ellipse >

< Ellipse Margin ="10" Width ="200" Height ="100" stroke ="Yellow" strokeThickness ="3" >

< Ellipse.Fill >

< SolidColorBrush Color ="#88FF0000" />

</ Ellipse.Fill >

</ Ellipse >

</ StackPanel >

</ UserControl >

2、ImageBrush.xaml

< UserControl x:Class ="Silverlight20.Brush.ImageBrush"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

< Rectangle Width ="100" Height ="100" stroke ="Red" strokeThickness ="1" >

< Rectangle.Fill >

<!--

ImageSource - 图片地址

Stretch属性 - 拉伸值 [System.Windows.Media.Stretch 枚举]。参见：本Demo的Shape/Shape.xaml

AlignmentX - 水平方向的对齐方式。Center（默认值）, Left, Right

AlignmentY - 垂直方向的对齐方式。Center（默认值）, Top, Bottom

-->

< ImageBrush ImageSource ="/Silverlight20;component/Images/logo.jpg" AlignmentX ="Right" AlignmentY ="Bottom" Stretch ="None" />

</ Rectangle.Fill >

</ Rectangle >

</ StackPanel >

</ UserControl >

3、VideoBrush.xaml

< UserControl x:Class ="Silverlight20.Brush.VideoBrush"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

< MediaElement x:Name ="mediaElement" Source ="/Silverlight20;component/Video/Demo.wmv" Width ="0" Height ="0" />

< Rectangle Width ="300" Height ="100" >

< Rectangle.Fill >

<!--

SourceName - 相关的 MediaElement 的名称

Stretch属性 - 拉伸值 [System.Windows.Media.Stretch 枚举]。参见：本Demo的Shape/Shape.xaml

AlignmentX - 水平方向的对齐方式。Center（默认值）, Bottom

-->

< VideoBrush SourceName ="mediaElement" />

</ Rectangle.Fill >

</ Rectangle >

</ StackPanel >

</ UserControl >

4、LinearGradientBrush.xaml

< UserControl x:Class ="Silverlight20.Brush.LinearGradientBrush"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" >

< Rectangle.Fill >

<!--

StartPoint - 线性渐变的起点。默认渐变方向为对角线方向，默认值为左上角0,0

EndPoint - 线性渐变的终点。默认渐变方向为对角线方向，默认值为右下角1,1

GradientStop - 渐变中，过渡点的设置

GradientStop.Color - 过渡点的颜色

GradientStop.Offset - 过渡点的位置。相对于渐变线的比值。最小值0.0（默认值），最大值1.0

ColorInterpolationMode - 插入渐变颜色的方式 [System.Windows.Media.ColorInterpolationMode枚举]

ColorInterpolationMode.ScRgbLinearInterpolation - scRGB

ColorInterpolationMode.SRgbLinearInterpolation - sRGB。默认值

-->

< LinearGradientBrush StartPoint ="0,0" EndPoint ="1,1" ColorInterpolationMode ="SRgbLinearInterpolation" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="0.25" />

< GradientStop Color ="Blue" Offset ="0.75" />

< GradientStop Color ="Yellow" Offset ="1.0" />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Line X1 ="0" Y1 ="0" X2 ="200" Y2 ="100" stroke ="Black" HorizontalAlignment ="Left" />

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" >

< Rectangle.Fill >

<!--

MappingMode - 指定线性渐变的起点（StartPoint）和终点（EndPoint）相对于输出区域是相对的还是绝对的 [System.Windows.Media.BrushMappingMode枚举]

MappingMode.RelativetoBoundingBox - 相对坐标。默认值

MappingMode.Absolute - 绝对坐标

-->

< LinearGradientBrush StartPoint ="0,0" EndPoint ="200,100" MappingMode ="Absolute" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="0.25" />

< GradientStop Color ="Blue" Offset ="0.75" />

< GradientStop Color ="Yellow" Offset ="1.0" />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Line X1 ="0" Y1 ="0" X2 ="200" Y2 ="100" stroke ="Black" HorizontalAlignment ="Left" />

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" >

< Rectangle.Fill >

<!--

SpreadMethod - 线性渐变线（黑色线）之外，输出区域之内的渐变方式 [System.Windows.Media.GradientSpreadMethod枚举]

GradientSpreadMethod.Pad - 用线性渐变线末端的颜色值填充剩余空间。默认值

-->

< LinearGradientBrush StartPoint ="0.4,0.5" EndPoint ="0.6,0.5" SpreadMethod ="Pad" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="1.0" />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Line X1 ="80" Y1 ="50" X2 ="120" Y2 ="50" stroke ="Black" HorizontalAlignment ="Left" />

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" >

< Rectangle.Fill >

<!--

SpreadMethod - 线性渐变线（黑色线）之外，输出区域之内的渐变方式 [System.Windows.Media.GradientSpreadMethod枚举]

GradientSpreadMethod.Reflect - 相邻填充区域，以相反方向重复渐变，直至填充满整个剩余空间

-->

< LinearGradientBrush StartPoint ="0.4,0.5" SpreadMethod ="Reflect" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="1.0" />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Line X1 ="80" Y1 ="50" X2 ="120" Y2 ="50" stroke ="Black" HorizontalAlignment ="Left" />

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" >

< Rectangle.Fill >

<!--

SpreadMethod - 线性渐变线（黑色线）之外，输出区域之内的渐变方式 [System.Windows.Media.GradientSpreadMethod枚举]

GradientSpreadMethod.Repeat - 相邻填充区域，以相同方向重复渐变，直至填充满整个剩余空间

-->

< LinearGradientBrush StartPoint ="0.4,0.5" SpreadMethod ="Repeat" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="1.0" />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Line X1 ="80" Y1 ="50" X2 ="120" Y2 ="50" stroke ="Black" HorizontalAlignment ="Left" />

</ Grid >

</ StackPanel >

</ UserControl >

5、RadialGradientBrush.xaml

< UserControl x:Class ="Silverlight20.Brush.RadialGradientBrush"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Rectangle.Fill >

<!--

GradientOrigin - 放射性渐变的放射源的原点坐标。默认值0.5,0.5

Center - 放射性渐变的填充范围（红色圆圈部分）的原点坐标。默认值0.5,0.5

GradientStop - 渐变中，过渡点的设置。参见：Brush/LinearGradientBrush.xaml

ColorInterpolationMode - 插入渐变颜色的方式 [System.Windows.Media.ColorInterpolationMode枚举]。参见：Brush/LinearGradientBrush.xaml

SpreadMethod - 线性渐变线之外，输出区域之内的渐变方式 [System.Windows.Media.GradientSpreadMethod枚举]。。参见：Brush/LinearGradientBrush.xaml

-->

< RadialGradientBrush GradientOrigin ="0.5,0.5" Center ="0.5,0.5" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="0.25" />

< GradientStop Color ="Blue" Offset ="0.75" />

< GradientStop Color ="Yellow" Offset ="1.0" />

</ RadialGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Path stroke ="Red" strokeThickness ="1" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Path.Data >

< EllipseGeometry Center ="100,50" RadiusX ="100" RadiusY ="50" />

</ Path.Data >

</ Path >

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Rectangle.Fill >

<!--

RadiusX - 填充范围的 X 轴半径。默认值0.5

RadiusY - 填充范围的 Y 轴半径。默认值0.5

-->

< RadialGradientBrush GradientOrigin ="0.3,0.3" Center ="0.7,0.7" RadiusX ="0.6" RadiusY ="0.6" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="0.25" />

< GradientStop Color ="Blue" Offset ="0.75" />

< GradientStop Color ="Yellow" Offset ="1.0" />

</ RadialGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Path stroke ="Red" strokeThickness ="1" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Path.Data >

< EllipseGeometry Center ="140,70" RadiusX ="120" RadiusY ="60" />

</ Path.Data >

</ Path >

</ Grid >

< Grid Margin ="10" >

< Rectangle Width ="200" Height ="100" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Rectangle.Fill >

<!--

MappingMode - 指定线性渐变的起点（StartPoint）、终点（EndPoint）填充范围的 X 轴半径（RadiusX）和填充范围的 Y 轴半径（RadiusY）相对于输出区域是相对的还是绝对的 [System.Windows.Media.BrushMappingMode枚举]

MappingMode.RelativetoBoundingBox - 相对坐标。默认值

MappingMode.Absolute - 绝对坐标

-->

< RadialGradientBrush MappingMode ="Absolute" GradientOrigin ="60,30" Center ="140,70" RadiusX ="120" RadiusY ="60" >

< GradientStop Color ="Red" Offset ="0.0" />

< GradientStop Color ="Green" Offset ="0.25" />

< GradientStop Color ="Blue" Offset ="0.75" />

< GradientStop Color ="Yellow" Offset ="1.0" />

</ RadialGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

< Path stroke ="Red" strokeThickness ="1" HorizontalAlignment ="Left" VerticalAlignment ="Top" >

< Path.Data >

< EllipseGeometry Center ="140,70" RadiusX ="120" RadiusY ="60" />

</ Path.Data >

</ Path >

</ Grid >

</ StackPanel >

</ UserControl >

OK
[源码下载]

稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush

相关推荐