深入探索Silverlight中的画笔、变换与位图

### 深入探索Silverlight中的画笔、变换与位图 #### 1. 画笔类概述 在Silverlight中，有多种画笔类可用于填充区域，以下是常见画笔类的介绍： | 名称 | 描述 | | ---- | ---- | | SolidColorBrush | 使用单一纯色填充区域。 | | LinearGradientBrush | 使用渐变填充区域，颜色从一种逐渐过渡到另一种（可依次过渡到多种颜色）。 | | RadialGradientBrush | 使用径向渐变填充区域，类似于线性渐变，但从中心点呈圆形辐射。 | | ImageBrush | 使用图像填充区域，图像可拉伸、缩放或平铺。 | | VideoBrush | 使用MediaElement（内容来自视频文件）填充区域，可在任何形状或元素中播放视频。 | | WebBrowserBrush | 使用WebBrowser控件的HTML内容填充区域，此功能仅在浏览器外应用程序中可用。 | 本文将重点介绍LinearGradientBrush、RadialGradientBrush和ImageBrush的使用。 #### 2. LinearGradientBrush类 LinearGradientBrush允许创建从一种颜色过渡到另一种颜色的混合填充效果。以下是一个简单的示例，它将一个矩形从左上角的蓝色对角线渐变到右下角的白色： ```xml <Rectangle Width="150" Height="100"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0"/> <GradientStop Color="White" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> ``` 要创建渐变，需要为每种颜色添加一个GradientStop，并使用0到1之间的Offset值来确定颜色在渐变中的位置。例如，蓝色的GradientStop偏移量为0，表示它位于渐变的起始位置；白色的GradientStop偏移量为1，表示它位于渐变的结束位置。如果更改这些值，可以调整渐变从一种颜色过渡到另一种颜色的速度。 此外，还可以使用LinearGradientBrush的StartPoint和EndPoint属性来控制渐变的方向。这两个属性的坐标不是实际坐标，而是将填充区域的左上角视为(0, 0)，右下角视为(1, 1)。例如，要创建从上到下的水平填充，可以使用起点(0, 0)和终点(0, 1)；要创建从左到右的垂直填充，可以使用起点(0, 0)和终点(1, 0)。 还可以通过设置LinearGradientBrush.SpreadMethod属性来改变渐变的行为，默认值为Pad（渐变外的区域用相应颜色纯色填充），还可以使用Reflect（反转渐变）或Repeat（重复颜色渐变）。 LinearGradientBrush还可以通过添加多个GradientStop对象来创建包含多种颜色的渐变，例如： ```xml <Rectangle Width="150" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> ``` 需要注意的是，画笔不仅限于绘制形状，在需要使用SolidColorBrush的地方都可以替换为LinearGradientBrush，如设置元素的背景、文本的前景色或边框的填充色。 #### 3. RadialGradientBrush类 RadialGradientBrush的工作方式与LinearGradientBrush类似，也接受一系列不同偏移量的颜色。不同之处在于渐变的放置方式。 使用GradientOrigin属性来确定渐变中第一种颜色的起始点，默认值为(0.5, 0.5)，表示填充区域的中心。与LinearGradientBrush一样，RadialGradientBrush也使用比例坐标系，将填充区域的左上角视为(0, 0)，右下角视为(1, 1)。 渐变从起始点呈圆形辐射，最终到达内部渐变圆的边缘结束。可以使用Center、RadiusX和RadiusY三个属性来设置内部渐变圆的边缘。默认情况下，Center属性为(0.5, 0.5)，RadiusX和RadiusY都为0.5。这些值是相对于填充区域的对角线长度而言的。 RadialGradientBrush特别适合填充圆形形状和创建光照效果。例如，通过稍微偏移GradientOrigin点可以为形状创建深度错觉： ```xml <Ellipse Margin="5" Stroke="Black" StrokeThickness="1" Width="200" Height="200"> <Ellipse.Fill> <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Blue" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> ``` #### 4. ImageBrush类 ImageBrush允许使用Silverlight支持的任何文件类型（如BMP、PNG和JPEG）的位图图像填充区域。通过设置ImageSource属性来指定要使用的图像，例如： ```xml <Grid> <Grid.Background> <ImageBrush ImageSource="lo ```