Question

我正在使用Xamarin Forms进行申请。我希望应用程序显示类似于youtube的列表视图。左侧和右侧有一个缩略图，其中有一个视频标题，下面有详细信息。目前，我只能将详细信息放在一行上。

如何将细节分成图像单元格中的多行？

目前：

Homepage.xaml：

   <StackLayout Orientation="Vertical">
    <SearchBar x:Name="MainSearchBar" HorizontalOptions="Center" />
    <ListView x:Name="VideoList" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>

                <ImageCell Text = "{Binding Title}" Detail="{Binding Detail}" ImageSource="{Binding ImageURL}"/>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Videos.cs：

    class Videos
{
    public string Title { get; set; }

    public string Author { get; set; }
    public int Views { get; set; }
    public DateTime Upload_DateTime { get; set; }
    public string ImageURL { get; set; }

    public string Detail
    {

        get
        {
            return string.Format("{0} - {1}  Views Uploaded: {2} ", Author, Views, Upload_DateTime); //format for details on imagecell
        }
    }


}

注意：我在Videos.cs上尝试了以下格式：

return string.Format("{0} - {1} Views \nUploaded: {2} ", Author, Views, Upload_DateTime);

return string.Format("{0} - {1} Views
Uploaded: {2} ", Author, Views, Upload_DateTime);

Answer 1

谢谢@Jason！

现在我在View Cell中有一个网格布局。这似乎正是我所需要的！接下来，我需要更正格式以使其看起来更漂亮，但在大多数情况下，这个问题已得到解答！

<强> Homepage.xaml：

<StackLayout Orientation="Vertical">
    <SearchBar x:Name="MainSearchBar" HorizontalOptions="Center" />
    <ListView x:Name="VideoList" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>

                <ViewCell>
                    <ViewCell.View>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <Image Source="{Binding ImageURL}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
                            <Label Text="{Binding Title}" Grid.Row="0" Grid.Column="1"/>
                            <Label Text="{Binding Author_Views}" Grid.Row="1" Grid.Column="1"/>
                            <Label Text="{Binding Uploaded}" Grid.Row="2" Grid.Column="1"/>
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

图像单元格多重绑定格式XAML

1 个答案: