CollectionView item spacing/layout breaks when item visibility changes dynamically

[pallav1111]

Description

I’m running into inconsistent layout behavior in a MAUI page that uses a CollectionView inside a vertically stacked layout, where item visibility changes dynamically.

The UI is structured with:

• A horizontal selector (tabs-like behavior)
• A vertical content area showing different sections
• Each section contains a CollectionView
• Items inside the CollectionView can toggle IsVisible at runtime

---

Problem

When switching between sections or when individual items toggle visibility:

• Spacing between items becomes inconsistent
• Hidden items still appear to occupy space (or spacing is not recalculated correctly)
• Layout does not properly reflow after visibility changes
• In some cases, extra gaps appear where hidden items exist

This leads to a visually broken layout, especially when multiple items toggle visibility dynamically.

---

Expected Behavior

• When an item’s IsVisible is set to false, it should not occupy space
• Item spacing (ItemSpacing in LinearItemsLayout) should be recalculated correctly
• Layout should reflow immediately after visibility changes or section switching

---

Actual Behavior

• Layout spacing remains as if hidden items are still present
• Gaps appear between visible items
• Switching sections sometimes preserves incorrect layout measurements

---

Simplified XAML Structure

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Views.DeviceSettingsPage"
             x:Name="Page">

    <Grid RowDefinitions="50, *, Auto">
        
        <ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Never">
            <HorizontalStackLayout BindableLayout.ItemsSource="{Binding SettingsGroups}"
                                   RadioButtonGroup.GroupName="MenuCategories"
                                   RadioButtonGroup.SelectedValue="{Binding SelectedGroup, Mode=TwoWay}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <HorizontalStackLayout VerticalOptions="Fill">
                            <RadioButton Content="{Binding Title}" Value="{Binding .}" />
                        </HorizontalStackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </HorizontalStackLayout>
        </ScrollView>

        <VerticalStackLayout Spacing="16"
                                 Grid.Row="1"
                                 Padding="16"
                                 BindableLayout.ItemsSource="{Binding SettingsGroups}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Grid IsVisible="{Binding IsActive}">
                            
                            <CollectionView ItemsSource="{Binding SettingsItems}" SelectionMode="None">
                                <CollectionView.ItemsLayout>
                                    <LinearItemsLayout Orientation="Vertical" ItemSpacing="16"/>
                                </CollectionView.ItemsLayout>
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid IsVisible="{Binding IsVisible}">
                                            <Label Text="{Binding Title}" />
                                            <Label Text="{Binding Value}" Grid.Column="1" />
                                        </Grid>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                            
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </VerticalStackLayout>
        
        <Button Grid.Row="2" Text="Save Configuration" Margin="16" />
    </Grid>
</ContentPage>

Each item inside Items has:

IsVisible="{Binding IsVisible}"

---

Notes / Observations

• Issue appears when:

  • Switching active section
  • Updating IsVisible on items dynamically

• Removing hidden items from the collection entirely fixes the issue (but is not always feasible)

• Forcing layout updates manually does not consistently resolve the problem

---

Questions

1. Is CollectionView expected to fully re-measure layout when IsVisible changes on item templates?

2. Is this a known limitation or bug with virtualization or layout invalidation?

3. What is the recommended approach for dynamic visibility:

   • Toggle IsVisible
   • Or physically add/remove items from the collection?

4. Is there a reliable way to force layout recalculation for CollectionView items?

---

Environment

• .NET MAUI version: .NET9
• Platforms tested: Android (iOS-Not tested yet)

[MukundaKatta]

CollectionView doesn't recalculate layout on IsVisible changes — it only reflows on ItemsSource changes. The workaround is filtering: keep an ObservableCollection for the visible set and toggle items in/out of it instead of toggling IsVisible. Another option is wrapping in a CollectionViewHandler subclass that calls InvalidateMeasure on the inner native view when visibility changes, but the filtered-source approach is the supported one.

[pallav1111]

@MukundaKatta,

Thanks for the suggestion. That approach works as a workaround, but for complex views and bindings like this, I’d rather avoid relying on hacks.

From my experience, this kind of issue highlights that .NET MAUI still has some gaps compared to Xamarin.Forms in terms of stability with complex UI scenarios.

After trying multiple approaches, I ended up switching to a BindableLayout inside a ScrollView instead of using CollectionView. This removed the need for any workarounds and handled the complexity much more reliably.

Here’s the structure I used:

<Grid Grid.Row="1"
      Margin="0,0,0,16"
      AutomationId="ContentView"
      BindableLayout.ItemsSource="{Binding Sections}"
      IsVisible="{Binding IsLoading, Converter={StaticResource InvertedBoolConverter}}"
      VerticalOptions="Fill">

    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:Section">
            <ScrollView IsVisible="{Binding IsActive}">
                <VerticalStackLayout
                    Spacing="16"
                    BindableLayout.ItemsSource="{Binding InfoItems}"
                    BindableLayout.ItemTemplateSelector="{StaticResource InfoSelector}" />
            </ScrollView>
        </DataTemplate>
    </BindableLayout.ItemTemplate>

</Grid>

This approach handled the nested and dynamic content cleanly, and might be useful for others dealing with similar scenarios.