How can I adjust height of ever row of a grid in BindableLayout to fit the content's height?-CodePudding

I'm working on a cross platform app on both iOS and Android.
Now I want to display some searched result in a big grid, every cell can be clicked. There should be 3 results in every row, and every cell in a same row should has a same height with a shadow frame. Every result may have a different height.

Here is a image demonstrated what I want (just like Excel):

Firstly, I tried to use a BindableLayout Grid, which has an indexed item list. Every item has a Row and a Col property to fill into a cell. But the Grid's height is different. Here is the xaml.

<ContentPage.BindingContext>
    <mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
            <Grid BindableLayout.ItemsSource="{Binding GridResult}" ColumnDefinitions="*,*,*" RowDefinitions="Auto" VerticalOptions="StartAndExpand">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
                        <Grid x:Name="NestedGrid" Grid.Row="{Binding Row}" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
                            <!-- Frame for the corner radius and shadow.-->
                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
                                <!-- Label text is real display text.-->
                                <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                            </Frame>
                            <!-- Here placing a hole-cell button for a better click gesture. -->
                            <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </Grid>
        </ScrollView>
    </StackLayout>
</ContentPage.Content>

It likes below. emmmmm, not good (a BindableLayout Grid):

Then, I tried to use nested BindableLayout Grid(only one row) in a BindableLayout StackLayout. Every item in StackLayout is a list, every item in the list has a Col property to fill into a cell. Act a little better but not enough, for some short text will still hold large blank, and some has different height in a row.

<ContentPage.BindingContext>
    <mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
            <StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <!-- Every Grid has one row and 3 columns.-->
                        <Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
                                    <Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
                                        <!-- Frame for the corner radius and shadow.-->
                                        <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
                                            <!-- Label text is real display text.-->
                                            <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
                                        </Frame>
                                        <!-- Here placing a hole-cell button for a better click gesture. -->
                                        <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                                    </Grid>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentPage.Content>

It acts like this (a BindableLayout Grid in BindableLayout StackLayout):

So is there any way to adjust height of ever row of a grid to fit the content's height, with every cell in a row has the same height, the height is the max height of content(may be add some margin).

Added 1.======================

I tried the collection view. It not works well too. The Xamarin as follows.

<ContentPage.BindingContext>
    <mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Margin="5,50,5,0" >
        <Label Text="Result:" />
        <ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
            <CollectionView ItemsSource="{Binding GridResult}" VerticalOptions="StartAndExpand">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="3"
                                     VerticalItemSpacing="5"
                                     HorizontalItemSpacing="5" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
                        <Grid x:Name="NestedGrid" RowDefinitions="Auto" ColumnDefinitions="*" VerticalOptions="Start">
                            <!-- Frame for the corner radius and shadow.-->
                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
                                <!-- Label text is real display text.-->
                                <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
                            </Frame>
                            <!-- Here placing a hole-cell button for a better click gesture. -->
                            <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>
    </StackLayout>
</ContentPage.Content>

Here is the result. Emm, not well. CollectionView result

CodePudding user response：

As what i mentioned above, adding a hidden label in a hidden frame can solve this problem. Also I set the Button's HeightRequest to a small value(just 1 row) and set Margin to a fixed value(just 5).

Here is the code.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mvvm="clr-namespace:RecForYou.Mvvm"
             x:Class="RecForYou.GridInGridPage">
    <ContentPage.BindingContext>
        <mvvm:GridInGridViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout Margin="5,50,5,0" >
            <Label Text="Result:" />
            <ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
                <StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <!-- Every Grid has one row and 3 columns.-->
                            <Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
                                        <Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
                                            <!-- Frame for the corner radius and shadow.-->
                                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
                                                <!-- Label text is real display text.-->
                                                <Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
                                            </Frame>
                                            <Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0" BackgroundColor="Transparent">
                                                <!-- Label text is real display text.-->
                                                <Label Text="{Binding HiddenValue}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center" TextColor="Transparent"/>
                                            </Frame>
                                            <!-- Here placing a hole-cell button for a better click gesture. -->
                                            <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5" HeightRequest="10"/>
                                        </Grid>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

And the hole project is in github Here is the result. result

I don't know if there is any performance issues for another frame and another label. Is there any better solution?

CodePudding user response：

I did a test on myside and I found out that the RowDefinitions of inside grid is auto, if you set it as "*", the cells will have the same heigt.As microsoft document says about grid length:

The GridLength struct specifies a row height or a column width in terms of the GridUnitType enumeration, which has three members:

Auto – the row height or column width is autosized based on the cell contents (Auto in XAML).

Star – leftover row height or column width is allocated proportionally (a number followed by * in XAML).

Absolute – the row height or column width is a value in device-independent units (a number in XAML).