[Bug] Shell FlyoutItem's Visual State "Disabled" does not work.

[nhinze]

In my AppShell.xaml page I set a FlyoutItem to IsEnabled="False". I also setup a "Disabled" visual state. However, the background color does not change to red. The "Selected" visual sate works fine.

Xamarin.Forms 4.5.0.617
iOS SDK 13.4 - Simulator

<?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:EventingVolunteers.Views"
       xmlns:volDash="clr-namespace:EventingVolunteers.Views.VolDash"
       xmlns:orgDash="clr-namespace:EventingVolunteers.Views.OrgDash"
       x:Class="EventingVolunteers.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="#2d6da4"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
        <DataTemplate x:Key="FlyoutTemplates">
            <Grid HeightRequest="{x:OnPlatform Android=50}" Style="{StaticResource FlyoutItemStyle}">
                <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 VerticalOptions="Center"
                        Text="{Binding Title}"
                        FontSize="{x:OnPlatform Android=14, iOS=Small}"
                        FontAttributes="Bold" Grid.Column="1">
                    <Label.TextColor>
                        White
                    </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.Resources>
    <FlyoutItem x:Name="volFlyoutItem"
                Title="Volunteer Dashboard"
                FlyoutDisplayOptions="AsSingleItem"
                FlyoutIcon="ic_dashboard_white.png"
                Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Signups"
                      Icon="ic_assignment.png"
                      ContentTemplate="{DataTemplate volDash:SignupsPage}" />
        <ShellContent Title="Events"
                      Icon="ic_event.png"
                      ContentTemplate="{DataTemplate volDash:AreasPage}" />
        <ShellContent Title="Mailbox"
                      Icon="ic_mail_outline.png"
                      ContentTemplate="{DataTemplate volDash:MailboxPage}" />
        <ShellContent Title="Rankings"
                      Icon="fa_trophy.png"
                      ContentTemplate="{DataTemplate volDash:MyRankingsPage}" />
        <ShellContent Title="Videos"
                      Icon="ic_ondemand_video.png"
                      ContentTemplate="{DataTemplate volDash:TrainingVideoCategoriesPage}" />
    </FlyoutItem>
    <FlyoutItem x:Name="orgFlyoutItem"
                IsEnabled="False"
                Title="Organizer Dashboard"
                FlyoutDisplayOptions="AsSingleItem"
                FlyoutIcon="ic_dashboard_white.png"
                Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Events"
                      Icon="ic_event.png"
                      ContentTemplate="{DataTemplate orgDash:EventsPage}" />
    </FlyoutItem>
    <FlyoutItem
        x:Name="accountFlyoutItem"
        Title="Account"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_account_box_white.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent ContentTemplate="{DataTemplate views:AccountPage}" />
    </FlyoutItem>
    <FlyoutItem
        x:Name="aboutFlyoutItem"
        Title="About"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_info.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent ContentTemplate="{DataTemplate views:AboutPage}" />
    </FlyoutItem>
    <MenuItem
        Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}"
        Text="Logout"
        Icon="ic_logout_white.png"
        Command="{Binding LogOutCommand}" />
</Shell>

[samhouts]

@nhinze Can you please attach a small project that demonstrates this issue? Thanks!

[nhinze]

Attached is the modified Xaminals project with a screenshot.

Xaminals.zip

[Godfather95]

Any Updates when this is fixed?

[fotoguy42]

Any updates on this? I'm surprised more people don't have flyout items they want graphically differentiated when the item is disabled.

[acaliaro]

Hi guys, there is some news for this @jamesmontemagno @jfversluis @davidortinau