UWP: Unable to load image on listview

Question

I have a program where it gets images from website and bind it to the list. I tested the link on my browser and it's shows the image however, when I run, it showing error:

WinRT information: The value cannot be converted to type ImageSource.

I was previously worked on some projects with list view and I never got this error before.

<ListView Grid.Row="1" ItemsSource="{x:Bind AllSongs}"
          Margin="50,20,50,0">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:SongList">
            <StackPanel Orientation="Horizontal">
                <Image Source="{x:Bind Image}"/>
                <TextBlock Text="{x:Bind Name}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

My xaml.cs code

public sealed partial class MainPage : Page
{
    ObservableCollection<SongList> AllSongs;
    public MainPage()
    {
        this.InitializeComponent();
        AllSongs = new ObservableCollection<SongList>();
    }

    private async void searchButton_Click(object sender, RoutedEventArgs e)
    {
        MyProgress.IsActive = true;
        MyProgress.Visibility = Visibility.Visible;
        var allSongs = await SongListManager.GetSongListsAsync(singerAlbumSearchbar.Text);
        foreach (var songs in allSongs)
            AllSongs.Add(songs);
        MyProgress.IsActive = false;
        MyProgress.Visibility = Visibility.Collapsed;
    }
}

And the code I use to get the links

public class SongListManager
{
    public static async Task<List<SongList>> GetSongListsAsync(string SingerName)
    {
        var newSongList = new List<SongList>();
        HttpClient client = new HttpClient();
        var jsonData = await client.GetStringAsync("https://theaudiodb.com/api/v1/json/1/searchalbum.php?s=" + SingerName);
        var response = JsonConvert.DeserializeObject<Rootobject>(jsonData);
        for (int i = 0; i < response.album.Length; i++)
        {
            newSongList.Add(new SongList() { Image = response.album[i].strAlbumThumb, Name = response.album[i].strAlbum });
        }

        return newSongList;
    }
}

score 0 · Answer 1 · answered Dec 19 '18 at 12:02

0

ItemsSource="{x:Bind AllSongs}"

There we go. Are you sure the AllSongs type is ImageSource? From what I see it's a list, not an image.

answered Dec 19 '18 at 12:02

Hirasawa Yui

1,138
11
29

score 0 · Answer 2 · answered Dec 19 '18 at 12:05

ImageSource can't be image because of that I think below code will help you to turn your Image to ImageSource.

using (var ms = new MemoryStream())
{
    image.Save(ms, ImageFormat.Bmp);
    ms.Seek(0, SeekOrigin.Begin);

    var bitmapImage = new BitmapImage();
    bitmapImage.BeginInit();
    bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
    bitmapImage.StreamSource = ms;
    bitmapImage.EndInit();

    return bitmapImage;
}

You can check this answer link.

score 0 · Accepted Answer · answered Dec 19 '18 at 14:00

Make the variable type of the image to ImageSource in your SongList class and set bitmapimage from the url of your thumbnail image. I tried it works fine.

public sealed partial class MainPage : Page
{
    ObservableCollection<SongList> AllSongs;
    public MainPage()
    {
        this.InitializeComponent();
        AllSongs = new ObservableCollection<SongList>();
    }
    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        AllSongs= new ObservableCollection<SongList>( await GetSongListsAsync("drake"));
        SongListView.ItemsSource = AllSongs;
        base.OnNavigatedTo(e);
    }
   private  async Task<List<SongList>> GetSongListsAsync(string SingerName)
    {
        List<SongList> songs = new List<SongList>();
        HttpClient client = new HttpClient();
        var jsonData = await client.GetStringAsync("https://theaudiodb.com/api/v1/json/1/searchalbum.php?s=" + SingerName);
        var response = JsonConvert.DeserializeObject<RootObject>(jsonData);
        foreach (var song in response.album.FindAll(g => !string.IsNullOrEmpty(g.strAlbumThumb)))
        {
            var bytes = await new HttpClient().GetByteArrayAsync(song.strAlbumThumb);
            MemoryStream stream = new MemoryStream(bytes.ToArray());
            var ImageStream =stream.AsRandomAccessStream();
            var bitmapimage = new BitmapImage();
            await bitmapimage.SetSourceAsync(ImageStream);
            songs.Add(new SongList() { Image = bitmapimage, name = song.strAlbum });
        }
        return songs;
    }
}
public class RootObject
{
    public List<Album> album { get; set; }
}
public class Album
{
    public string strAlbumThumb { get; set; }
    public string strAlbum { get; set; }
}
public class SongList
{
    public ImageSource Image { get; set; }
    public string name { get; set; }
}

UWP: Unable to load image on listview

3 Answers3