随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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
[源码下载]