xamarinxamarin.formsuicollectionviewexpander

I have an Expander in a CollectionView


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

Solution

  • 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. enter image description here

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