导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

快速入门:Windows Phone 的画笔

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

在 Windows Phone 中,要将对象绘制到屏幕,请使用 Brush 对象绘制它们。本快速入门介绍了 Windows Phone 中不同的画笔以及如何使用它们。

本主题包括以下部分。

使用 Brush 对象绘制纯色、渐变或带图像的区域。如果您熟悉在浏览器内运行的 Windows Phone 应用中画笔的工作方式,则您会惊喜的发现画笔在 Windows Phone 上的工作方式与前者相同。一个例外是 VideoBrush 在 Windows Phone 上不受支持。

要在屏幕上绘制对象(如,ShapeControl),请使用 Brush。将 ShapeFill 属性或 ControlBackgroundForeground 属性设置为所需的 Brush

Windows Phone 中不同类型的画笔包括:SolidColorBrushLinearGradientBrushRadialGradientBrushImageBrush

SolidColorBrush 使用单个 Color(例如,红色或蓝色)绘制区域。在 XAML 中定义一个 SolidColorBrush 及其指定的颜色的方法有三种。您可以使用预定义的颜色名称、十六进制颜色值或属性元素语法。

预定义的颜色名称

您可以使用预定义的颜色名称(如,黄色蓝灰色)来设置 ShapeFill 属性或 ControlBackgroundForeground 属性。XAML 分析器将颜色名称转换为具有正确颜色通道的 Color 结构。

说明注意:

有关预定义的颜色名称及其相应的十六进制值的图表,请参见 Color 结构。

下面的示例将 RectangleFill 属性设置为预定义的颜色 Red

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel>

十六进制颜色值

您可以使用颜色的十六进制值设置 ShapeFill 属性或 ControlBackgroundForeground 属性。十六进制值的结构为 alpha 通道(不透明)、红色通道、绿色通道和蓝色通道。例如,十六进制值 #FFFF0000 定义完全不透明的红色(alpha=FF,红色=FF,绿色=00 和 蓝色=00)。

下面的示例将 RectangleFill 属性设置为十六进制值 #FFFF0000

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

属性元素语法

您可以使用属性元素语法定义 SolidColorBrush。此语法较之前的方法更为详细,可用于指定其他设置,如画笔的 Opacity。有关 XAML 语法的更多信息,包括属性元素语法,请参见快速入门:使用 XAML 为 Windows Phone 8 创建用户界面

下面的示例创建一个 Rectangle 并为 Fill 属性显式创建 SolidColorBrushSolidColorBrushColor 设置为 Blue,并且 Opacity 设置为 0.5

Brushes - SolidColorBrush
<Grid>
    <Rectangle Width="200" Height="150">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue" Opacity="0.5" />
        </Rectangle.Fill>
    </Rectangle>
</Grid>

LinearGradientBrush 使用沿一条线(称为“渐变轴”)定义的渐变来绘制区域。可以使用 GradientStop 对象指定渐变的颜色及其在渐变轴上的位置。还可以修改渐变轴,这样能够创建水平和垂直渐变并反转渐变方向。

GradientStop 是渐变画笔的基本构建基块。渐变停止点指定渐变轴上 Offset 处的 Color

渐变停止点的 Color 属性指定渐变停止点的颜色。可以使用预定义的颜色名称来设置颜色,也可以通过指定十六进制 ARGB 值来设置颜色。

渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。Offset 是一个范围从 0 至 1 的 Double 值。渐变停止点的偏移量值越接近 0,颜色越接近渐变起点。渐变偏移量值越接近 1,颜色越接近渐变终点。

下面的示例创建了一个具有四种颜色的线性渐变,并且使用该渐变绘制 Rectangle

<StackPanel>
    <!-- This rectangle is painted with a diagonal linear gradient. -->
    <Rectangle Width="400" Height="200">
        <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>
</StackPanel>

下图演示 Windows Phone 上渐变的外观。

Brushes - LinearGradient

渐变停止点之间每个点的颜色按两个边界渐变停止点指定的颜色组合执行线性内插。下图突出显示了上一示例中的渐变停止点。圆圈标记渐变停止点的位置,虚线显示渐变轴。

Brushes - Linear gradients stops

可以通过设置画笔的 StartPointEndPoint 属性更改放置渐变停止点的线。通过操作画笔的 StartPointEndPoint,可以创建水平和垂直渐变、反转渐变方向以及压缩渐变的范围等。

下面的示例创建一个将 LinearGradientBrush 作为 FillRectangleLinearGradientBrush 创建两个 GradientStops,一个为红色,一个为蓝色。红色的 GradientStops 设置为:Offset0,蓝色的 GradientStops 设置为:Offset.75StartPoint 设置为 (0,0) 且 EndPoint 设置为 (1,1),它们皆为默认的值。GradientSpreadMethod 指定绘制渐变的不同方法。使用本示例中的滑块以体验不同的属性值。

LinearGradientBrush 类似,LinearGradientBrush 用沿一条轴混合在一起的颜色绘制区域。径向渐变画笔的轴由一个圆圈定义;其颜色从圆圈的原点向外辐射。使用 GradientOriginCenterRadiusXRadiusY 属性定义径向渐变。

<StackPanel>
    <!-- This rectangle is painted with a radial gradient. -->
    <Rectangle Width="400" Height="200">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Yellow" Offset="0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1" />
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>

下面的示例使用四种 GradientStop 设置创建径向渐变。

Brushes - Radial Gradient

下图显示了上一示例中创建的渐变。其中突出显示了画笔的渐变停止点。请注意,虽然结果不同,但此示例中的渐变停止点与前面的线性渐变画笔示例中的渐变停止点是相同的。

Brushes - Radial Gradient - callouts

下图显示了具有不同的 GradientOriginCenterRadiusXRadiusY 设置的多个径向渐变。

Brushes - Radial Gradient - Brush setting

下面的示例创建一个将 RadialGradientBrush 作为 FillRectangleRadialGradientBrush 创建两个 GradientStops,一个为红色,一个为蓝色。红色的 GradientStops 设置在 0Offset 上,蓝色的 GradientStops 设置在 .75Offset 上。GradientOriginCenter 都设置为 (0.5, 0.5) 并且 RadiusXRadiusY 都设置为 0.5,它们皆为默认的值。使用本示例中的滑块以体验不同的属性值。

ImageBrush 使用图像绘制一个区域。它使用由其 ImageSource 属性指定的 JPEG 或 PNG 图像绘制区域。请使用要加载的图像的路径来设置 ImageSource 属性。

默认情况下,ImageBrush 会将其图像拉伸以完全充满要绘制的区域,如果绘制的区域和该图像的长宽比不同,则可能会扭曲该图像。您可以通过将 Stretch 属性从默认值 Fill 更改为 NoneUniformUniformToFill 来更改此行为。

下面的示例将创建一个 ImageBrush 并将 ImageSource 设置为作为资源包括在应用中的命名图像 flower.jpg。

Brushes - ImageBrush

Microsoft 正在进行一项网上调查,以了解您对 MSDN 网站的意见。 如果您选择参加,我们将会在您离开 MSDN 网站时向您显示该网上调查。

是否要参加?
显示:
© 2015 Microsoft