I have an Expander in a CollectionView

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>

Answer 1

Hi MrZeeIndo-6537,

Welcome to our Microsoft Q&A platform!

According to the document, we can know that the Expander control is known to show unwanted behavior when used in a ListView or CollectionView.

A workaround is binding command for the label and manually modify the height of the Grid.

<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>  
                <Label Text="Test Label"/>  
                <BoxView Color="Gray"  
                            HeightRequest="2"  
                            HorizontalOptions="Fill" Grid.Row="1" />  
                <xct:Expander Grid.Row="2">  
                    <xct:Expander.Header>  
                        <Label Text="{Binding PetName}"  
                                        HorizontalTextAlignment="Center">  
                            <Label.GestureRecognizers>  
                                <TapGestureRecognizer   
                                            Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=CloseCommand}"   
                                            CommandParameter="{Binding .}"/>  
                            </Label.GestureRecognizers>  
                        </Label>  
                    </xct:Expander.Header>  
                    <Grid RowDefinitions="20*,20*,20*,20*"   
                              HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=Height}">  
                        <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>  

viewmodel:

class MainPageViewModel : INotifyPropertyChanged  
{  
    public ICommand CloseCommand { get; }  
    public ObservableCollection<Pet> EmptyPetInfo { get; set; }  
  
    int height;  
    public int Height  
    {  
        get  
        {  
            return height;  
        }  
        set  
        {  
            height = value;  
            OnPropertyChanged("Height");  
        }  
    }  
  
    public MainPageViewModel()  
    {  
        EmptyPetInfo = new ObservableCollection<Pet>();  
        for (int i = 0; i < 10; i++)  
        {  
            EmptyPetInfo.Add(new Pet { PetName = $"name{i}", Breed = $"breed{i}", DOB = $"dob{i}", Gender = $"gender{i}", Weight = $"weight{i}", Flag = false});  
        }  
        CloseCommand = new Command<Pet>(Close);  
        Height = 100;  
    }  
  
    void Close(object arg)  
    {  
        Pet pet = arg as Pet;  
        pet.Flag = !pet.Flag;  
        if (!pet.Flag)  
        {  
            Height = 0;  
        }  
        else  
        {  
            Height = 100;  
        }  
    }  
  
    public event PropertyChangedEventHandler PropertyChanged;  
  
    protected void OnPropertyChanged(string propertyName)  
    {  
        var handler = PropertyChanged;  
        if (handler != null)  
            handler(this, new PropertyChangedEventArgs(propertyName));  
    }  
}  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.