0

I am using Xamarin.Forms 5 with Community Toolkit 1.02. The Expander seems to work fine with static content in the body but when I add a CollectionView the bottom part of the content is getting cut off.

If I scroll outside of the initially visible area the items show up. Below is the simplified XAML and model I used for the short animation. What am I doing wrong?

XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="Sandbox.Views.ExpanderPage">
    <ContentPage.Content>
        <xct:Expander>
            <xct:Expander.Header>
                <Label Text="Header" Padding="20" BackgroundColor="LightCyan"/>
            </xct:Expander.Header>
            <StackLayout HeightRequest="160" BackgroundColor="Aquamarine">
                <CollectionView
                            ItemsSource="{Binding Items}"
                            VerticalOptions="End" 
                            SelectionMode="Single">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout 
                                WidthRequest="160"
                                HeightRequest="160"
                                BackgroundColor="Orange"
                                Spacing="0">
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </xct:Expander>
    </ContentPage.Content>
</ContentPage>

The Model:

public class ExpanderViewModel : BaseViewModel
{
    public ObservableCollection<ExpanderItem> Items { get; }
    public ExpanderViewModel()
    {
        Items = new ObservableCollection<ExpanderItem>() { 
            new ExpanderItem(){Text = "Item 1" },
            new ExpanderItem(){Text = "Item 2" },
            new ExpanderItem(){Text = "Item 3" },
            new ExpanderItem(){Text = "Item 4" },
        };
    }
}

public class ExpanderItem
{
    public string Text { get; set; }
}

enter image description here

Cfun
  • 8,442
  • 4
  • 30
  • 62
Yosh
  • 23
  • 7

1 Answers1

1

Since ItemSpacing="0" and by the way it is the default value so you should omit it,

replace

<CollectionView.ItemsLayout>
     <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal"/>
</CollectionView.ItemsLayout>

By

<CollectionView.ItemsLayout>
     <GridItemsLayout Orientation="Horizontal"/>
</CollectionView.ItemsLayout>
Cfun
  • 8,442
  • 4
  • 30
  • 62