MAUI CollectionView DataTemplates Ignoring HorizontalOptions

Question

I have a CollectionView with a couple DataTemplates for a custom control that allows users to order a list of items by dragging and dropping between groups. When my project was Xamarin Forms, the controls inside the DataTemplate would expand and fill horizontally. In MAUI, the controls are stuck to the left regardless of the value of HorizontalOptions. But this only appears to the be case with Android. It behaves as expected when running on a Windows Machine. I have not tested this in iOS.

I've added the BackgroundColors and MinimumWidthRequest for clarity and testing. The CollectionView itself has a Gainsboro background. As you can see, it extends horizontally as expected. However, the StackPanels for the groups are DarkRed and the products are Red. They should extend across the entire available space and they don't. Despite explicitly specifying HorizontalOptions="FillAndExpand".

Here's the code. I removed the gesture recognizers parts for simplicity.

<CollectionView  
  x:Name="GroupableItemsCollectionView"  
  Background="Gainsboro"  
  HeightRequest="{Binding CollectionViewHeight}"  
  IsGrouped="True"  
  ItemsSource="{Binding Groups}">  
  <CollectionView.GroupHeaderTemplate>  
   <DataTemplate>  
    <StackLayout  
     x:DataType="vm:ItemsGroupViewModel"  
     Background="DarkRed"  
     HorizontalOptions="FillAndExpand"  
     MinimumWidthRequest="350">  
     <Grid Margin="0,5,0,0" BackgroundColor="{StaticResource SoftBlueColor}">  
      <Label  
       Margin="5,0,0,0"  
       FontSize="24"  
       HeightRequest="50"  
       Text="{Binding Text}"  
       VerticalTextAlignment="Center" />  
     </Grid>  
     <Grid  
      Margin="5,0,5,0"  
      BackgroundColor="{StaticResource SoftBlueColor}"  
      HeightRequest="30"  
      IsVisible="{Binding IsBeingDraggedOver, FallbackValue=False}" />  
    </StackLayout>  
   </DataTemplate>  
  </CollectionView.GroupHeaderTemplate>  
  <CollectionView.ItemTemplate>  
   <DataTemplate>  
    <StackLayout  
     Padding="5,5,5,0"  
     x:DataType="vm:ItemViewModel"  
     Background="Red"  
     HorizontalOptions="FillAndExpand"  
     MinimumWidthRequest="325">  
     <Grid BackgroundColor="Azure">  
      <Label  
       HeightRequest="50"  
       HorizontalTextAlignment="Center"  
       Text="{Binding Text}"  
       VerticalTextAlignment="Center">  
      </Label>  
     </Grid>  
     <Grid  
      BackgroundColor="{StaticResource SoftBlueColor}"  
      HeightRequest="30"  
      IsVisible="{Binding IsBeingDraggedOver, FallbackValue=False}" />  
    </StackLayout>  
   </DataTemplate>  
  </CollectionView.ItemTemplate>  
 </CollectionView>  

Answer 1

Okay. After banging my head on this for most of the week, I finally figured it out. There are two problems with my code snippet here that work fine in Xamarin Forms, but break MAUI.

Fist off, ALL CollectionViews in MAUI need these lines of formatting, or a global style. Without them, they behave badly.

  <CollectionView.ItemsLayout>  
   <GridItemsLayout Orientation="Vertical" />  
  </CollectionView.ItemsLayout>  

Secondly for this collection in particular, this line of XAML breaks the HorizontalOptions:

HeightRequest="{Binding CollectionViewHeight}"

With those two changes, the CollectionView is behaving as expcted.