Оболочка форм Xamarin FlyoutItem Отключено VisualState не работает

Question

Я не могу изменить стиль отключенного FlyoutItem (IsEnabled = False) с помощью VisualStates в 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"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Green"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </Shell.Resources>
    <Shell.ItemTemplate>
        <DataTemplate>
            <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>
                        <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>

Answer 1

Хотите ли вы добиться результата, подобного следующему GIF?

Если это так, вы можете изменить стиль следующим образом.

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

Обновление

Я тестирую FlyoutItemStyle стиль. Disabled свойства не работают для Gird. Если вы установите IsEnabled="False" для Gird.

FlyoutItem «Панели управления организатора» имеет флаг IsEnabled = «False»

Если вы хотите изменить цвет на зеленый для FlyoutItem при IsEnabled="False", но ваш TargetType="Grid" в FlyoutItemStyle. TargetType не является FlyoutItem напрямую. Однако, если вы установите TargetType на FlyoutItem, FlyoutItem не будет иметь свойства BackgroundColor.

В этом случае пользователь не сможет нажать на него. Мне нужно использовать это сейчас, потому что> нет флага IsVisible.

FlyoutItem не имеют IsVisible, но Grid имеют это свойство. Вы можете добавить IsVisible="{Binding IsEnabled}" на вкладке Grid.

<Grid HeightRequest="{x:OnPlatform Android=50}" Style="{StaticResource FlyoutItemStyle}"  IsVisible="{Binding IsEnabled}">

Здесь выполняется сценарий.