xamarin.forms - Xamarin Forms Shell FlyoutItem 已禁用 VisualState 无法正常工作

Question

我无法使用 XAML 中的 VisualStates 更改禁用的 FlyoutItem (IsEnabled=False) 的样式。它已正确禁用，因为我无法点击它。

<?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。如果为 Gird 设置 IsEnabled="False"。

The "Organizer Dashboard" FlyoutItem has the IsEnabled="False" flag

如果您想在 IsEnabled="False" 时将 FlyoutItem 的颜色更改为绿色，但是您的 TargetType="Grid" FlyoutItemStyle。 TargetType 不是直接的 FlyoutItem。但是，如果将 TargetType 设置为 FlyoutItem，则 FlyoutItem 没有 BackgroundColor 属性。

In this case the user cannot tap on it. I need to use that for now, because >there is no IsVisible flag.

FlyoutItem 没有IsVisible，但是Grid 有这个属性。您可以在 Grid 选项卡中添加 IsVisible="{Binding IsEnabled}"。

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

这是运行截图。