Xamarin 表单自定义单元格仅显示第一行

Question

我是 Xamarin 表单的新手，我想创建对司机有用的应用程序。我正在尝试创建内部具有多个堆栈布局的自定义单元格。但是在列表视图中，只显示了我的自定义单元格的第一行。这是我的自定义单元格代码：

<ListView x:Name="ListViewRides">
<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <StackLayout Orientation="Vertical" Margin="15">
        <StackLayout Orientation="Horizontal">
          <Label x:Name="LabelLocationFrom" Text="{Binding PlaceFrom}" Margin="0, 0, 5,0"/>
          <Label Text="->"/>
          <Label x:Name="LabelLocationTo" Text="{Binding PlaceTo}" Margin="5, 0, 0, 0"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label x:Name="LabelTimeFrom" Text="{Binding TimeFrom}" Margin="0, 0, 5,0"/>
          <Label Text="->"/>
          <Label x:Name="LabelTimeTo" Text="{Binding TimeTo}" Margin="5, 0, 0, 0"/>
        </StackLayout>
        <Label x:Name="LabelCustomer" Text="{Binding Customer}"></Label>
      </StackLayout>
    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

这是在模拟器中显示的结果

我不明白我在哪里犯了错误，有人可以帮助我吗？为了获得完整的概述，我还添加了 ViewModel 代码：

public class RidesViewModel:Bindable
{
    public string PlaceFrom { get; set; }
    public string PlaceTo { get; set; }
    public DateTime TimeFrom { get; set; }
    public DateTime TimeTo { get; set; }
    public string Load { get; set; }
    public int Weight { get; set; }
    public string Note { get; set; }
    public string ContactPersonFrom { get; set; }
    public string ContactPersonTo { get; set; }
    public string Customer { get; set; }
    public string Trailer { get; set; }
    public bool IsReadyToShow { get; set; }
    public string RideState { get; set; }
}

多谢指教。我想这很明显，但我现在看不到。

Answer 1

你看不到它可能是因为它在视线之外，但它就在那里。

将 ListView 的 RowHeight 属性设置为更高的值以验证这一点。

RowHeight 应该可以计算当你设置为-1 并且设置 HasUnevenRows 为真如果我没记错的话。然而，根据我的经验，这并不总是有效。要使其正常工作，您可能需要使用一些自定义渲染器。

Answer 2

您必须将 ListView（...或任何视图）设置为 HasUnevenRows = True 并将 VerticalOptions 设置为 "CenterAndExpand" 或 "FillAndExpand" 或其他适合的东西。

Answer 3

经过大量研究后，我在下面创建了带有测试数据的列表视图。

只需复制并粘贴代码并检查结果。

    <ListView HasUnevenRows="true"
              RowHeight="200">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Item One</x:String>
                <x:String>Item Two</x:String>
                <x:String>Item Three</x:String>
                <x:String>Item Four</x:String>
                <x:String>Item Five</x:String>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame BorderColor="Red" Padding="0">
                        <Grid Margin="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="90" />
                                <RowDefinition Height="90"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <BoxView Grid.Row="0"
                                     Grid.Column="0"
                                     Color="Yellow" />
                            <BoxView Grid.Row="0"
                                     Grid.Column="1"
                                     Color="Black" />
                            <BoxView Grid.Row="1"
                                     Grid.Column="0"
                                     Color="Green" />
                            <BoxView Grid.Row="1"
                                     Grid.Column="1"
                                     Color="Blue" />
                            <Label Text="{Binding}"
                                   FontAttributes="Bold"
                                   TextColor="Red"
                                   HorizontalOptions="CenterAndExpand"
                                   VerticalOptions="CenterAndExpand"/>
                        </Grid>
                    </Frame>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Xamarin 表单自定义单元格仅显示第一行

Xamarin forms Custom Cell diplays only first row

listview

custom-cell

xamarin

xamarin.forms