XAML MAUI：如何为FlyoutItem添加工具提示？

当然可行，下面给出两种实用的实现方式：

方式一：修改ControlTemplate（推荐） #

直接在现有Style中添加ControlTemplate，将FlyoutIcon包装在带Tooltip的布局里，就能实现桌面端鼠标悬停、移动端长按显示提示的效果。

修改后的完整代码如下：

<Style TargetType="FlyoutItem" x:Key="HomeFlyout">
    <Setter Property="FlyoutIcon" Value="tab_home.png" />
    <!-- 添加ControlTemplate实现Tooltip -->
    <Setter Property="ControlTemplate">
        <ControlTemplate>
            <Grid>
                <Image Source="{TemplateBinding FlyoutIcon}">
                    <Image.Tooltip>
                        <Tooltip Text="首页" /> <!-- 替换为你需要的提示文本 -->
                    </Image.Tooltip>
                </Image>
            </Grid>
        </ControlTemplate>
    </Setter>
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem" Property="IsChecked" Value="False">
        </Trigger>
        <Trigger TargetType="FlyoutItem" Property="IsChecked" Value="True">
            <Setter Property="FlyoutIcon" Value="tab_home_on.png" />
        </Trigger>
    </Style.Triggers>
</Style>

如果需要根据选中状态切换提示文本，可以给Tooltip.Text绑定并配合转换器：

<Image.Tooltip>
    <Tooltip>
        <Tooltip.Text>
            <Binding Path="IsChecked" RelativeSource="{RelativeSource TemplatedParent}"
                     Converter="{StaticResource BoolToTextConverter}"
                     ConverterParameter="首页|已选中首页" />
        </Tooltip.Text>
    </Tooltip>
</Image.Tooltip>

（注：需自行实现BoolToTextConverter，将布尔值转换为对应文本）

方式二：使用Behavior附加提示行为 #

如果不想修改ControlTemplate，可以通过Behavior给FlyoutItem绑定Tooltip功能：

首先定义Behavior类：

using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Behaviors;

public class FlyoutItemTooltipBehavior : Behavior<FlyoutItem>
{
    public static readonly BindableProperty TooltipTextProperty =
        BindableProperty.Create(nameof(TooltipText), typeof(string), typeof(FlyoutItemTooltipBehavior));

    public string TooltipText
    {
        get => (string)GetValue(TooltipTextProperty);
        set => SetValue(TooltipTextProperty, value);
    }

    protected override void OnAttachedTo(FlyoutItem bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.PointerEntered += OnPointerEntered;
        bindable.PointerExited += OnPointerExited;
        bindable.LongPressed += OnLongPressed;
    }

    protected override void OnDetachingFrom(FlyoutItem bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.PointerEntered -= OnPointerEntered;
        bindable.PointerExited -= OnPointerExited;
        bindable.LongPressed -= OnLongPressed;
    }

    private void OnPointerEntered(object sender, EventArgs e)
    {
        if (sender is FlyoutItem item)
        {
            Tooltip.Show(TooltipText, item);
        }
    }

    private void OnPointerExited(object sender, EventArgs e)
    {
        Tooltip.Hide();
    }

    private void OnLongPressed(object sender, EventArgs e)
    {
        if (sender is FlyoutItem item)
        {
            Tooltip.Show(TooltipText, item);
        }
    }
}

然后在XAML中引用该Behavior：

<FlyoutItem Style="{StaticResource HomeFlyout}">
    <FlyoutItem.Behaviors>
        <local:FlyoutItemTooltipBehavior TooltipText="首页" />
    </FlyoutItem.Behaviors>
    <!-- 页面内容 -->
</FlyoutItem>

注意事项 #

• 以上方案基于.NET MAUI实现，若使用Xamarin.Forms，Tooltip的API略有差异，可改用Xamarin原生Tooltip或适配第三方库。
• 交互逻辑符合平台习惯：桌面端鼠标悬停显示提示，移动端长按显示提示。

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