踏踏实实学Windows Phone之画刷

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

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

一、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 指定径向渐变画笔的渐变轴的起点。 渐变轴从渐变原点辐射至渐变圆。 画笔的渐变圆由其 CenterRadiusX 和 RadiusY 属性定义。

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

RadialGradientBrush 设置


显示不同的渐变值。

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

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

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

posted on 2012-04-25 18:54  多了特  阅读(1229)  评论(0编辑  收藏  举报