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; }
}