从URI加载在列表视图中的图像xamarin形式

Question

好吧，所以我有这个listview应该显示一堆项目，其中每个项目至少包含一张照片。

这个想法是显示listCell中的主要照片，并且当一个项目被选中时，其细节被显示在不同的表格页面中，并且在那里它应该能够访问它的所有照片。

当该项目没有照片时，它将显示一个来自资源的占位符。

问题：无法从URI加载图像，要么将图像源绑定到包含特定URI obj的list属性（来自viewModel），要么将它绑定到包含现在字符串的相同属性，或者通过手段的

<Image.Source> 
    <UriImageSource Uri="{Binding MainPhotoSource}" /> 
</Image.Source> 

不管。这些似乎都不起作用。

已经向Xamarin团队寻求帮助，他们的答案是来到这里，或者去论坛（我已经做了，现在已经等了近两个月，而且需要交付工作）..

请帮忙吗？

编辑： 这是一段ViewModel代码。

在第一种方法中，对于从WCF接收到的每个项目，我将此ItemDto obj格式的等效项添加到此ObservableCollection列表中。

// Sets this List observable collection to a new ItemDto obj, 
// with certain properties from the Item.Find result[]. 
ObservableCollection<ItemDto> SetList(Item.Find[] result) 
{ 
    ObservableCollection<ItemDto> collection = new ObservableCollection<ItemDto>(); 

    foreach (Item.Find item in result) 
    { 
     collection.Add(GetDto(item)); 
    } 
    return collection; 
} 

// Gets a new ItemDto obj with the required fields from Item.Find obj. 
ItemDto GetDto(Item.Find item) 
{ 
    return new ItemDto() 
    { 
     ID = item.ID, 
     UserID = item.User_ID, 
     MainPhotoSource = new Uri(_serverInbox + item.MediaItems[0].RelativeUrl), 
     Title = item.Title, 
     Description = item.Description, 
     Category = item.Category_Name, 
     DateCreated = GetFormatedDateCreated(item.DateCreated) 
    }; 
} 

Answer 1

UriImageSource的Uri属性需要一个Uri而不是一个字符串。但是你可以在你的视图模型使用URI绑定属性，并绑定到它：

Check this code

视图模型

public string ProductNo 
{ 
    get { return _productNo} 
    set 
    { 
     if (_productNo != value) 
     { 
      _productNo = value; 
      RaisePropertyChanged(); 
      RaisePropertyChanged(() => ThumbnailImageUri); 
     } 
    } 
} 

public Uri ThumbnailImageUri 
{ 
    get 
    { 
     if (_thumbnailImageUri == null) 
     { 
      _thumbnailImageUri = new Uri(String.Format("http://www.YOURWEBSITE.com/{0}.jpg", _productNo)); 
     } 
     return _thumbnailImageUri; 
    }    
} 

查看

<StackLayout BindingContext="{Binding SelectedProduct}"> 
    <StackLayout Orientation="Horizontal"> 
     <Image HorizontalOptions="EndAndExpand" 
      VerticalOptions="Center"> 
     <Image.Source> 
      <UriImageSource Uri="{Binding ThumbnailImageUri}"/> 
     </Image.Source> 
     </Image>  
    <Label Text="{Binding ProductNo}" 
     Font="Bold, Large" 
     HorizontalOptions="StartAndExpand" 
    VerticalOptions="Center"/> 
    </StackLayout> 
</StackLayout> 

Answer 2

这里，对我来说是什么在起作用 - 希望这可以帮助你

首先我的BindingContext：

public class ItemContainer 
{ 
    public ItemContainer() 
    {   
     Collection = SetList(new[] { "1", "2", "3", "4" }); 
    } 

    ObservableCollection<ItemDto> SetList(string[] result) 
    { 
     ObservableCollection<ItemDto> collection = new ObservableCollection<ItemDto>(); 

     foreach (string item in result) 
     { 
      collection.Add(GetDto(item)); 
     } 
     return collection; 
    } 
    public ObservableCollection<ItemDto> Collection { get; set; } 
    ItemDto GetDto(string item) 
    { 
     return new ItemDto() { MainPhotoSource = new Uri(_serverInbox + item) }; 
    } 
} 

我的Page1.xaml看起来是这样的：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="App1gcm.Page1"> 
    <ListView ItemsSource="{Binding Collection}" VerticalOptions="Center" HorizontalOptions="Center" > 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <ViewCell> 
        <Image Source="{Binding MainPhotoSource}" /> 
       </ViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</ContentPage> 

我将它们合并创造作为App.cs中的MainPage：

public App() 
{ 
    // The root page of your application 
    MainPage = new Page1 
    { 
     BindingContext = new ItemContainer() 
    }; 
}