BindableBase not working on CollectionView - xamarin

Question

I have a CollectionView on my project with the most stable version of Xamarin Forms that supports CollectionView (4.3.0.908675) with the following code below.
<CollectionView x:Name="ScrollButtons"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
HeightRequest="90"
SelectionMode="Single"
SelectionChangedCommand="{Binding MenuItemSelectedCommand}"
BackgroundColor="{DynamicResource BackgroundColorShell}">
<CollectionView.Footer>
<!--HACK to keep showing last item on CollectionView -->
<BoxView BackgroundColor="Transparent" HeightRequest="90" WidthRequest="50"/>
</CollectionView.Footer>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="1" HorizontalItemSpacing="5"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="90" HeightRequest="90" Padding="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
Grid.Row="0"
BorderColor="Black"
BackgroundColor="{Binding BackgroundColor}"
>
</Frame>
<StackLayout Padding="5" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding Text}"
TextColor="{Binding TextColor}"
LineBreakMode="WordWrap"
FontSize="{StaticResource BaseFontSize}"
x:Name="tileLabel">
</Label>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Image Source="{Binding SecondaryIconSource}"
HorizontalOptions="Start"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
IsVisible="{Binding IsSecondaryIconVisible}"
/>
<Image Source= "{Binding ImageIcon}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
x:Name="tileIcon">
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
OnMenuSelectedItemCommand
private async Task OnMenuItemSelected()
{
Console.WriteLine("OnMenuItemSelected");
await NavigationService.NavigateAsync($"{SelectedMenuItem.NavigationPath}");
HighlightedMenuItem = SelectedMenuItem;
SelectedMenuItem = null;
}
The CollectionView consists of a collection of BottomMenuItem class which inherits from BindableBase for Prism. My goal is to change the properties of a BottomMenuItem as its selected on the CollectionView. However, the collection view is acting weird and it only changes based on BottomMenuItem that is not currently in the screen. As shown below, it only works on the 5th item and beyond, items that are not initially loaded on the screen.
Any help would be greatly appreciated. Thank you!

Answer 1

I figured it out. The problem is that my code relies on the scrolling to an item in order for a selectedItem to be highlighted. I made an assumption that the bug is based on item cells that are initially loaded are not working but in reality it was items that doesn't need scrolling.
Based on my OnMenuItemSelected, I pass the highlighted item to the next page. Handle that logic with the OnNavigatingTo logic below.
public override async void OnNavigatingTo(INavigationParameters parameters)
{
base.OnNavigatingTo(parameters);
Console.WriteLine("OnNavigatingTo");
HighlightedMenuItem = parameters.GetValue<BottomMenuItem>("highlightedMenuItem");
foreach (var item in MenuItems)
{
item.IsActive = false;
}
if (HighlightedMenuItem != null)
{
Console.WriteLine("OnNavigatingTo HighlightedItem - {0}", HighlightedMenuItem.Text);
HighlightedMenuItem.IsActive = true;
}
}