如何调整 BindableLayout 中网格每一行的高度以适应内容的高度？
How can I adjust height of ever row of a grid in BindableLayout to fit the content's height?
我正在 iOS 和 Android 上开发跨平台应用程序。
现在我想在一个大网格中显示一些搜索结果，每个单元格都可以点击。每行应该有 3 个结果，并且同一行中的每个单元格应该具有相同的高度和阴影框。每个结果可能有不同的高度。
这是一张展示我想要的图像（就像Excel）：
首先，我尝试使用 BindableLayout Grid，它有一个索引项目列表。每个项目都有一个 Row 和一个 Col 属性 来填充到一个单元格中。但是网格的高度是不同的。
这是 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>
喜欢下面。 emmmmm，不好（一个 BindableLayout Grid）：
然后，我尝试在 BindableLayout StackLayout 中使用嵌套的 BindableLayout Grid（只有一行）。 StackLayout 中的每个项目都是一个列表，列表中的每个项目都有一个 Col 属性 来填充到一个单元格中。做得好一点但还不够，因为一些短文本仍然会留有大空白，而有些文本的行高不同。
<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>
它的作用是这样的（BindableLayout StackLayout 中的一个 BindableLayout Grid）：
那么有什么方法可以调整网格每一行的高度以适应内容的高度，一行中的每个单元格都具有相同的高度，高度是内容的最大高度（可以添加一些边距).
添加了 1.======================
我尝试了集合视图。它也不太好用。
Xamarin 如下。
<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>
这是结果。嗯，不太好。
CollectionView result
正如我上面提到的，在隐藏框架中添加隐藏标签可以解决这个问题。此外，我将 Button 的 HeightRequest 设置为较小的值（仅 1 行）并将 Margin 设置为固定值（仅 5）。
这是代码。
<?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>
洞项目在github
这是结果。
result
我不知道另一个框架和另一个标签是否有任何性能问题。
有没有更好的解决办法？
我自己测试了一下，我发现内部网格的RowDefinitions是自动的，如果你把它设置为“*”，单元格将具有相同的heigt.As微软文档关于网格长度的描述:
GridLength 结构根据 GridUnitType 枚举指定行高或列宽，它具有三个成员：
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).
我正在 iOS 和 Android 上开发跨平台应用程序。
现在我想在一个大网格中显示一些搜索结果，每个单元格都可以点击。每行应该有 3 个结果，并且同一行中的每个单元格应该具有相同的高度和阴影框。每个结果可能有不同的高度。
这是一张展示我想要的图像（就像Excel）：
首先，我尝试使用 BindableLayout Grid，它有一个索引项目列表。每个项目都有一个 Row 和一个 Col 属性 来填充到一个单元格中。但是网格的高度是不同的。 这是 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>
喜欢下面。 emmmmm，不好（一个 BindableLayout Grid）：
然后，我尝试在 BindableLayout StackLayout 中使用嵌套的 BindableLayout Grid（只有一行）。 StackLayout 中的每个项目都是一个列表，列表中的每个项目都有一个 Col 属性 来填充到一个单元格中。做得好一点但还不够，因为一些短文本仍然会留有大空白，而有些文本的行高不同。
<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>
它的作用是这样的（BindableLayout StackLayout 中的一个 BindableLayout Grid）：
那么有什么方法可以调整网格每一行的高度以适应内容的高度，一行中的每个单元格都具有相同的高度，高度是内容的最大高度（可以添加一些边距).
添加了 1.======================
我尝试了集合视图。它也不太好用。 Xamarin 如下。
<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>
这是结果。嗯，不太好。 CollectionView result
正如我上面提到的，在隐藏框架中添加隐藏标签可以解决这个问题。此外，我将 Button 的 HeightRequest 设置为较小的值（仅 1 行）并将 Margin 设置为固定值（仅 5）。
这是代码。
<?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>
洞项目在github 这是结果。 result
我不知道另一个框架和另一个标签是否有任何性能问题。 有没有更好的解决办法？
我自己测试了一下，我发现内部网格的RowDefinitions是自动的，如果你把它设置为“*”，单元格将具有相同的heigt.As微软文档关于网格长度的描述:
GridLength 结构根据 GridUnitType 枚举指定行高或列宽，它具有三个成员：
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).