选定（当前）FlyoutItem 的服装样式

Question

我注意到，当我自定义弹出项目外观（如文档中所述）时，当前的 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>

Shell.ItemTemplate 之前的屏幕截图
Shell.ItemTemplate 之后的屏幕截图

人们会认为一定还存在某种外壳。当前/活动/选定的ItemTemplate 自定义，但我找不到它。

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

Answer 1

不幸的是。从Xamarin.Forms - Xaminals示例来看，也出现了这种现象。这应该是当前版本的 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 被标记：否则 selectitem 未标记：=====================================更新============== =================解决方案：如果给模板添加样式，选择后可以保持选中状态。Shell.Resources：添加FoutItemStyle。<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>最后展示一下效果：

Answer 2

您可以使用绑定属性。创建自定义网格public class ShellItemGrid : Grid{&nbsp; &nbsp; public static readonly BindableProperty SelectedColorProperty =&nbsp; &nbsp; &nbsp; &nbsp;BindableProperty.Create("SelectedColor", typeof(Color), typeof(ShellItemGrid),Color.Transparent);&nbsp; &nbsp; public Color SelectedColor&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; get { return (Color)GetValue(SelectedColorProperty); }&nbsp; &nbsp; &nbsp; &nbsp; set { SetValue(SelectedColorProperty, value); }&nbsp; &nbsp; }}定义网格的样式<Shell.Resources>&nbsp; &nbsp; <Style x:Key="FlyoutItemStyle" TargetType="controls:ShellItemGrid">&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="VisualStateManager.VisualStateGroups">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualStateGroupList>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualStateGroup x:Name="CommonStates">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualState x:Name="Selected">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualState.Setters>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="SelectedColor" Value="Red"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualState.Setters>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualState>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualState x:Name="Normal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualState.Setters>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="SelectedColor" Value="White"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualState.Setters>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualState>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualStateGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </VisualStateGroupList>&nbsp; &nbsp; &nbsp; &nbsp; </Setter>&nbsp; &nbsp; </Style>定义项目模板并将Label的TextColor绑定到网格的SelectedColor<Shell.ItemTemplate>&nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <controls:ShellItemGrid x:Name="mGrid" Style="{StaticResource FlyoutItemStyle}" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label HorizontalTextAlignment="Start"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;VerticalTextAlignment="Center"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Margin="20,10,0,10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text="{Binding Title}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;TextColor="{Binding Source={x:Reference mGrid},Path=SelectedColor}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;FontSize="18" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </controls:ShellItemGrid >&nbsp; &nbsp; </DataTemplate></Shell.ItemTemplate>