踏踏实实学Windows Phone之画刷

首先我们看看Brush的继承层次结构

Brush 使用其输出对区域进行"绘制"。 画笔不同，其输出类型也不同。 某些画笔使用纯色、渐变或图像绘制区域。 下面的列表描述了不同类型的画笔：

• SolidColorBrush：使用纯 Color 绘制区域。

• LinearGradientBrush：使用线性渐变绘制区域。

• RadialGradientBrush：使用径向渐变绘制区域。

• ImageBrush：使用图像绘制区域。

• VideoBrush：使用正在运行的视频绘制区域。

一、SolidColorBrush（纯色绘制区域）

 

 

View Code

 <!--SolidColorBrush：使用纯色画刷绘制一个区域-->

        <!--总结：在XAML中给Fill、Foreground等类似属性赋值的时候会在幕后创建一个SolidColorBrush对象-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <!--使用SolidColorBrush的color属性设置Fill属性 因为Fill是一个Brush类型的属性而-->

            <Ellipse Width="100" Height="150" Fill="Blue">

            </Ellipse>

            <Ellipse Width="100" Height="150"  VerticalAlignment="Bottom" >

                <Ellipse.Fill>

                    <SolidColorBrush Color="Green"/>

                </Ellipse.Fill>

            </Ellipse>

            <!--使用SolidColorBrush的color属性设置Foreground属性-->

            <TextBlock Text="SolidColorBrush"  VerticalAlignment="Top"  Foreground="Aqua"/>

            <TextBlock Text="SolidColorBrush" VerticalAlignment="Top" HorizontalAlignment="Right">

                <TextBlock.Foreground>

                    <SolidColorBrush Color="Aqua"/>

                </TextBlock.Foreground>

            </TextBlock>

        </Grid>

 

以上代码通过设置两个相同的元素进行比较，最终结果都是一样得。

这里需要指出的是当我们在XAML中设置Fill、Foreground等类似的属性的时候，系统在幕后会为该元素创建一个SolidColorBrush对象，

所以我们可以再代码里面显示创建SolidColorBrush对象

 

二、LinearGradientBrush(使用线性渐变绘制区域)

 

View Code

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Grid.Background>

                <LinearGradientBrush>

                    <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>

            </Grid.Background>

        </Grid>

 

通过上面的代码和图示可以很明了得看出LinearGradientBrus的效果。

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

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

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

2、还可以通过设置LinearGradientBrush的StartPoint和EndPoint；两个属性来控制线性渐变的方向默认为对角线方向，如果将设置StartPoint="0 0"和EndPoint="0 1"渐变方向将为纵向

 

三、RadialGradientBrush

 

View Code

<Rectangle Width="150" Height="300">

                <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.35"/>

                        <GradientStop Color="Blue" Offset="0.7"/>

                        <GradientStop Color="Green" Offset="1"/>

                    </RadialGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

 

径向渐变中的渐变停止点

GradientOrigin 指定径向渐变画笔的渐变轴的起点。 渐变轴从渐变原点辐射至渐变圆。 画笔的渐变圆由其 Center、RadiusX 和 RadiusY 属性定义。

下图显示了具有不同的 GradientOrigin、Center、RadiusX 和 RadiusY 设置的多个径向渐变。

RadialGradientBrush 设置

个人觉得RadialGradient是一个非常强大的画刷 大家可以试试改变GradientOrigin、Center、RadiusX 和 RadiusY的充分体验该对象的效果。

其他两个画刷感觉不会很常用就不讨论了 

大家可以参考：http://msdn.microsoft.com/zh-cn/library/cc189003(v=vs.95).aspx