我注意到,当我像文档中所说的那样自定义弹出项目外观时,当前的 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 项目外观,或者至少使默认项目标记与 Shell.ItemTemplate 一起使用吗?
。来自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
,则选择项被标记为:
======================================
更新============ =====================
解决方案: 如果给模板添加样式,选择后可以保持选中状态。
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>
终于展示效果了:
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绑定到grid的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>