选定（当前）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

{

    public static readonly BindableProperty SelectedColorProperty =       BindableProperty.Create("SelectedColor", typeof(Color), typeof(ShellItemGrid),Color.Transparent);

    public Color SelectedColor

    {

        get { return (Color)GetValue(SelectedColorProperty); }

        set { SetValue(SelectedColorProperty, value); }

    }

}

定义网格的样式

<Shell.Resources>

    <Style x:Key="FlyoutItemStyle" TargetType="controls:ShellItemGrid">

        <Setter Property="VisualStateManager.VisualStateGroups">

            <VisualStateGroupList>

                <VisualStateGroup x:Name="CommonStates">                      

                    <VisualState x:Name="Selected">

                        <VisualState.Setters>

                            <Setter Property="SelectedColor" Value="Red"/>

                        </VisualState.Setters>

                    </VisualState>

                    <VisualState x:Name="Normal">

                        <VisualState.Setters>

                            <Setter Property="SelectedColor" Value="White"/>

                        </VisualState.Setters>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateGroupList>

        </Setter>

    </Style>

定义项目模板并将Label的TextColor绑定到网格的SelectedColor

<Shell.ItemTemplate>

    <DataTemplate>

        <controls:ShellItemGrid x:Name="mGrid" Style="{StaticResource FlyoutItemStyle}" >

            <Label HorizontalTextAlignment="Start" 

                   VerticalTextAlignment="Center"

                   Margin="20,10,0,10"

                   Text="{Binding Title}"                        

                   TextColor="{Binding Source={x:Reference mGrid},Path=SelectedColor}"

                   FontSize="18" />

            </controls:ShellItemGrid >

    </DataTemplate>

</Shell.ItemTemplate>