Xamarin.Forms：定位标签和设置行高的问题？答案

【问题标题】：Xamarin.Forms: issues positioning labels and setting row height?Xamarin.Forms：定位标签和设置行高的问题？
【发布时间】：2019-07-17 17:03:06
【问题描述】：

我的 xaml 有 6 个显示数据的标签。我正在尝试设置它们，但我在这样做时遇到了麻烦。这就是 form 的呈现方式：

这是我迄今为止尝试过的。这是xml：

<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">

    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" x:Name="MapGrid">
            <maps:Map WidthRequest="960" HeightRequest="200" 
                  x:Name="MyMap" IsShowingUser="true"/>
        </StackLayout>
        <StackLayout Grid.Row="1">
            <Button Text="Show list" x:Name="Button_DisplayList"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        </StackLayout>
        <StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
            <ListView x:Name="ListView_Pets">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10,10,10,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="300"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="200"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackLayout BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="0" HeightRequest="300" WidthRequest="200">
                                    <Label Text="{Binding Name}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Description}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Lon}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Lat}" FontSize="16" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </Grid>

</ContentPage>

这就是结果。它显然不像上图：

除了标签的所有问题之外，行高似乎没有改变：<RowDefinition Height="300"> 没有任何改变，HeightRequest="200" 也没有改变。

感谢任何帮助。

【问题讨论】：

ListView 有一个 RowHeight 属性。您也可以尝试设置 ViewCell 的高度。

标签： c# xamarin xamarin.forms visual-studio-2017 xamarin.forms.listview

【解决方案1】：

您的 ViewCell 定义定义了一个 Grid，其中包含一个单元格（一行和一列。从您的 UI 示例中，它看起来更像是您想要的 2 列和 3 行，如下所示：

<ViewCell>
    <Grid Padding="10,10,10,10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Text="{Binding Name}" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
        <Label Text="{Binding Description}" FontSize="15" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
        <Label Text="{Binding Lon}" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="1"/>
        <Label Text="{Binding Lat}" FontSize="16" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="1"/>
    </Grid>
</ViewCell>

这是基于您拥有的代码示例，因此不会完全实现 UI 设计，但应该更接近。关键是将标签放在网格中自己的单元格中，而不是将它们全部放在一个 StackLayout 中。

您可能还需要设置 RowHeight（如 Jason 所述）或在 ListView 上设置 HasUnevenRows="true"。

【讨论】：