突出显示Xamarin窗体中CollectionView中的选定项目

Question

我正在尝试用不同的颜色高亮显示集合视图中选定的项目。该代码在iOS中运行良好，但在Android中不起作用。在Android中，第一个项目总是被选中，但当我点击它们时，它不会突出显示其他项目。

更新

我发现问题是网格上的手势识别器，如果我删除它。它的行为和预期的一样。添加GestureRecognizers后，预期的行为将丢失。

解决方案

如果我将网格包裹在SwipeView中，效果会很好。但是，当CollectionView包含100多个项目时，问题仍然存在。

第二次解决方案

这对于CollectionView中的任何数量的项目都非常有效。在第一网格中添加第二个网格，并在第二网格上应用GestureRecognizers事件，一切都会顺利进行。

主题.xaml->从主题文件获取样式

<Style TargetType="Grid" x:Key="ItemTemplateGrid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource BackgroundSecondaryColorDark}, Light={StaticResource BackgroundSecondaryColorLight}}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

XAML页面资源

<DataTemplate x:Key="AndroidAyaItemTemplate">
<Grid RowDefinitions="*,Auto" Style="{DynamicResource ItemTemplateGrid}">
<Grid Grid.Row="0" RowDefinitions="Auto,Auto,Auto" RowSpacing="0" Padding="10">
<Label Grid.Row="0" LineBreakMode="WordWrap" IsVisible="{Binding BindingContext.ShowEnglishVerseNumber,
Source={x:Reference MyPage}, Converter={StaticResource InverterBooleanConverter}}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ArabicText.Aya}" FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="{Binding BindingContext.ActiveArabicFont.FontPath, Source={x:Reference MyPage}}"/>
<Span Text="{Binding ArabicText.ArabicAyaNumber,  StringFormat='﴿{0}﴾'}"
FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="Sherzad"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="0" LineBreakMode="WordWrap" IsVisible="{Binding BindingContext.ShowEnglishVerseNumber, Source={x:Reference MyPage}}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ArabicText.Aya}" FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="{Binding BindingContext.ActiveArabicFont.FontPath, Source={x:Reference MyPage}}"/>
<Span Text="﴿" FontSize="35" FontFamily="Sherzad"></Span>
<Span Text="{Binding ArabicText.AyaNumber, Converter={StaticResource ZeroToEmptyConverter}}" FontSize="Small"></Span>
<Span Text="﴾" FontSize="35" FontFamily="Sherzad"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="1" LineBreakMode="WordWrap" HorizontalTextAlignment="Start" Margin="0,5,0,5"
IsVisible="{Binding BindingContext.ShowTransliteration, Source={x:Reference MyPage}}"
FontSize="{Binding BindingContext.TransliterationFontSize, Source={x:Reference MyPage}}"
Text="{Binding ArabicText.Transliteration}"
FlowDirection="LeftToRight">
</Label>
<Label Grid.Row="2" LineBreakMode="WordWrap" HorizontalTextAlignment="Start"
IsVisible ="{Binding BindingContext.TranslationVisible, Source={x:Reference MyPage}}"
FontSize="{Binding BindingContext.ActiveTranslationFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="{Binding BindingContext.ActiveTranslationFont.FontPath, Source={x:Reference MyPage}}"
Text="{Binding AyaTranslation}"
FlowDirection="{Binding BindingContext.ActiveTranslationLanguage.FlowDirection, Source={x:Reference MyPage}}"/>
</Grid>
<BoxView Grid.Row="1" Style="{DynamicResource HLine}" IsVisible="{Binding BindingContext.ShowHorizentalLine, Source={x:Reference MyPage}}"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.ShareAyaCommand,Source={x:Reference itemView}}" CommandParameter="{Binding .}"/>
<SwipeGestureRecognizer Direction="Right" Command="{Binding BindingContext.NextChapterCommand, Source={x:Reference MyPage}}"/>
<SwipeGestureRecognizer Direction="Left" Command="{Binding BindingContext.PreviousChapterCommand, Source={x:Reference MyPage}}"/>
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>

集合查看

<CollectionView Grid.Row="0" ItemsSource="{Binding ArabicListText}" SelectedItem="{Binding SelectedAya}" SelectionMode="Single" FlowDirection="RightToLeft"
ItemTemplate="{StaticResource AndroidAyaItemTemplate}"
x:Name="itemView">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="5"/>
</CollectionView.ItemsLayout>
</CollectionView>

如果我删除样式"；ItemTemplateGrid；从网格中，它会相应地高亮显示每一行，但颜色是操作系统的默认颜色。

不需要SwipeView。它应该在没有两种变通方法的情况下工作。

Answer 1

由于您使用了SelectedItem="{Binding SelectedAya}">，您可以在模型中定义一个属性来绑定DataTemplate的背景颜色，这样您就不需要再使用样式字典了。

在您的模型中

添加属性

private Color bgColor;
public Color BgColor
{
get => bgColor;
set
{
if (bgColor!= value)
{
bgColor= value;
foreach(YourModel model in ArabicListText)
{
if(mdoel == SelectedAya)
{
if(App.Current.RequestedTheme== OSAppTheme.Dark)
{
model.BgColor = xxx;
}
else
{
model.BgColor = xxx;
}
}
else
{
model.BgColor = xxx;
}
}            
OnPropertyChanged(nameof(BgColor));
}
}
}

在DataTemplate中

<Grid RowDefinitions="*,Auto"  BackgroundColor="{Binding BgColor}"  Padding="10">

在代码隐藏(ViewModel(中

private YourModel selectedAya;
public YourModel SelectedAya
{
get => selectedAya;
set
{
if (selectedAya!= value)
{
selectedAya= value;

OnPropertyChanged(nameof(SelectedAya));
}
}
}