稳扎稳打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 >

                 <!-- SolidColorBrush - 单色画笔 -->
                 <!--
                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 >
            
                 <!-- ImageBrush - 图像画笔 -->
                 <!--
                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 >

                 <!-- VideoBrush - 视频画笔 -->
                 <!--
                SourceName - 相关的 MediaElement 的名称
                Stretch属性 - 拉伸值 [System.Windows.Media.Stretch 枚举]。参见：本Demo的Shape/Shape.xaml
                AlignmentX - 水平方向的对齐方式。Center（默认值）, Left, Right
                AlignmentY - 垂直方向的对齐方式。Center（默认值）, Top, 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 >

                     <!-- LinearGradientBrush - 线性渐变画笔 -->
                     <!--
                    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"  EndPoint ="0.6,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"  EndPoint ="0.6,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 >

                     <!-- LinearGradientBrush - 放射性渐变画笔 -->
                     <!--
                    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
[源码下载]