CollectionView Auto Height based on its content

Question

CollectionView Auto Height based on its content

Gopi Vissa 1

I tried with below code and by setting static height as 95 to the inner collectionview datatemplpate Grid. But i need to set the grid height dynamically. Any help is appritiated.

ViewModel:

foreach (var header in HeaderListData)
            {
                header.DETAILS_LIST_HEIGHT = header.DETAILS_LIST.Count * 95;
            }

View:

<ScrollView x:Name="mainContent"
                    BackgroundColor="#f4f4f4">
            <StackLayout x:Name="headerList" 
                              BindableLayout.ItemsSource="{Binding HeaderListData,Mode=TwoWay}"
                              Spacing="0"
                              BindableLayout.EmptyView="No items to display"
                              HeightRequest="1500">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <xct:Expander x:Name="expander" 
                              IsExpanded="{Binding IS_EXPANDED, Mode=TwoWay}"
                              Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.ExapndedCommand}"
                              CommandParameter="{Binding .}">

                            <!--Expander Content-->
                            <xct:Expander.ContentTemplate>
                                <DataTemplate>
                                    <CollectionView x:Name="detailsList"
                                                    ItemsSource="{Binding DETAILS_LIST,Mode=TwoWay}"
                                                    EmptyView="No items to display"
                                                    BackgroundColor="#ffffff"
                                                    HeightRequest="{Binding DETAILS_LIST_HEIGHT,Mode=TwoWay}"
                                                    MinimumHeightRequest="50"
                                                    ItemsUpdatingScrollMode="KeepItemsInView">
                                        <CollectionView.ItemTemplate>
                                            <DataTemplate>
                                                <!--SwipView-->
                                                <SwipeView x:Name="swipeView"
                                                           IsEnabled="{Binding Path=STATUS , Converter={StaticResource EnabledSwipeViewOnlyForDoneStatusConverter}}">
                                                    <!--SwipView RightItems-->
                                                    <SwipeView.RightItems>
                                                        <SwipeItems>
                                                            <SwipeItem Text="PRINT"
                                                                       IsVisible="{Binding IS_VISIBLE_PRINT_NOW,Mode=TwoWay}"
                                                                       IconImageSource="Images/printing.png"
                                                                       BackgroundColor="#934c78"
                                                                       Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.NowItemCommand}"
                                                                       CommandParameter="{Binding .}"/>
                                                            <SwipeItem Text="EDIT"
                                                                       IsVisible="{Binding IS_VISIBLE_EDIT,Mode=TwoWay}"
                                                                       IconImageSource="Images/edit.png"
                                                                       BackgroundColor="#6a6a6a" 
                                                                       Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.EditItemCommand}"
                                                                       CommandParameter="{Binding .}"/>
                                                            <SwipeItem Text="RESET"
                                                                       IsVisible="{Binding IS_VISIBLE_PRINT_LATER,Mode=TwoWay}"
                                                                       IconImageSource="Images/printing.png"
                                                                       BackgroundColor="#dd2a2a"
                                                                       Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.LaterItemCommand}"
                                                                       CommandParameter="{Binding .}"/>
                                                        </SwipeItems>
                                                    </SwipeView.RightItems>
                                                    <Grid x:Name="grdList"
                                                          Padding="15,5,0,0"
                                                          BackgroundColor="Red"
                                                          HeightRequest="95">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="1*" />
                                                            <ColumnDefinition Width="5*" />
                                                            <ColumnDefinition Width="3*" />
                                                        </Grid.ColumnDefinitions>
                                                        <Image Grid.Row="0"
                                                               Grid.Column="0"
                                                               Margin="0,5,0,0"
                                                               Source="Images/rightarrow.png"
                                                               VerticalOptions="Start"
                                                               HorizontalOptions="Start"
                                                               Aspect="AspectFit"
                                                               IsVisible="{Binding Path=STATUS, Converter={StaticResource SelectedStatusIconVisibleConverter}}">
                                                            <!--<Image.GestureRecognizers>
                                                                <TapGestureRecognizer Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.ImgToolBarcommand}"/>
                                                            </Image.GestureRecognizers>-->
                                                        </Image>
                                                        <CheckBox Grid.Row="0"
                                                                  Grid.Column="0"
                                                                  Color="#9ebf45"
                                                                  VerticalOptions="StartAndExpand"
                                                                  HorizontalOptions="Start"
                                                                  IsVisible="{Binding Path=STATUS, Converter={StaticResource CheckBoxVisibleConverter}}"
                                                                  IsChecked="{Binding DONE_STATUS, Mode=TwoWay}">
                                                        </CheckBox>
                                                        <StackLayout Grid.Row="0"
                                                                     Grid.Column="1"
                                                                     Spacing="2">
                                                            <Label VerticalOptions="Center"
                                                                   TextColor="#232323"
                                                                   Text="{Binding ITEM_ID,Mode=TwoWay}"
                                                                   FontAttributes="Bold"
                                                                   FontSize="16">
                                                            </Label>
                                                            <Label VerticalOptions="Center"
                                                                   TextColor="#232323"
                                                                   Text="{Binding ITEM_DESC, Mode=TwoWay}"
                                                                   LineBreakMode="TailTruncation"
                                                                   FontAttributes="Bold"
                                                                   FontSize="14">
                                                            </Label>
                                                            <Label VerticalOptions="Center"
                                                                   TextColor="#000000"
                                                                   Text="{Binding BIN, StringFormat='BIN: {0}'}"
                                                                   LineBreakMode="WordWrap"
                                                                   FontAttributes="Bold"
                                                                   Opacity="0.66"
                                                                   FontSize="14">
                                                            </Label>
                                                            <Label VerticalOptions="Center"
                                                                   TextColor="#000000"
                                                                   Text="{Binding MFG, StringFormat='MFG#: {0}'}"
                                                                   LineBreakMode="WordWrap"
                                                                   FontAttributes="Bold"
                                                                   Opacity="0.66"
                                                                   FontSize="14">
                                                            </Label>
                                                        </StackLayout>
                                                        <StackLayout Grid.Row="0"
                                                                     Grid.Column="2"
                                                                     Spacing="1"
                                                                     Margin="0,0,20,0">
                                                            <!--ios:Entry.CursorColor="#000000"-->
                                                            <controls:StandardEntry x:Name="txtQty"
                                                                   FontAttributes="Bold"
                                                                   BorderColor="#61c1ba"
                                                                   HorizontalTextAlignment="End"
                                                                   BorderThickness="3"
                                                                   FontSize="Medium"
                                                                   HeightRequest="50"
                                                                   CornerRadius="3"
                                                                   Text="{Binding QTY,Mode=TwoWay}"
                                                                   TextColor="#000000"
                                                                   BackgroundColor="#ffffff"
                                                                   Keyboard="Numeric"
                                                                   IsVisible="{Binding Path=STATUS, Converter={StaticResource DisplayQtyTextBoxConverter}}"
                                                                   ReturnCommand="{Binding Source={x:Reference MyPage}, Path=BindingContext.DoneCommand}">
                                                                <controls:StandardEntry.ReturnCommandParameter>
                                                                    <MultiBinding Converter="{StaticResource MultiCommandParameterConverter}">
                                                                        <Binding Source="{x:Reference txtQty}"/>
                                                                        <Binding/>
                                                                    </MultiBinding>
                                                                </controls:StandardEntry.ReturnCommandParameter> >
                                                            </controls:StandardEntry>
                                                            <StackLayout Spacing="0"
                                                                         Orientation="Horizontal"
                                                                         HorizontalOptions="End">
                                                                <Label 
                                                                      FontSize="Medium"
                                                                      Text="{Binding QTY, Mode=TwoWay}"
                                                                      HorizontalTextAlignment="End"
                                                                      TextColor="#9ebf45"
                                                                      LineHeight="1.2"
                                                                      FontFamily="Roboto"
                                                                      FontAttributes="Bold"
                                                                      IsVisible="{Binding Path=STATUS, Converter={StaticResource DisplayQtyLabelForDoneStatusConverter}}"/>
                                                                <Label Text="/"
                                                                       FontSize="Medium"
                                                                       HorizontalTextAlignment="Center"
                                                                       TextColor="#232323"
                                                                       FontFamily="Roboto"
                                                                       Opacity="0.68"
                                                                       LineHeight="1.2"
                                                                       FontAttributes="Bold"
                                                                       IsVisible="{Binding Path=STATUS, Converter={StaticResource DisplayQtyLabelForDoneStatusConverter}}"/>
                                                                <Label 
                                                                       FontSize="16"
                                                                       FontFamily="Roboto"
                                                                       LineHeight="1.2"
                                                                       Text="{Binding PAR_QTY}"
                                                                       HorizontalTextAlignment="End"
                                                                       TextColor="#232323"
                                                                       Opacity="0.68"
                                                                       FontAttributes="Bold">
                                                                </Label>
                                                            </StackLayout>
                                                        </StackLayout>
                                                        <BoxView Grid.Row="1"
                                                                 Grid.Column="1"
                                                                 Grid.ColumnSpan="2"
                                                                 HeightRequest="0.5"
                                                                 VerticalOptions="End"
                                                                 Opacity="0.5"
                                                                 Color="#000000"/>
                                                        <Grid.GestureRecognizers>
                                                            <TapGestureRecognizer Command="{Binding Source={x:Reference MyPage}, Path=BindingContext.GridTappedCommand}" >
                                                                <TapGestureRecognizer.CommandParameter>
                                                                    <MultiBinding Converter="{StaticResource MultiCommandParameterConverter}">
                                                                        <Binding Source="{x:Reference grdList}"/>
                                                                        <Binding/>
                                                                    </MultiBinding>
                                                                </TapGestureRecognizer.CommandParameter>
                                                            </TapGestureRecognizer>
                                                        </Grid.GestureRecognizers>
                                                        <!--<Grid.Behaviors>
                                                        <behaviors:CollectionViewHightBehavior/>
                                                        </Grid.Behaviors>-->
                                                    </Grid>
                                                </SwipeView>
                                                <!--SwipView-->
                                            </DataTemplate>
                                        </CollectionView.ItemTemplate>
                                    </CollectionView>
                                </DataTemplate>
                            </xct:Expander.ContentTemplate>
                        </xct:Expander>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </ScrollView>

emphasized text

1 answer

Your answer

Answer 1

JarvanZhang 23,971

Hello,

Welcome to our Microsoft Q&A platform!

setting static height as 95 to the inner collectionview datatemplpate Grid. But i need to set the grid height dynamically.

To set dynamic height for each item of the collectionView, please dont' specify a fixed value for the height the item's layout. Just use the Grid to wrap the views and set the RowDefinition to Auto.

   <CollectionView x:Name="grdList" Padding="15,5,0,0" BackgroundColor="Red">  
       <CollectionView.ItemTemplate>  
           <DataTemplate>  
               <Grid>  
                   <Grid.RowDefinitions>  
                       <RowDefinition Height="Auto"/>  
                   </Grid.RowDefinitions>  
                   <Label Text="{Binding Content}"/>  
               </Grid>  
           </DataTemplate>  
       </CollectionView.ItemTemplate>  
   </CollectionView>

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.

Gopi Vissa 1

Hi JarvanZhang-MSFT,

        I used rowdefinition height as auto if you observe clearly. I set grid height with some static value why because i need to set the collectionview height based on no.of items. So if static height is not correct , then can you please help to set the value dynamically.

Thanks Advance.

JarvanZhang 23,971

because i need to set the collectionview height based on no.of items

Do you mean setting a height for the collectionView when there is no items? If so, try using the EmptyView like:

<CollectionView SelectionChanged="CollectionView_SelectionChanged">
    <CollectionView.EmptyView>
        <StackLayout HeightRequest="95">
            <!--the content-->
        </StackLayout>
    </CollectionView.EmptyView>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Gopi Vissa 1 Reputation point

2021-02-23T13:11:13.74+00:00

No...EmptyView is already there..i Want to remove the white space when there is 2 or 3 items . i.e. I want to set collectionview height based on its content.
JarvanZhang 23,971 Reputation points

2021-02-23T13:26:04.64+00:00

To set collectionview height based on its content, set the RowDefinition to Auto. Could you share the details about why setting a static height (95) to the grid?

Share via

CollectionView Auto Height based on its content

1 answer

Your answer