Silverlight绘图：画笔、变换与位图的应用

### Silverlight 绘图：画笔、变换与位图的应用 #### 1. 径向渐变画笔（RadialGradientBrush） 径向渐变画笔（RadialGradientBrush）与线性渐变画笔（LinearGradientBrush）类似，都可以使用一系列不同偏移量的颜色。不同之处在于渐变的放置方式。 - **渐变起始点**：通过 `GradientOrigin` 属性确定渐变中第一种颜色的起始点，默认值为 (0.5, 0.5)，表示填充区域的中心。它使用比例坐标系，填充区域的左上角为 (0, 0)，右下角为 (1, 1)，你可以选择这个范围内的任意坐标作为起始点，甚至可以超出这个范围。 - **渐变结束圆**：使用 `Center`、`RadiusX` 和 `RadiusY` 三个属性设置内部渐变圆的边缘。默认情况下，`Center` 为 (0.5, 0.5)，`RadiusX` 和 `RadiusY` 都为 0.5。这些值是相对于填充区域的对角线长度而言的，半径为 0.5 表示圆的半径是对角线长度的一半。对于正方形填充区域，这个半径大约是区域宽度（或高度）的 0.7 倍。 以下是一个使用径向渐变画笔填充椭圆的示例： ```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> ``` 径向渐变画笔特别适合填充圆形和创建光照效果。常见的技巧是稍微偏移 `GradientOrigin` 点，以营造出形状的深度感。 #### 2. 图像画笔（ImageBrush） 图像画笔（ImageBrush）允许你使用 Silverlight 支持的任何位图图像文件类型（BMP、PNG 和 JPEG）填充区域。通过设置 `ImageSource` 属性指定要使用的图像。 以下是一个使用图像画笔为网格背景填充图像的示例： ```xml <Grid> <Grid.Background> <ImageBrush ImageSource="logo.jpg"></ImageBrush> </Grid.Background> </Grid> ``` `ImageSource` 属性的工作方式与 `Image` 元素的 `Source` 属性相同，你可以使用指向项目中嵌入式文件或网络位置的 URI 来设置它。 当图像画笔用于绘制单元格背景时，图像会被拉伸以适应填充区域。如果网格比图像的原始尺寸大，可能会出现图像缩放的伪影；如果网格的形状与图像的宽高比不匹配，图像会被扭曲以适应。你可以通过修改 `ImageBrush.Stretch` 属性来控制这种行为，该属性可以设置为以下值： | 名称 | 描述 | | ---- | ---- | | Fill | 图像在宽度和高度上被拉伸以完全适应其容器，这是默认值。 | | None | 图像不被拉伸，使用其原始尺寸（任何不适合的部分将被裁剪）。 | | Uniform | 宽度和高度按比例增加，直到图像到达容器的边缘。图像的宽高比得以保留，但可能会有额外的空白空间。 | | UniformToFill | 宽度和高度按比例增加，直到形状填满所有可用的高度和宽度。图像的宽高比得以保留，但图像可能会被裁剪以适应区域。 | #### 3. 透明度 Silverlight 支持真正的透明度，这意味着你可以将多个元素层叠在一起，并为它们设置不同程度的透明度。有以下几种方法可以使元素部分透明： - **设置元素的 `Opacity` 属性**：`Opacity` 是一个从 0 到 1 的分数值，1 表示完全不透明（默认值），0 表示完全透明。该属性定义在 `UIElement` 类中，适用于所有元素。 - **设置画笔的 `Opacity` 属性**：各种画笔类都包含 `Opacity` 属性，允许你使它们的填充部分透明。 - **使用半透明颜色**：任何 alpha 值小于 255 的颜色都是半透明的。你可以在设置元素的前景色、背景色或边框时使用半透明颜色。 - **设置 `OpacityMask` 属性**：该属性允许你使元素的特定区域透明或部分透明，例如使形状逐渐淡入透明。 以下是一个使用透明度的示例： ```xml <Grid Margin="5" Opacity="0.7"> <Grid.Background> <ImageBrush ImageSource="celestial.jpg" /> </Grid.Background> <Button Foreground="Green" Background="#60AA4030" FontSize="16" Margin="10" Padding="20" Content="A Semi-Transparent Button"></Button> <TextBlock Grid.Row="1" Margin="10" TextWrapping="Wrap" Foreground="White" Opacity="0.3" FontSize="38" FontFamily="Arial Black" Text="SEMI-TRANSPARENT TEXT"></TextBloc ```