將FlyoutItem的視覺狀態設定為Selected

我正在使用 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 標記為 Selected。

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

任何想法如何實作這一目標？

謝謝

uj5u.com熱心網友回復：

一個小例子供大家參考：

以下代碼為左側選單欄定義了兩種狀態。在正常狀態下顯示為紅色，在選擇狀態下變為綠色。

<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>

這是螢屏截圖：

標籤：沙马林 xamarin.forms xamarin-shell

上一篇：當ListViewItemTapped時，如何使用ListView中的資料填充搜索欄欄位（專案源）？XAMARIN表格

下一篇：XamarinFormsAndroid10及更高版本在公共外部存盤中按檔案名查找視頻并獲取路徑