Xamarin Forms Shell FlyoutItem禁用状态VisualState不生效问题

算力阿峰

2026-5-7

解决FlyoutItem禁用后VisualStates样式不生效的问题

我明白你的困扰——你已经成功把orgFlyoutItem设置为禁用状态（IsEnabled=False），它确实无法点击了，但你设置的Disabled视觉状态样式完全没起作用。这是因为Shell的FlyoutItem的禁用状态不会自动传递给你ItemTemplate里的Grid控件，Grid本身的IsEnabled还是默认的true，所以Disabled视觉状态根本不会被触发。

修复步骤

1. 把Grid的IsEnabled绑定到FlyoutItem的IsEnabled

在你的Shell.ItemTemplate里的Grid控件上，添加IsEnabled绑定，让它继承父级FlyoutItem的禁用状态：

<Grid HeightRequest="{x:OnPlatform Android=50}" 
      Style="{StaticResource FlyoutItemStyle}"
      IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type FlyoutItem}}, Path=IsEnabled}">

2. 给Label添加命名，方便VisualState控制样式

给ItemTemplate里的Label加上x:Name，这样我们可以在VisualState里修改它的文字颜色（可选，但能让禁用状态更直观）：

<Label x:Name="ItemLabel" VerticalOptions="Center" Text="{Binding Title}" FontSize="{x:OnPlatform Android=14, iOS=Small}" FontAttributes="Bold" Grid.Column="1">

3. 更新VisualState样式（可选优化）

如果你需要调整Label的文字颜色，可以在Disabled状态里添加对应的Setter，同时确保BackgroundColor的设置生效：

<Style x:Key="FlyoutItemStyle" TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Red"/>
                        <Setter TargetName="ItemLabel" Property="TextColor" Value="White"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Green"/>
                        <Setter TargetName="ItemLabel" Property="TextColor" Value="Gray"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

修改后的完整XAML代码

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:MyApp.Views" xmlns:volDash="clr-namespace:MyApp.Views.VolDash" xmlns:orgDash="clr-namespace:MyApp.Views.OrgDash" x:Class="MyApp.AppShell" FlyoutBackgroundColor="#337ab7">
    <Shell.Resources>
        <Style x:Key="FlyoutItemStyle" TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red"/>
                                <Setter TargetName="ItemLabel" Property="TextColor" Value="White"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Green"/>
                                <Setter TargetName="ItemLabel" Property="TextColor" Value="Gray"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </Shell.Resources>
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="{x:OnPlatform Android=50}" 
                  Style="{StaticResource FlyoutItemStyle}"
                  IsEnabled="{Binding Source={RelativeSource AncestorType={x:Type FlyoutItem}}, Path=IsEnabled}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="{x:OnPlatform Android=24, iOS=22}" WidthRequest="{x:OnPlatform Android=24, iOS=22}">
                </Image>
                <Label x:Name="ItemLabel" VerticalOptions="Center" Text="{Binding Title}" FontSize="{x:OnPlatform Android=14, iOS=Small}" FontAttributes="Bold" Grid.Column="1">
                    <Label.TextColor>
                        <OnPlatform x:TypeArguments="Color">
                            <OnPlatform.Platforms>
                                <On Platform="Android" Value="#D2000000" />
                            </OnPlatform.Platforms>
                        </OnPlatform>
                    </Label.TextColor>
                    <Label.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <OnPlatform.Platforms>
                                <On Platform="Android" Value="20, 0, 0, 0" />
                            </OnPlatform.Platforms>
                        </OnPlatform>
                    </Label.Margin>
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <OnPlatform.Platforms>
                                <On Platform="Android" Value="sans-serif-medium" />
                            </OnPlatform.Platforms>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem x:Name="volFlyoutItem" Title="Volunteer Dashboard" FlyoutDisplayOptions="AsSingleItem" FlyoutIcon="ic_dashboard_white.png">
        <ShellContent Title="Signups" Icon="ic_assignment.png">
            <volDash:SignupsPage />
        </ShellContent>
        <ShellContent Title="Events" Icon="ic_event.png">
            <volDash:AreasPage />
        </ShellContent>
        <ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
            <volDash:MailboxPage />
        </ShellContent>
        <ShellContent Title="Rankings" Icon="fa_trophy.png">
            <volDash:MyRankingsPage />
        </ShellContent>
        <ShellContent Title="Videos" Icon="ic_ondemand_video.png">
            <volDash:TrainingVideoCategoriesPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem x:Name="orgFlyoutItem" Title="Organizer Dashboard" FlyoutDisplayOptions="AsSingleItem" FlyoutIcon="ic_dashboard_white.png" IsEnabled="False">
        <ShellContent Title="Events" Icon="ic_event.png">
            <orgDash:EventsPage />
        </ShellContent>
    </FlyoutItem>
    <ShellContent Title="Account" Icon="ic_account_box_white.png">
        <views:AccountPage />
    </ShellContent>
    <MenuItem Text="Logout" Icon="ic_dashboard_white.png" Command="{Binding LogOutCommand}" />
</Shell>

这样修改后，当orgFlyoutItem被禁用时，它对应的Grid会进入Disabled视觉状态，你设置的绿色背景和灰色文字就会正常显示了。

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