從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() 
    }; 
}