wpf之LinearGradientBrush线性渐变

1、从左到右渐变

Fill属性指定矩形Rectangle采用内部填充颜色，LinearGradientBrush指定填充颜色采用线性渐变画刷，StartPoint指定渐变的起点，EndPoint指定渐变的终点，StartPoint="0,0"代表矩形的左上角、EndPoint="1,0"代表矩形的右上角，所以实际等于从左到右渐变；中GradientStop 定义渐变的节点，Offset="0" 代表渐变的起点， Color="Red"指定颜色，所以综合起来就是指定渐变起点为红色；，Offset="1" 代表渐变的终点，Color="Blue" 指定颜色，所以综合起来就是指定渐变终点为蓝色，Offset的值范围就是0到1之间，代表渐变从起点到终点的位置，所以下面的代码指的就是从矩形的左边开始使用红色一直到矩形的右边使用蓝色，这样一个红到蓝的渐变。

csharp 复制代码

 <Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red"  Offset="0" />
                        <GradientStop Color="Blue"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

2、从上到下渐变

csharp 复制代码

<Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

3、从右到左渐变

csharp 复制代码

<Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>

4、从下到上渐变

csharp 复制代码

 <Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

5、从左上角到右下角

csharp 复制代码

 <Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red"  Offset="0" />
                        <GradientStop Color="Blue"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

6、从左下角到右上角

csharp 复制代码

 <Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

7、从右上角到左下角

csharp 复制代码

<Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

8、从右下角到左上角

csharp 复制代码

 <Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

9、定义3个渐变颜色

csharp 复制代码

<Rectangle Width="200" Height="100">
                <Rectangle.Fill>
                    <!-- 线性渐变画刷 -->
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <!-- 定义两个或更多个渐变点 -->
                        <GradientStop Color="Red"  Offset="0" />
                        <GradientStop Color="green"  Offset="0.5" />
                        <GradientStop Color="Blue"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>