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

[索引页]
[源码下载]

[align=center]稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush[/align]

作者：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
[源码下载]