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

【问题标题】：Image Cell Multiple Binding Format XAML图像单元格多重绑定格式 XAML
【发布时间】：2017-11-01 14:25:00
【问题描述】：

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

如何在 Image Cell 中将细节分成多行？

目前：

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>

视频.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&#x0a;Uploaded: {2} ", Author, Views, Upload_DateTime);

【问题讨论】：

您需要使用 ViewCell 并定义自己的布局，而不是使用预定义的 ImageCell

标签： xaml xamarin binding xamarin.forms string-formatting

【解决方案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>

【讨论】：