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

2016-08-20 11:00:30来源:http://webabcd.blog.51cto.com/1787395/342839作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush
作者:webabcd介绍Silverlight 2.0 画笔: SolidColorBrush - 单色画笔 ImageBrush - 图像画笔 VideoBrush - 视频画笔 LinearGradientBrush - 线性渐变画笔 RadialGradientBrush - 放射性渐变画笔在线DEMOhttp://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 - scRGBColorInterpolationMode.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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台