Xamarin仅在第一行形成Custom Cell diplay

时间:2017-03-06 20:36:48

标签: listview xamarin xamarin.forms custom-cell

我是Xamarin表单的新手,我想创建对驱动程序有用的应用程序。我正在尝试创建内部具有多个stacklayout的自定义单元格。但是在listview中只显示了我自定义单元格的第一行。这是我的自定义单元格代码:

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

以下是Simulator中显示的结果 Result in simulator

我不明白我在哪里弄错了,有人可以帮帮我吗?为了完整概述,我还添加了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; }
}

感谢您的建议。我想这是我现在无法看到的显而易见的东西。

3 个答案:

答案 0 :(得分:2)

你无法看到它可能是因为它不在视野范围内,但它就在那里。

RowHeight的{​​{1}}属性设置为更高的值以验证这一点。

如果我没有弄错的话,ListView应该能够计算何时设​​置为-1并将RowHeight设置为true。然而,根据我的经验,这并不总是有效。要使其工作,您可能需要使用一些自定义渲染器。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

经过大量研究之后,我在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>