如何在MAUI Button中使用Geometry路径数据作为ImageSource

MAUI里没有直接把Geometry赋值给Button.Source的原生支持，不过可以通过以下几种方式实现需求：

方法1：直接把Path作为Button的Content #

这是最简单的方式，不用纠结Source属性，直接把Path放到Button的Content里：

<Button>
    <Button.Content>
        <Path Data="M 100 100 L 300 100 L 200 300 z"
              WidthRequest="40"
              HeightRequest="40"
              Fill="#333333" />
    </Button.Content>
</Button>

• 调整WidthRequest/HeightRequest控制图标大小
• 修改Fill设置图标颜色
• 要加点击反馈的话，给Button加VisualStateManager就能实现按下/正常状态的样式变化

方法2：把Geometry转成ImageSource（适配Source属性） #

如果一定要用Button的Source属性，得自己写个转换方法，把路径数据生成ImageSource：

1. 写转换方法 #

在代码里加个静态方法，用MAUI的Graphics API生成图片流：

using Microsoft.Maui.Graphics;

public static ImageSource GeometryToImageSource(string geometryData, Color fillColor, float size = 40)
{
    return new StreamImageSource
    {
        Stream = async ct =>
        {
            // 创建位图画布
            using var bitmap = new Bitmap((int)size, (int)size);
            using var canvas = new Canvas(bitmap);
            canvas.FillColor = Colors.Transparent; // 背景透明

            // 解析路径并填充颜色
            var path = PathGeometry.Parse(geometryData);
            canvas.FillPath(path, fillColor);

            // 转成流返回
            var stream = new MemoryStream();
            await bitmap.SaveAsync(stream, ImageFormat.Png);
            stream.Position = 0;
            return stream;
        }
    };
}

2. 给Button赋值 #

可以在后台代码直接设置：

myButton.Source = GeometryToImageSource("M 100 100 L 300 100 L 200 300 z", Colors.Black);

或者做个转换器，在XAML里绑定使用，适合MVVM场景。

方法3：封装成自定义控件（复用场景） #

如果多个按钮都要用这种图标，封装成自定义控件更方便：

自定义控件XAML #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.GeometryIconButton">
    <Button x:Name="InnerButton" Padding="8">
        <Button.Content>
            <HorizontalStackLayout Spacing="4">
                <Path x:Name="IconPath" WidthRequest="24" HeightRequest="24" />
                <Label x:Name="TextLabel" />
            </HorizontalStackLayout>
        </Button.Content>
    </Button>
</ContentView>

后台代码加依赖属性 #

public partial class GeometryIconButton : ContentView
{
    public static readonly BindableProperty GeometryDataProperty =
        BindableProperty.Create(nameof(GeometryData), typeof(string), typeof(GeometryIconButton), propertyChanged: OnGeometryChanged);

    public static readonly BindableProperty IconColorProperty =
        BindableProperty.Create(nameof(IconColor), typeof(Color), typeof(GeometryIconButton), Colors.Black, propertyChanged: OnColorChanged);

    public static readonly BindableProperty ButtonTextProperty =
        BindableProperty.Create(nameof(ButtonText), typeof(string), typeof(GeometryIconButton), propertyChanged: OnTextChanged);

    public string GeometryData
    {
        get => (string)GetValue(GeometryDataProperty);
        set => SetValue(GeometryDataProperty, value);
    }

    public Color IconColor
    {
        get => (Color)GetValue(IconColorProperty);
        set => SetValue(IconColorProperty, value);
    }

    public string ButtonText
    {
        get => (string)GetValue(ButtonTextProperty);
        set => SetValue(ButtonTextProperty, value);
    }

    public GeometryIconButton()
    {
        InitializeComponent();
    }

    private static void OnGeometryChanged(BindableObject bindable, object oldVal, object newVal)
    {
        if (bindable is GeometryIconButton btn && newVal is string data)
        {
            btn.IconPath.Data = PathGeometry.Parse(data);
        }
    }

    private static void OnColorChanged(BindableObject bindable, object oldVal, object newVal)
    {
        if (bindable is GeometryIconButton btn && newVal is Color color)
        {
            btn.IconPath.Fill = color;
        }
    }

    private static void OnTextChanged(BindableObject bindable, object oldVal, object newVal)
    {
        if (bindable is GeometryIconButton btn && newVal is string text)
        {
            btn.TextLabel.Text = text;
        }
    }
}

使用自定义控件 #

<local:GeometryIconButton GeometryData="M 100 100 L 300 100 L 200 300 z"
                          IconColor="DarkBlue"
                          ButtonText="操作按钮" />

内容的提问来源于stack exchange，提问作者Niranjhna M R