WPF线性渐变和径向渐变

一、WPF线性渐变(LinearGradientBrush、GradientStop) 

1）LinearGradientBrush-- 主要属性：

• StartPoint 获取或设置线性渐变的二维起始坐标。
• EndPoint 获取或设置线性渐变的二维终止坐标。

2）GradientStop-主要属性：

• Color 获取或设置渐变停止点的颜色。
• Offset 获取渐变停止点在渐变向量中的位置。(一般设置可见区域 0-1)

例子：

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
     <GradientStop Color="Blue" Offset="0">
     </GradientStop>
     <GradientStop Color="Red" Offset="0.3">
     </GradientStop> 
     <GradientStop Color="White" Offset="1">
     </GradientStop> 
</LinearGradientBrush>

二、WPF径向渐变RadialGradientBrush:

画如下图管道:

具体思路就是，由弧的圆心开始向外多个梯度渐变。
先画一个渐变圆环，用Ellipse图形控件（当然用Path也可以，看心情）。
假设我们的UserControl大小是50*50，那么圆的直径就是100
接下来用RadialGradientBrush进行渐变填充，假设管道厚度是25，即圆半径的二分之一，那么我们渐变的起始断点应该是0.5，从0.5->0.75->1，渐变颜色分别是DimGray->Snow->DimGray。

<Ellipse Width="100" Height="100">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5">
                    <GradientStop Color="DimGray" Offset="0.5"/>
                    <GradientStop Color="Snow" Offset="0.75"/>
                    <GradientStop Color="DimGray" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
</Ellipse>

这样画出来的效果大概是这样的:

但我们需要中间是空的，那就让0->0.5用Transparent渐变

<Ellipse Width="100" Height="100">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="0.5"/>
                    <GradientStop Color="DimGray" Offset="0.5"/>
                    <GradientStop Color="Snow" Offset="0.75"/>
                    <GradientStop Color="DimGray" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
</Ellipse>

这样就完美了！

如果需要得到不同方位的弧，可以通过调整Margin来实现，这里就不多说了。

原文链接1：https://blog.csdn.net/wang__junhappy/article/details/84848643
原文链接2：https://blog.csdn.net/wsadcg/article/details/104481653