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的渐变颜色我用的分别是黑色、橙色、绿色、红色,我分别设置了这几种颜色值,它们渐变出来的效果我根据我们设置值出来的。
我们想设置什么颜色都可以的,我们可以设置的更好看的。这要看我们想要设置什么颜色的渐变值了。