Xamarin.Forms：定位标签和设置行高有问题吗？

Question

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

以下是我目前尝试过的方法。这是 xaml:

<?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".

也没有改变

感谢任何帮助。

Answer 1

您的 ViewCell 定义定义了一个网格，其中有一个单元格（一行和一列。从您的 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"。

Xamarin.Forms：定位标签和设置行高有问题吗？

Xamarin.Forms: issues positioning labels and setting row height?

c#

xamarin

xamarin.forms

xamarin.forms.listview

visual-studio-2017