question

LitvinVadim-1224 avatar image
0 Votes"
LitvinVadim-1224 asked DerekFoulk-0195 edited

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

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>

85389-device-2021-04-07-222324.png



dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered DerekFoulk-0195 edited

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.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LitvinVadim-1224 I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·

@JarvanZhang-MSFT What you recommend here does nothing to affect the height of the CollectionView element.

What we want to know is how to make CollectionView set its own height automatically. By default, CollectionView elements expand to fill all available vertical space in their parent element. I believe that the ListView element did the same thing.

What I expected CollectionView to do:
When the CollectionView contains three items that are 50px tall, I expected the CollectionView height to be 150px (3 items x 50px tall = 150px).

What CollectionView actually does:
With any number of 50px tall items (1-Infinite), the CollectionView element's height is equal to the total height of the page (greater if there is an element preceding it).

0 Votes 0 ·