Polygon控件Stroke设置LinearGradientBrush无效果问题

你的代码中，Polygon.Stroke使用的LinearGradientBrush是基于控件边界框的对角线方向（从左上角到右下角）进行渐变的，但你的Polygon是三角形，其顶部的水平边完全处于渐变的红色起始区域，另外两条边的渐变效果因为方向和渐变路径不匹配，视觉上不明显，导致看起来只显示红色。

解决方案1：调整渐变方向，实现明显的线性渐变 #

如果只需要基于控件区域的线性渐变，可以修改LinearGradientBrush的StartPoint和EndPoint，让渐变方向覆盖整个Polygon的Stroke范围，比如水平方向或垂直方向：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <Polygon 
         Points="10,0 70,0 40,60"
         StrokeThickness="5">
        <Polygon.Stroke>
            <!-- 水平方向渐变：从左到右红→绿→白 -->
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Green" Offset="0.5"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Polygon.Stroke>
    </Polygon>

</ContentPage>

修改后，三角形的顶部水平边会显示从红到白的渐变，另外两条边也会呈现对应的渐变效果。

解决方案2：实现沿Stroke路径的渐变（从第一个点到第三个点依次变色） #

如果你的需求是让渐变沿着Polygon的Stroke路径（从第一个顶点红→第二个顶点绿→第三个顶点白），MAUI原生的LinearGradientBrush无法直接实现这种沿路径的渐变，需要借助SkiaSharp进行自定义绘制：

1. 首先安装SkiaSharp.Views.Maui.Controls NuGet包。
2. 修改XAML布局：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Maui;assembly=SkiaSharp.Views.Maui"
             x:Class="MauiApp1.MainPage">

    <skia:SKCanvasView PaintSurface="OnCanvasViewPaintSurface" />

</ContentPage>

3. 后台代码实现绘制逻辑：

using SkiaSharp;
using SkiaSharp.Views.Maui;

namespace MauiApp1;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
        canvas.Clear();

        // 构建三角形路径
        var path = new SKPath();
        path.MoveTo(10, 0);
        path.LineTo(70, 0);
        path.LineTo(40, 60);
        path.Close();

        // 创建沿路径方向的渐变着色器
        using var shader = SKShader.CreateLinearGradient(
            new SKPoint(10, 0), 
            new SKPoint(40, 60), 
            new[] { SKColors.Red, SKColors.Green, SKColors.White },
            new[] { 0f, 0.5f, 1f },
            SKShaderTileMode.Clamp);

        var strokePaint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            StrokeWidth = 5,
            Shader = shader
        };

        canvas.DrawPath(path, strokePaint);
    }
}

这段代码会让渐变沿着三角形的路径方向呈现，从第一个顶点的红色过渡到中间的绿色，最后到第三个顶点的白色。

内容的提问来源于stack exchange，提问作者infinitesimal