2

我注意到，当我像文档中所说的那样自定义弹出项外观时，当前的 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
之后的屏幕截图

人们会假设还必须有某种壳牌。Current/Active/Selected ItemTemplate 自定义，但我找不到。

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

4

2 回答 2

4

不幸的是，从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 被标记：

在此处输入图像描述

其他选择项未标记：

在此处输入图像描述

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

解决方案：

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

Shell.Resources：添加一个FlooutItemStyle。

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

最后展示效果：

在此处输入图像描述

于 2019-08-09T04:23:22.277 回答
0

您可以使用绑定属性。创建自定义网格

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>

定义item模板并将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>
于 2019-10-22T10:41:58.380 回答