[Xamarin Forms] How to change collectionview size according sizes of its items

Question

Hey!

I am trying to create a custom Action Sheet using CollectionView, but I have a problem with auto resizing the height. When I insert the CollectionView into the page, it takes up all the free space. What needs to be done so that the height of the CollectionView changes depending on the height of its elements?

<?xml version="1.0" encoding="utf-8"?>  
  
<rx:ReactivePopupPage  
    x:TypeArguments="vm:InProgressPopupViewModel" xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    xmlns:rx="clr-namespace:OneVend.Views.ReactiveUIExtensions;assembly=OneVend"  
    xmlns:vm="clr-namespace:OneVend.ViewModels.ModalDialogs;assembly=OneVend"  
    xmlns:modalDialogs="clr-namespace:OneVend.Views.ModalDialogs;assembly=OneVend"  
    x:Class="OneVend.Views.ModalDialogs.ActionSheetPopupPage"  
    rx:CloseWhenBackgroundIsClicked='True'>  
  
    <StackLayout  
        Margin="60, 0">  
        <CollectionView  
            BackgroundColor="White"  
            x:Name="CollectionViewControl">  
  
            <CollectionView.Header>  
                <Label  
                    x:Name="HeaderLabel"  
                    TextTransform="Uppercase"  
                    HorizontalTextAlignment="Center"  
                    FontAttributes="Bold" />  
            </CollectionView.Header>  
  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <Grid Padding="0, 10" x:DataType="modalDialogs:ActionSheetItem">  
                        <Grid.ColumnDefinitions>  
                            <ColumnDefinition Width="8*" />  
                            <ColumnDefinition Width="2*" />  
                        </Grid.ColumnDefinitions>  
                        <Label Text="{Binding Name}" />  
                        <Image Grid.Column="1" Source="arrow_down" IsVisible="{Binding IsSelected}" />  
                    </Grid>  
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
  
            <CollectionView.Footer>  
                <Button  
                    BackgroundColor="Transparent"  
                    TextColor="Green"  
                    Text="Cancel"  
                    HorizontalOptions="End" />  
            </CollectionView.Footer>  
  
        </CollectionView>  
    </StackLayout>  
</rx:ReactivePopupPage>  

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

What needs to be done so that the height of the CollectionView changes depending on the height of its elements

To do this, please set the RowDefinition's value of the Grid to Auto. And specify the a fixed value to the imageView's HeightRequest. Check the code:

   <CollectionView.ItemTemplate>  
       <DataTemplate>  
           <Grid Padding="0, 10">  
               <Grid.RowDefinitions>  
                   <RowDefinition Height="Auto" />  
               </Grid.RowDefinitions>  
               <Grid.ColumnDefinitions>  
                   <ColumnDefinition Width="8*" />  
                   <ColumnDefinition Width="2*" />  
               </Grid.ColumnDefinitions>  
               <Label Grid.Row="0" Grid.Column="0" Text="{Binding xxx}" />  
               <Image Grid.Row="0" Grid.Column="1" Source="test" HeightRequest="35"/>  
           </Grid>  
       </DataTemplate>  
   </CollectionView.ItemTemplate>  

Best Regards,

Jarvan Zhang

---

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.