如何在.NET MAUI与XAML中设计可悬停、点击且可动画的星形路径？

要实现你需要的精准路径悬停、点击控制和形状转换动画，可以通过自定义命中测试的Path控件结合视觉状态与故事板动画来完成，以下是具体实现方案：

核心思路 #

• 用Path控件承载星形/环形路径，替代Maui Graphics或Border，解决交互与不规则路径的适配问题
• 通过PointerEntered/PointerExited事件配合Geometry.FillContains实现精准的路径内悬停检测，避免默认矩形区域触发的误判
• 用布尔变量控制点击状态，仅在悬停时响应点击逻辑
• 利用Storyboard或Animation类实现星形到环形的平滑形状转换

完整实现代码 #

XAML部分 #

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

    <Grid HorizontalOptions="Center" VerticalOptions="Center">
        <!-- 可交互的星形路径 -->
        <Path x:Name="StarPath"
              Stroke="Gray"
              StrokeThickness="2"
              Fill="LightBlue"
              WidthRequest="200"
              HeightRequest="200">
            <Path.Data>
                <!-- 星形路径数据 -->
                <PathGeometry>
                    <PathFigure StartPoint="100,20" IsClosed="True">
                        <LineSegment Point="138,138"/>
                        <LineSegment Point="20,76"/>
                        <LineSegment Point="162,76"/>
                        <LineSegment Point="22,138"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.GestureRecognizers>
                <TapGestureRecognizer Tapped="StarPath_Tapped"/>
            </Path.GestureRecognizers>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Property="Fill" Value="OrangeRed"/>
                            <Setter Property="Stroke" Value="DarkRed"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Path>

        <!-- 触发形状转换的按钮 -->
        <Button Text="切换形状"
                Margin="0,220,0,0"
                Clicked="SwitchShape_Clicked"/>
    </Grid>
</ContentPage>

后台C#代码 #

using Microsoft.Maui.Graphics;
using Microsoft.Maui.Controls.Shapes;

namespace MauiPathDemo;

public partial class MainPage : ContentPage
{
    private bool _isPathHovered = false;
    // 环形路径数据
    private readonly PathGeometry _circleGeometry = new()
    {
        Figures =
        {
            new PathFigure
            {
                StartPoint = new Point(100,20),
                IsClosed = true,
                Segments =
                {
                    new ArcSegment
                    {
                        Point = new Point(100,20),
                        Size = new Size(80,80),
                        SweepDirection = SweepDirection.Clockwise
                    }
                }
            }
        }
    };
    // 星形路径数据（备份，用于切换回原形状）
    private PathGeometry _starGeometry;

    public MainPage()
    {
        InitializeComponent();
        _starGeometry = StarPath.Data as PathGeometry;
        // 绑定指针事件
        StarPath.PointerEntered += StarPath_PointerEntered;
        StarPath.PointerExited += StarPath_PointerExited;
    }

    private void StarPath_PointerEntered(object sender, Microsoft.Maui.Controls.PointerEventArgs e)
    {
        if (sender is Path path)
        {
            // 获取鼠标相对于Path控件的坐标
            var pointerPos = e.GetPosition(path);
            if (pointerPos.HasValue && path.Data is Geometry geometry)
            {
                // 精准判断是否在路径填充区域内
                if (geometry.FillContains(pointerPos.Value))
                {
                    _isPathHovered = true;
                    VisualStateManager.GoToState(path, "PointerOver");
                }
            }
        }
    }

    private void StarPath_PointerExited(object sender, Microsoft.Maui.Controls.PointerEventArgs e)
    {
        if (sender is Path path)
        {
            _isPathHovered = false;
            VisualStateManager.GoToState(path, "Normal");
        }
    }

    private void StarPath_Tapped(object sender, TappedEventArgs e)
    {
        // 仅在悬停状态下响应点击
        if (_isPathHovered)
        {
            DisplayAlert("提示", "你点击了星形路径", "确定");
        }
    }

    private void SwitchShape_Clicked(object sender, EventArgs e)
    {
        // 创建形状转换动画
        var animation = new Animation();
        // 动画化路径的形状转换（如需更平滑过渡，可拆分路径点做逐帧动画）
        animation.Add(0, 1, (v) =>
        {
            StarPath.Data = StarPath.Data == _starGeometry ? _circleGeometry : _starGeometry;
        });
        // 执行动画，时长1秒
        animation.Commit(StarPath, "ShapeTransition", length: 1000, easing: Easing.SinInOut);
    }
}

关键细节说明 #

1. 精准悬停检测：
   • 通过e.GetPosition(path)获取鼠标相对于Path控件的坐标
   • 调用geometry.FillContains(pointerPos.Value)判断是否在路径的填充区域内，完全避免了矩形边界触发的误判
2. 点击控制：
   • 用_isPathHovered变量标记当前悬停状态，点击事件中仅当该变量为true时才执行逻辑
3. 形状动画：
   • 示例实现了星形与环形的切换动画，如需更平滑的过渡，可以拆分路径的每个点，对Point属性做逐帧动画
   • 利用.NET MAUI的Animation类可以灵活控制动画的时长、缓动函数等参数
4. 方案选型说明：
   • 放弃Maui Graphics是因为其交互能力有限，原生Path控件更适合需要用户交互的场景
   • Border控件无法承载不规则路径，直接使用Path是最优选择

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