question

Dave010 avatar image
0 Votes"
Dave010 asked LeonLu-MSFT commented

How to Get and Set Height of CollectionView item at index 'x'?

How do I get and set the height of CollectionView item at index = x?

I have three separate CollectionView where I need the items at index = x to be of matching height. The plan for this is to get the height of each container at index = x when a property is changed, see which has the highest potential, and then set each containers height to said potential.

I do not see any method to grab the childs height at a certain index. At this point I'm thinking of just creating a container object that has height as a property that will be binded, set, and then measured against each containing object. But this seems complex for no reason. Thought i'd check here before I moved forward.

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

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

You can add Height property in your model like following code.

public class Note
    {
        //  public string NotebookName { get; set; }
        public int MyHeight { get; set; }

        public int MyWidth { get; set; }
        public string Item1 { get; set; }
        public string Item2 { get; set; }

        public string Item3 { get; set; }


        public string ImgPath { get; set; }
    }


Then, you can bind the property in the Height of CollectionView's item.

<CollectionView x:Name="myCollectionView"  ItemsSource="{Binding NotebooksCollection}"
                IsGrouped="true">
          
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}"
                   BackgroundColor="LightGray"
                
                   FontAttributes="Bold" />
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>


            <CollectionView.ItemTemplate>
                <DataTemplate>
                                                                                      <!--               binding value here            -->
                    <StackLayout Orientation="Vertical" BackgroundColor="Red" HeightRequest="{Binding MyHeight}"  WidthRequest="{Binding MyWidth}">
                        <StackLayout.GestureRecognizers>

                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>

                        <Button Text="change" Command="{Binding Path=BindingContext.ChangeCommand, Source={x:Reference Name=myCollectionView}}"  
                                       CommandParameter="{Binding .}"></Button>
                        <Label 
                       Text="{Binding Item1}"
                       FontAttributes="Bold" />
                        <Label 
                       Text="{Binding Item2}"
                       FontAttributes="Bold"
                       />
                        <Label 
                       Text="{Binding Item3}"
                       FontAttributes="Bold"
                       />
                    </StackLayout>

                </DataTemplate>
            </CollectionView.ItemTemplate>
            
        </CollectionView>


Then you change it in the ViewModel. I make a Button in the item of Collectionview, add command in Button,after click the button, the item height will be increased.

ChangeCommand = new Command((parameter) =>
            {
                var note = parameter as Note;

                note.MyHeight += 10;
            });


Here is running screenshot.

107427-image.png

Best Regards,

Leon Lu



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.



image.png (27.9 KiB)
· 1
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.

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·