.NET MAUI中FAB按钮绑定ViewModel命令失效问题排查

云原生阿岚

2026-7-28

MAUI中FAB按钮RelayCommand绑定失效的原因及解决办法

问题场景

在MAUI项目中，将页面FAB按钮的Command绑定到ViewModel的OnFABTapped命令时，绑定完全失效，但相同的绑定逻辑在其他页面能正常运行。

核心原因

这是CommunityToolkit.Mvvm库中[RelayCommand]特性的默认行为导致的：
当标记[RelayCommand]的方法名以On开头时，特性会自动移除On前缀来生成对应的Command属性。比如定义OnFABTapped()方法，生成的Command属性是FABTappedCommand，而非你在XAML中绑定的OnFABTappedCommand，自然找不到对应属性，绑定失效。

解决办法

办法1：修改方法名（推荐）

直接移除方法名的On前缀，让[RelayCommand]生成的Command名称和XAML绑定名匹配：

修改ViewModel中的命令方法：

[RelayCommand]
async Task FABTapped()
{
    await Shell.Current.DisplayAlert("Alert", "You have been alerted", "OK");
}

同步修改XAML中的绑定：

<Button x:Name="actionButton"
        Text="+"
        Command="{Binding FABTappedCommand}"
        BackgroundColor="#2196F3"
        TextColor="White"
        CornerRadius="28"
        WidthRequest="56"
        HeightRequest="56"
        HorizontalOptions="End"
        VerticalOptions="End"
        Margin="0,0,16,3" 
        FontSize="24"
        FontAttributes="Bold"
        BorderWidth="0"/>

办法2：显式指定Command名称

如果想保留OnFABTapped的方法名，可以通过[RelayCommand]的Name参数强制指定生成的Command属性名：

[RelayCommand(Name = "OnFABTappedCommand")]
async Task OnFABTapped()
{
    await Shell.Current.DisplayAlert("Alert", "You have been alerted", "OK");
}

这种情况下XAML中的Command="{Binding OnFABTappedCommand}"就能正常生效。