c# - 自定义所选(当前)FlyoutItem 的样式

Question

我注意到，当我自定义弹出项目外观时，就像这里所说的 in the docs ，当前的 FlyoutItem 不再被标记。

从文档中截取代码以更改项目外观:

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

Screenshot before Shell.ItemTemplate
Screenshot after Shell.ItemTemplate

人们会认为还必须有某种 Shell。当前/事件/选定ItemTemplate 自定义，但我找不到它。

有什么想法可以自定义当前的 shell 项目外观，或者至少使默认项目标记与 Shell.ItemTemplate 一起使用吗？

Answer 1

不幸的是。来自 Xamarin.Forms - Xaminals sample ，也会出现这种现象。 这应该是当前版本的 XF 中 Shell FlyoutItem 的限制。

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding FlyoutIcon}"
                Margin="5"
                HeightRequest="45" />
            <Label Grid.Column="1"
                Text="{Binding Title}"
                FontAttributes="Italic"
                VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

如果不使用 Shell.ItemTemplate ，则标记 selectitem:

其他选择项未标记:

======================================更新==== =============================

解决方案:

如果给模板添加样式，选择后可以保持选中状态。

Shell.Resources:添加FloutItemStyle。

<Style x:Key="FloutItemStyle" 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="Accent"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

在Shell.ItemTemplate中使用如下:

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid Style="{StaticResource FloutItemStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding FlyoutIcon}"
        Margin="5"
        HeightRequest="45" />
            <Label Grid.Column="1"
        Text="{Binding Title}"
        FontAttributes="Italic"
        VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

最终呈现效果: