转 Silverlight开发历程—(画刷与着色之线性渐变画刷)

转自：http://blog.csdn.net/work201003/article/details/6960427

 

线性渐变画刷（LinearGradientBrush）用来填充一个复合渐变色到一个元素中，并且可以任意的搭配两种 或两种 以上的颜色，重要的属性有倾斜点（GradientStop）、渐变颜色（Color）、起始坐标点（StartPoint）、结束坐标点（EndPoint），如下面的例子：

[html] view plaincopyprint?
  1. <StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">  
  2.         <!--01 这段代码中包含了两个倾斜点属性元素，他们的渐变颜色属性分别是白色和绿色，第一个倾斜点偏移量是（0.0）第二个倾斜点偏移量为(1.0) 意思是从(0.0)坐标渐变到(1.0)坐标结束-->  
  3.         <Rectangle Width="200" Height="150">  
  4.             <Rectangle.Fill>  
  5.                 <LinearGradientBrush>  
  6.                     <GradientStop Color="White" Offset="0.0"/>  
  7.                     <GradientStop Color="Green" Offset="1.0"/>  
  8.                 </LinearGradientBrush>  
  9.             </Rectangle.Fill>  
  10.         </Rectangle>  
  11.         <!--02 线形渐变画刷的渐变颜色产生一般是由多个倾斜点对象组成，其中倾斜对象的渐变颜色和偏移量两个属性来决定颜色的值和它开始的位置，可以简单的把偏移量理解为是一个范围，整个偏移量的范围是1.0-->  
  12.         <Rectangle Width="200" Height="150" Margin="5,0,0,0">  
  13.             <Rectangle.Fill>  
  14.                 <LinearGradientBrush>  
  15.                     <GradientStop Color="Yellow" Offset="0.0"/>  
  16.                     <GradientStop Color="Red" Offset="0.25"/>  
  17.                     <GradientStop Color="Blue" Offset="0.75"/>  
  18.                     <GradientStop Color="Green" Offset="1.0"/>  
  19.                 </LinearGradientBrush>  
  20.             </Rectangle.Fill>  
  21.         </Rectangle>  
  22.         <!--03 线形渐变对象还包含了渐变角度属性，StartPoint和EndPoint可以根据这两个属性来确定渐变的角度-->  
  23.         <Rectangle Width="200" Margin="5,0,0,0" Height="150">  
  24.             <Rectangle.Fill>  
  25.                 <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">  
  26.                     <GradientStop Color="White" Offset="0.0"/>  
  27.                     <GradientStop Color="Green" Offset="1.0"/>  
  28.                 </LinearGradientBrush>  
  29.             </Rectangle.Fill>  
  30.         </Rectangle>  
  31.         <!--04-->  
  32.         <Rectangle Width="200" Margin="5,0,0,0" Height="150">  
  33.             <Rectangle.Fill>  
  34.                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
  35.                     <GradientStop Color="White" Offset="0.0"/>  
  36.                     <GradientStop Color="Green" Offset="1.0"/>  
  37.                 </LinearGradientBrush>  
  38.             </Rectangle.Fill>  
  39.         </Rectangle>  
  40.         <!--05-->  
  41.         <Rectangle Width="200" Margin="5,0,0,0" Height="150">  
  42.             <Rectangle.Fill>  
  43.                 <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">  
  44.                     <GradientStop Color="Green" Offset="1.0"/>  
  45.                     <GradientStop Color="White" Offset="0.0"/>  
  46.                 </LinearGradientBrush>  
  47.             </Rectangle.Fill>  
  48.         </Rectangle>  
  49.     </StackPanel>  
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
        <!--01 这段代码中包含了两个倾斜点属性元素，他们的渐变颜色属性分别是白色和绿色，第一个倾斜点偏移量是（0.0）第二个倾斜点偏移量为(1.0) 意思是从(0.0)坐标渐变到(1.0)坐标结束-->
        <Rectangle Width="200" Height="150">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="White" Offset="0.0"/>
                    <GradientStop Color="Green" Offset="1.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--02 线形渐变画刷的渐变颜色产生一般是由多个倾斜点对象组成，其中倾斜对象的渐变颜色和偏移量两个属性来决定颜色的值和它开始的位置，可以简单的把偏移量理解为是一个范围，整个偏移量的范围是1.0-->
        <Rectangle Width="200" Height="150" Margin="5,0,0,0">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0.0"/>
                    <GradientStop Color="Red" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.75"/>
                    <GradientStop Color="Green" Offset="1.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--03 线形渐变对象还包含了渐变角度属性，StartPoint和EndPoint可以根据这两个属性来确定渐变的角度-->
        <Rectangle Width="200" Margin="5,0,0,0" Height="150">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="White" Offset="0.0"/>
                    <GradientStop Color="Green" Offset="1.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--04-->
        <Rectangle Width="200" Margin="5,0,0,0" Height="150">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="White" Offset="0.0"/>
                    <GradientStop Color="Green" Offset="1.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--05-->
        <Rectangle Width="200" Margin="5,0,0,0" Height="150">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                    <GradientStop Color="Green" Offset="1.0"/>
                    <GradientStop Color="White" Offset="0.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>


运行结果：

posted @ 2012-12-18 13:59  狄大人  阅读(183)  评论(0)  编辑  收藏  举报