I have an Expander in a CollectionView - xamarin

Question

I have a collection view of Pets. With an Image and Name. When you click on the name it enables the expander and you can view the details of the pet. This works with one draw back. naturally when the expander expands it takes up space how ever when it is !expanded the space it took up is just left blank is there away to get rid of this space?
My Collection View:
<CollectionView x:Name="PetCollection" ItemsSource="{Binding EmptyPetInfo}" Margin="65,0,10,0" HeightRequest="400">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid x:Name="PetCollectionGrid" Padding="0" ColumnDefinitions="140,140" >
<Grid.RowDefinitions>
<RowDefinition Height = "140"/>
<RowDefinition Height = "5"/>
<RowDefinition Height = "20*"/>
</Grid.RowDefinitions>
<xct:AvatarView Source="{Binding imageUrl}"
VerticalOptions="Center"
HorizontalOptions="Center"
Size="100"
CornerRadius="50"
Aspect="AspectFill">
</xct:AvatarView>
<BoxView Color="Gray"
HeightRequest="2"
HorizontalOptions="Fill" Grid.Row="1" />
<xct:Expander Grid.Row="2" Tapped="Expander_Tapped">
<xct:Expander.Header>
<Label Text="{Binding PetName}"
HorizontalTextAlignment="Center"/>
</xct:Expander.Header>
<Grid RowDefinitions="20*,20*,20*,20*">
<Label Text="{Binding Breed}"/>
<Label Text="{Binding DOB}" Grid.Row="1"/>
<Label Text="{Binding Gender}" Grid.Row="2"/>
<Label Text="{Binding Weight}" Grid.Row="3"/>
</Grid>
</xct:Expander>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
So a little update I have add this code in the Expander tapped. However this only works on the expanders in the last row. When it expands it takes space when it close the space goes away. The expanders in the middle and top take space when they expand but when they close it still leaves empty white space.
private void Expander_Tapped(object sender, EventArgs e)
{
Expander Expander = sender as Expander;
Grid grid = (Grid)Expander.Parent;
int index = Grid.GetRow(Expander);
RowDefinition rowdef = grid.RowDefinitions[index];
if (Expander.IsEnabled)
{
rowdef.Height = new GridLength(1,
Expander.IsExpanded ? GridUnitType.Star : GridUnitType.Auto);
}
else
{
rowdef.Height = new GridLength(0,
!Expander.IsExpanded ? GridUnitType.Absolute : GridUnitType.Absolute);
}
}

Answer 1

I was able to reproduce this issue with the code you provided. When you scroll up the AB line, it would remove the white space.
A easy way is to use the RefreshView to refresh the page. Binding a IsRefreshing property to control the refresh.
Xaml:
<RefreshView IsRefreshing="{Binding isRefreshing}">
<CollectionView x:Name="PetCollection" ItemsSource="{Binding EmptyPetInfo}" Margin="65,0,10,0" HeightRequest="400">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid x:Name="PetCollectionGrid" ColumnDefinitions="140,140" >
<Grid.RowDefinitions>
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "Auto"/>
</Grid.RowDefinitions>
<xct:AvatarView Source="{Binding imageUrl}"
VerticalOptions="Center"
HorizontalOptions="Center"
Size="100"
CornerRadius="50"
Aspect="AspectFill">
</xct:AvatarView>
<BoxView Color="Gray"
HeightRequest="2"
HorizontalOptions="Fill" Grid.Row="1" />
<xct:Expander Grid.Row="2" Tapped="Expander_Tapped" >
<xct:Expander.Header>
<Label Text="{Binding PetName}"
HorizontalTextAlignment="Center"/>
</xct:Expander.Header>
<Grid RowDefinitions="20*,20*,20*,20*">
<Label Text="{Binding Breed}"/>
<Label Text="{Binding DOB}" Grid.Row="1"/>
<Label Text="{Binding Gender}" Grid.Row="2"/>
<Label Text="{Binding Weight}" Grid.Row="3"/>
</Grid>
</xct:Expander>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
Code behind:
public partial class MainPage : ContentPage
{
public ObservableCollection<PetInfo> EmptyPetInfo { get; set; }
public bool isRefreshing { get; set; }
public MainPage()
{
InitializeComponent();
isRefreshing = false;
EmptyPetInfo = new ObservableCollection<PetInfo>()
{
new PetInfo(){ Breed="Breed1", DOB="DOB1", Gender="F", PetName="A", Weight="1", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed2", DOB="DOB2", Gender="M", PetName="B", Weight="2", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed3", DOB="DOB3", Gender="F", PetName="C", Weight="13", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed4", DOB="DOB4", Gender="M", PetName="D", Weight="14", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed5", DOB="DOB5", Gender="F", PetName="E", Weight="1", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed6", DOB="DOB6", Gender="F", PetName="F", Weight="15", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed7", DOB="DOB7", Gender="F", PetName="G", Weight="12", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed8", DOB="DOB8", Gender="M", PetName="H", Weight="61", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed9", DOB="DOB9", Gender="F", PetName="I", Weight="16", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed10", DOB="DO010", Gender="F", PetName="J", Weight="61", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"},
new PetInfo(){ Breed="Breed11", DOB="DOB11", Gender="M", PetName="K", Weight="11", imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"}
};
this.BindingContext = this;
}
private void Expander_Tapped(object sender, EventArgs e)
{
Expander Expander = sender as Expander;
if (!Expander.IsExpanded)
{
isRefreshing = true;
}
}
}
public class PetInfo
{
public string imageUrl { get; set; }
public string PetName { get; set; }
public string Breed { get; set; }
public string DOB { get; set; }
public string Gender { get; set; }
public string Weight { get; set; }
}

Answer 2

Expander doc says "The Expander control is known to show unwanted behavior when used in a ListView or CollectionView. At this time we recommend not using a Expander in one of these controls.".
A possible work-around is to "replace" the item in the bound collection, forcing the layout to be re-drawn.
There might be other ways to force that item to be redrawn.

Answer 3

Currently using expanders in a collection view will keep giving you all sorts of trouble. A workaround I've used is to use a container like stacklayout or grid with a bindable layout to replace the collectionview.
This works really well if you have a collection with a limited amount of items. If you have a large collection, this isn't a good option and you should think about changing design to not use an expander.
https://devblogs.microsoft.com/xamarin/xamarin-forms-bindable-layout/