在 xamarin.forms 中设计图像库

Question

我有一个 JSON，其中包含图像缩略图 URL 和一些文本，现在我必须将其呈现为图像库，如手机库。我对网格布局进行了很多研究，但没有找到一种方法来动态创建可以显示图像的固定宽度和高度的网格数量。谁能告诉我设计包含大量图像的画廊类型页面的最佳组件是什么？

Answer 1

Xamarin.Droid 中有一个图库控件请参阅示例 - http://developer.xamarin.com/guides/android/user_interface/gallery/

如果这不是您想要的，那么您可以使用自己的带有图像的列表视图。并且您可以显示完整图像。请参阅 xamarin.form 示例中包含图像的列表视图示例。

如果您需要多列，请在水平渲染和列表视图内使用堆栈布局，可能是 3。

这将为您提供 3 列和无限的可滚动行。

编辑： 您必须创建一个 ViewModel，其中包含一个带有您想要绑定的公共属性的类。将您的 JSON 反序列化为该 ViewModel 类的 IEnumerable 并绑定到您的列表视图。在Listview中你必须使用ImageCell

对于创建图像，因为您已经提到它来自 URL，以下语法将帮助您：

  webImage.Source = new UriImageSource {
    Uri = new Uri("http://xamarin.com/content/images/pages/forms/example-app.png"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

员工示例将 aListView与一张图像和 2绑定labels。

class EmployeeCell : ViewCell
{
    public EmployeeCell()
    {
        var image = new Image
                    {
                        HorizontalOptions = LayoutOptions.Start
                    };
        image.SetBinding(Image.SourceProperty, new Binding("ImageUri"));
        image.WidthRequest = image.HeightRequest = 40;

        var nameLayout = CreateNameLayout();

        var viewLayout = new StackLayout()
                         {
                             Orientation = StackOrientation.Horizontal,
                             Children = { image, nameLayout }
                         };
        View = viewLayout;
    }    
}

编辑2： 如果您要呈现的图像 URL 数量可变，那么您最好选择TableView。TableView 未绑定到数据源，您可以通过解析 JSON 对象根据您的要求创建单独的单元格。即：每个 JSON 对象都是 a TableSection，每个 Image 都是 aImageCell