WPF做的两种渐变

WPF做的两种渐变

开发工具与关键技术：Visual Studio 2015、WPF
作者：郑伟基
撰写时间：2019年5月4月  

下面我们使用WPF来做的两种不同方向的渐变，首先我们先在外面用布局元素在外面定一个布局，然后在里面去定义自己想要的图形，我在这里面用的是圆形，用两个圆形来做渐变，这是两种不同方向的渐变，要它们的方向的话要用到LinearGradientBrush，这是渐变的元素要用到的，然后再去定义渐变去起始元素(EndPoint)和结束元素(StartPoint),然后用GradientStop来定义我们的颜色元素，想要用多少种颜色的话就去写多少个GradientStop，颜色元素定义好了之后要写Offse来写它们的渐变值，颜色会根据写的渐变值来进行渐变的。

见下面的XAML代码：
<Window x:Class="渐变色.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="750">
    <Grid>
        <!--斜线渐变-->
        <Ellipse Width="300" Height="300" Margin="0,10,393.6,10.8">
            <Ellipse.Fill>
                <!--渐变-->
                <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                    <!--红色-->
                    <GradientStop Color="Red" Offset="0" />
                    <!--黄色-->
                    <GradientStop Color="Yellow" Offset="0.25" />
                    <!--蓝色-->
                    <GradientStop Color="Blue" Offset="0.5"/>
                    <!--紫色-->
                    <GradientStop Color="Violet"  Offset="0.75"/>
                    <!--黑色-->
                    <GradientStop Color="Black" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--文字-->
        <TextBlock Margin="0,269,684,9.8"  Width="60" FontSize="25">图一</TextBlock>
        <!--上下渐变-->
        <Ellipse Width="300" Height="300"  Margin="384,11,9.6,9.8">
            <Ellipse.Fill>
                <!--渐变-->
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <!--黑色-->
                    <GradientStop Color="Black" Offset="0" />
                    <!--橙色-->
                    <GradientStop Color="Orange"  Offset="0.25"/>
                    <!--绿色-->
                    <GradientStop Color="Green" Offset="0.5" />
                    <!--红色-->
                    <GradientStop Color="Red" Offset="0.75"/>
                    <GradientStop Color="BurlyWood" Offset="1" />
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    <!--文字-->
    <TextBlock Width="57" Margin="677,269,10,20.8"  FontSize="25" >图二</TextBlock>
</Grid>

我在上面的代码中我用了网格布局当布局元素，然后在里面去写两个图形出来，我然后在里面的这两个图形里面加了一个渐变颜色，看上面的XAML代码中我在这两个图形中都是加了5个渐变值的，它们的渐变值到是0到1的，都不会超过1的，我在它们每个图的下面加了一个文本值，用来说明它们是哪一个，这样好区分它们是哪一个。

请求的内容，见截图

在上面的效果图中看到我一共写了有两个渐变的图形，这两个图形是不同方向的渐变，图1是的渐变是斜线渐变的，我设置了5个渐变值，它就会按照我设置的渐变值渐变下去的，图1我设置的是斜着渐变下去的，所有说看到的渐变是斜着的，我在里面设置了5个颜色，分别是红色、黄色、蓝色、紫色、黑色，红色设置的值是0，到黄色设置的值是0.25，到蓝色设置的值是0.5，到紫色设置的值是0.75，到黑色设置的值是1，它们的值是按照0~1之间的，你可以子里面设置多个值，但是不能超过1。
图2我是用了上下渐变的，和图1不同的是渐变的方向不同，在图2里面我也是用了4个渐变值，它也会按照我设置的渐变值渐变下去，图2的渐变颜色我用的分别是黑色、橙色、绿色、红色，我分别设置了这几种颜色值，它们渐变出来的效果我根据我们设置值出来的。
我们想设置什么颜色都可以的，我们可以设置的更好看的。这要看我们想要设置什么颜色的渐变值了。