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

[索引页]

[源码下载]

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

作者： webabcd


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


在线DEMO
http://webabcd.blog.51cto.com/1787395/342779

示例
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
[源码下载]

 

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342839 ，如需转载请自行联系原作者