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

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

    xmlns ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

         < Ellipse  @H_403_59@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  @H_403_59@margin ="10"  Width ="200"  Height ="100"  stroke ="Yellow"  strokeThickness ="3" >

             < Ellipse.Fill >

                 < SolidColorBrush  Color ="#88FF0000"   />

             </ Ellipse.Fill >

         </ Ellipse >

     </ StackPanel >

</ UserControl >

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

    xmlns ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_400_11845@as.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 >

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

    xmlns ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

    

         < @H_143_57@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（默认值）, Bottom

                 -->

                 < VideoBrush  sourcename ="mediaElement"   />

             </ Rectangle.Fill >

         </ Rectangle >

       

     </ StackPanel >

</ UserControl >

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

    xmlns ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

         < Grid  @H_403_59@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  @H_403_59@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  @H_403_59@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  @H_403_59@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  @H_403_59@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 >

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

    xmlns ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_400_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

         < Grid  @H_403_59@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  @H_403_59@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  @H_403_59@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  @H_403_59@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 >