Highlight Selected Item in CollectionView in Xamarin Forms - xamarin

Question

I am trying to hightlight selected item of collectionview with different color. The code works fine in iOS, but in Android it doesn't work. In Android, the first item is always selected but it doesn't hightlight the other items when I click them.
Update
I found the issue is GestureRecognizers on the Grid, If I remove that. It behavious as expected. After adding GestureRecognizers, the expected behavior is lost.
Workaround
If I wrap the Grid inside SwipeView, it works fine. However, the problem still remain when CollectionView has more than 100 items.
2nd Workaround
This worked nicely for any number of items in the CollectionView. Add second Grid inside the 1st Grid and apply GestureRecognizers event on the 2nd Grid and everythings works smoothly and as expected.
Theme.xaml -> getting styles from the theme file
<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 Page Resource
<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
<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>
If I remove the style "ItemTemplateGrid" from the Grid, it highlights every row accordingly, but the color is the default color of OS.
There is no need for SwipeView. It should work without boths workarounds.

Answer 1

Since you had used the SelectedItem="{Binding SelectedAya}" , you could define a property in the model which bind the backgroundcolor of the DataTemplate so that you don't need to use style dictionary any more .
in your model
Add a property
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));
}
}
}
in DataTemplate
<Grid RowDefinitions="*,Auto" BackgroundColor="{Binding BgColor}" Padding="10">
in Code Behind(ViewModel)
private YourModel selectedAya;
public YourModel SelectedAya
{
get => selectedAya;
set
{
if (selectedAya!= value)
{
selectedAya= value;
OnPropertyChanged(nameof(SelectedAya));
}
}
}