将 FlyoutItem 的视觉状态设置为 Selected

Question

我正在使用 Xamarin Forms 和默认的 ShellApp。我有 FlyoutItems 例如

<FlyoutItem Title="About" Icon="icon_about.png">
    <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
    <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

我不喜欢默认行为，一旦单击某个项目，所有其他页面都会从 NavigationStack 中弹出，所以我更改了它。

我现在面临的问题是将 FlyoutItem 标记为已选中。

我了解到可以使用 VisualStateManager，但我不知道如何获取 VisualElement 并更改其 VisualState。

有什么实现方法吗？

谢谢

Answer 1

一个小例子供大家参考：

以下代码为左侧菜单栏定义了两种状态。正常状态下显示红色，select状态下变为绿色。

<Shell.Resources>
    <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>
</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 的视觉状态设置为 Selected

Set visual state of a FlyoutItem to Selected

xamarin

xamarin.forms

xamarin-shell