.NET MAUI FAQ - Collection View

Yes. Disable overlays temporarily, remove opacity or shadows, and test again. Use visual debugging (such as View Hierarchy inspection) to locate UI effect views. Removing layers one by one typically reveals the cause.

This is often caused by overlays, semi-transparent elements, shadows, or platform composition changes, and not the layout. Check for visual layers above the CollectionView.

To batch many updates into a single operation, use ObservableRangeCollection.AddRange, suspend notifications, and raise one Reset event, or replace the entire ItemsSource. This reduces repeated rebind and remeasurement.

It is preferable to use PropertyChanged to address this issue. Replacing items triggers the CollectionChange event and may cause container recycling or state loss. The interface fails to update when the property does not raise change notifications.

It is better to use lightweight item view models implementing INotifyPropertyChanged. They provide predictable UI updates, support local UI state, and keep domain models free of UI responsibilities.

public class ItemVM : INotifyPropertyChanged
{
  public string Title { get; set; }
  /*...*/
}

public ObservableCollection<ItemVM> Items { get; } = new ObservableCollection<ItemVM>();

<CollectionView ItemsSource="{Binding Items}" />

To show a visual highlight, use an item-level ViewModel flag (such as IsHighlighted) and bind it to a VisualState. Do not rely on SelectedItem, because selection disables immediate retapping. Clear selection and let the flag control the highlight.

Use ItemsViewScrolled in MAUI. The event arguments provide the indices of the first, center, and last visible items.

void OnItemsViewScrolled(object s, ItemsViewScrolledEventArgs e)
{
  var first = e.FirstVisibleItemIndex;
  var center = e.CenterItemIndex;
  var last = e.LastVisibleItemIndex;
}

Track the last visible index using ItemsViewScrolled. Auto-scrolling only when the user is within a certain threshold of the bottom ( e.g., the last two or three items prevents the interruption of active scrolling.

void OnItemsViewScrolled(object s, ItemsViewScrolledEventArgs e)
{
  var lastIndex = Items.Count - 1;
  bool nearBottom = (lastIndex - e.LastVisibleItemIndex) <= 2;
  if (nearBottom) collectionView.ScrollTo(Items.Last(), position: ScrollToPosition.End, animate: true);
}

Place the CollectionView directly in a Grid row with Height=”*”, or inside a well-bounded AbsoluteLayout zone. Avoid wrapping it in a ScrollView or StackLayout that allows infinite height.

<Grid RowDefinitions="Auto,*">
  <BoxView Grid.Row="0" HeightRequest="56"/>
  <CollectionView Grid.Row="1" ItemsSource="{Binding Items}" />
</Grid>

iOS uses different measurements and estimated sizing rules. It is more sensitive to unbounded or nested layouts. Choose predictable heights and test on both platforms, as the measurement order differs between them.

Yes. Nesting a CollectionView inside another scrollable container disables virtualization and usually causes measurement and spacing issues, especially on iOS. Use Grid or AbsoluteLayout for sizing rather than wrapping in a ScrollView.

Yes. CollectionView provides RemainingItemsThreshold/RemainingItemsThresholdReached for incremental loading and includes recycling strategies that allow it to handle large datasets when properly tuned.

<CollectionView ItemsSource="{Binding Items}" RemainingItemsThreshold="5" RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}" />

For long, image-heavy feeds, use element recycling, batched data updates, downsampled and cached images, lightweight item templates, and background image loading. These reduce UI workload and keep the CollectionView scrolling smoothly even with large image feeds.

<CollectionView ItemsLayout="VerticalList"
                ItemSizingStrategy="MeasureFirstItem"
                RecycleElement="True"
                RemainingItemsThreshold="3"
                RemainingItemsThresholdReached="OnLoadMore">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="240">
                <!-- Use UriImageSource to enable caching; constrain size for downsampling -->
                <Image Aspect="AspectFill"
                       HeightRequest="240"
                       WidthRequest="400">
                    <Image.Source>
                        <UriImageSource Uri="{Binding ThumbnailUrl}"
                                        CachingEnabled="True"
                                        CacheValidity="7.00:00:00" />
                    </Image.Source>
                </Image>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Yes. SfListView supports smooth infinite scrolling, load-on-demand, and UI virtualization, making it well‑suited for large and dynamic feed datasets.

MAUI CollectionView is powerful and tunable. However, in extremely heavy scenarios (rich templates, frequent gestures, continuous paging), Syncfusion SfListView often performs better due to its optimized virtualization and load-on-demand mechanisms. It becomes a preferable option if MAUI tuning does not meet the performance needs.

<CollectionView SelectionMode="Single" ItemsSource="{Binding Items}">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <Grid x:Name="root">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup Name="SelectionStates">
            <VisualState Name="Normal" />
            <VisualState Name="Selected">
              <VisualState.Setters>
                <Setter TargetName="root" Property="BackgroundColor" Value="LightBlue"/>
              </VisualState.Setters>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Label Text="{Binding Title}"/>
      </Grid>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

Yes. On Windows, state changes may not apply if elements are not in the expected namescope or if system brushes override the template. Targeting the root or updating states in code-behind via SelectionChanged can help.

They can target nested elements if those elements have names, but VisualStates applied to the template root are the most reliable across platforms. Nested targeting requires correct namescopes and element naming.

Common causes include:

• SelectionMode is set to none.
• The DataTemplate does not define a selected visual state.
• The visual state is applied to the wrong element.

Ensure SelectionMode is enabled, define the required visual states, and apply them to the template’s root element.

Use a single bulk update (such as ObservableRangeCollection.AddRange) or replace the ItemsSource entirely. Enable RecycleElement, down-sample and cache images, move heavy work off the UI thread, and keep templates lightweight.

public ObservableRangeCollection<string> Items { get; } = new();
public void LoadItems_Correct()
{
    var list = new List<string> { "A", "B", "C", "D", "E" };

    Items.AddRange(list); // Single UI update, much faster
}

Capture the first visible item (or its index) and offset. Insert new messages using a batch update, then restore scroll position using ScrollTo(savedItem/index, ScrollToPosition.Start, animate: false). This preserves the viewport and avoids jumping.

// before insert
var firstVisibleIndex = args.FirstVisibleItemIndex; // from ItemsViewScrolled
var firstVisibleItem = view.ItemsSource.Cast<object>().ElementAt(firstVisibleIndex);

// insert batch at index 0
items.InsertRange(0, newItems);

// restore
collectionView.ScrollTo(firstVisibleItem, position: ScrollToPosition.Start, animate: false);

Yes. The layout (Linear or Grid), orientation, and ItemSizingStrategy (MeasureFirstItem, MeasureAllItems, or Fixed) influence measurement and item realization. Predictable or fixed sizing is recommended for heavy feeds to reduce layout recalculations and ensure consistent event timing.

<CollectionView ItemsLayout="VerticalList."
                ItemSizingStrategy="MeasureFirstItem">

CollectionView recycles its item containers. When ItemsSource changes, existing visuals may be reused before new bindings are applied. Behaviors that cached item references when they were first attached will then reference stale or null objects.

Fix: Use bindings based on the current BindingContext (such as {Binding .}), avoid storing item references inside the behavior, and reapply or update behaviors when containers are reused.

<local:TapBehavior Command="{Binding TapCommand}"
                   CommandParameter="{Binding .}" />

In .NET MAUI, behaviors inside a CollectionView DataTemplate usually inherit the BindingContext of the templated view. However, container recycling and platform differences can cause behaviors to receive outdated contexts.

Best practice: Explicitly bind the behavior (BindingContext=”{Binding .}” or with RelativeSource), or assign the BindingContext inside OnAttachedTo to ensure reliability.