Xamarin 形成自定义单元格仅显示第一行答案

【问题标题】：Xamarin forms Custom Cell diplays only first rowXamarin 形成自定义单元格仅显示第一行
【发布时间】：2017-03-06 20:36:48
【问题描述】：

我是 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; }
}

感谢您的建议。我想这是我现在看不到的明显的东西。

【问题讨论】：

可能看不到了。尝试将ListView 上的RowHeight 设置为更大的数字，看看是否有什么东西。
你是对的，有没有确定行高的模式？

标签： listview xamarin xamarin.forms custom-cell

【解决方案1】：

您看不到它可能是因为它不在视线范围内，但它就在那里。

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

如果我没记错的话，RowHeight 应该能够在您设置为 -1 并将HasUnevenRows 设置为 true 时进行计算。但是，根据我的经验，这并不总是有效。要使其正常工作，您可能需要使用一些自定义渲染器。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

经过大量研究，我在 Listview 下方创建了测试数据。

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

    <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>

【讨论】：