Holen Sie sich eine Liste von Bildern aus einer API und zeigen Sie jedes Bild in einer Liste an

Question

Ich benutze eine API, um Json Daten zu holen, und ich möchte jedes Bild von jeder Karte, die ich aus der Sammlung bekomme, abrufen Bild-URL von card.imageUrl, aber die Bildquelle nimmt keine reguläre Zeichenkette. Ich habe versucht, card.imageUrl = String.Format (card.imageUrl) innerhalb der foreach-Schleife zu schreiben, aber es nicht

XAML-Code nicht funktioniert:

 <ListView Name="MasterListView" ItemsSource="{x:Bind MagicCards}"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="data:Card"> 
       <StackPanel Orientation="Horizontal"> 
        <Image Source="{x:Bind ImageUrl}"/> 
        <TextBlock Margin="20,0,0,0" Text="{x:Bind Name}" Foreground="{x:Bind Colors[0]}" /> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

MagicCardsList

 public static async Task PopulateMagicCardsAsync(ObservableCollection<Card> magicCards) 
    { 
     var cardDataWrapper = await GetCardDataWrapperAsync(); 

     var cards = cardDataWrapper.cards; 

     foreach (var card in cards) 
     { 
      if (card.Multiverseid.ToString() != null && card.Multiverseid.ToString() != "") 
      { 
       magicCards.Add(card); 
      } 
     } 
    } 

zum Hinzufügen

Hauptseite

public sealed partial class MainPage : Page 
{ 
    public ObservableCollection<Card> MagicCards { get; set; } 
    public MainPage() 
    { 
     this.InitializeComponent(); 

     MagicCards = new ObservableCollection<Card>();  
    } 
    private async void Page_Loaded(object sender, RoutedEventArgs e) 
    { 
     MyProgressRing.IsActive = true; 
     MyProgressRing.Visibility = Visibility.Visible; 

     await MTGFacade.PopulateMagicCardsAsync(MagicCards); 

     MyProgressRing.IsActive = false; 
     MyProgressRing.Visibility = Visibility.Collapsed; 
    } 
} 

Karte Klasse

public class Card 
{ 
    [DataMember(Name = "imageUrl")] 
    public string ImageUrl { get; set; } 

EDIT: http://i.imgur.com/yqQHdTp.png

Answer 1

Während x:Bind genau erfordert Typen der Quell- und Ziel Eigenschaft, Binding Vorteile von integrierten automatischen Typumwandlung (hier string-ImageSource) entsprechen.

So ändern

<Image Source="{x:Bind ImageUrl}"/> 

zu

<Image Source="{Binding ImageUrl}"/>