C# binding images from a List inside a ObservableCollection to show in LongListSelector

Question

I have a problem where im trying to show some images from my List inside my LongListSelector, but when im trying to bind my LongListSelector to my List which contains my images, it wont show any images.

My LongListSelector in XAML:

<phone:PivotItem Header="Images">
        <Grid>
            <phone:LongListSelector LayoutMode="Grid" IsGroupingEnabled="True" GridCellSize="180,180" Margin="0,0,-12,0" ItemsSource="{Binding}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <Grid Background="{StaticResource PhoneAccentBrush}" Margin="5">
                        <StackPanel>
                                <Image Source="{Binding Images}"></Image>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
        </Grid>
    </phone:PivotItem>

and my DataContext:

this.DataContext = gd.GetGameItems;

The ObservableCollection im binding to my LongListSelector which contains my List Images:

private ObservableCollection<GetGame> _GetGameItems = new ObservableCollection<GetGame>();
public ObservableCollection<GetGame> GetGameItems
{
    get
    {
        return this._GetGameItems;
    }
}

The code to read the XML and to store data. The method GetImages is where im getting the images and putting them into my List(Images) from the XML which i would like to show in my LongListSelector. The class GetGame is where i store my data:

var feedXml = XDocument.Parse(e.Result);

        var gameData = feedXml.Root.Descendants("Game").Select(x => new GetGame
        {
            ID = (int)x.Element("id"),
            GameTitle = (string)x.Element("GameTitle"),
            Platform = (string)x.Element("Platform"),
            ReleaseDate = (string)x.Element("ReleaseDate"),
            Images = GetImages(x).ToList(),
        })
          .ToList();
        foreach (var item in gameData) GetGameItems.Add(item);
    }
}

private static IEnumerable<Uri> GetImages(XElement gameNode)
{
    return gameNode
              .Descendants("boxart")
              .Select(t => new Uri("http://thegamesdb.net/banners/" + (string)t.Attribute("thumb")));
}

public class GetGame
{
public int ID { get; set; }
public string GameTitle { get; set; }
public string Platform { get; set; }
public string ReleaseDate { get; set; }
public List<Uri> Images { get; set; }

} This is my XML:

<Data>
  <baseImgUrl>http://thegamesdb.net/banners/</baseImgUrl>
  <Game>
    <id>2</id>
    <GameTitle>Crysis</GameTitle>
     <PlatformId>1</PlatformId>
     <Platform>PC</Platform>
     <ReleaseDate>11/13/2007</ReleaseDate>
     <Overview>
     From the makers of Far Cry, Crysis offers FPS fans the best-looking, most highly-        evolving gameplay, requiring the player to use adaptive tactics and total customization of    weapons and armor to survive in dynamic, hostile environments including Zero-G. Earth, 2019. A team of US scientists makes a frightening discovery on an island in the South China Sea. All contact with the team is lost when the North Korean Government quickly seals off the area. The United States responds by dispatching an elite team of Delta Force Operators to recon the situation. As tension rises between the two nations, a massive alien ship reveals itself in the middle of the island. The ship generates an immense force sphere that freezes a vast portion of the island and drastically alters the global weather system. Now the US and North Korea must join forces to battle the alien menace. With hope rapidly fading, you must fight epic battles through tropical jungle, frozen landscapes, and finally into the heart of the alien ship itself for the ultimate Zero G showdown.
    </Overview>
    <ESRB>M - Mature</ESRB>
    <Genres>
    <genre>Shooter</genre>
    </Genres>
    <Players>4+</Players>
    <Co-op>No</Co-op>
    <Youtube>http://www.youtube.com/watch?v=i3vO01xQ-DM</Youtube>
    <Publisher>Electronic Arts</Publisher>
    <Developer>Crytek</Developer>
    <Rating>8.1111</Rating>
    <Images>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-1.jpg</original>
        <thumb>fanart/thumb/2-1.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-2.jpg</original>
        <thumb>fanart/thumb/2-2.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-3.jpg</original>
        <thumb>fanart/thumb/2-3.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-4.jpg</original>
        <thumb>fanart/thumb/2-4.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-5.jpg</original>
        <thumb>fanart/thumb/2-5.jpg</thumb>
      </fanart>
      <fanart>
        <original width="1920" height="1080">fanart/original/2-6.jpg</original>
        <thumb>fanart/thumb/2-6.jpg</thumb>
      </fanart>
    <boxart side="back" width="1525" height="2162" thumb="boxart/thumb/original/back/2-1.jpg">boxart/original/back/2-1.jpg</boxart>
    <boxart side="front" width="1525" height="2160" thumb="boxart/thumb/original/front/2-1.jpg">boxart/original/front/2-1.jpg</boxart>
    <banner width="760" height="140">graphical/2-g2.jpg</banner>
    <banner width="760" height="140">graphical/2-g3.jpg</banner>
      <screenshot>
        <original width="1920" height="1080">screenshots/2-1.jpg</original>
        <thumb>screenshots/thumb/2-1.jpg</thumb>
      </screenshot>
    <clearlogo width="400" height="95">clearlogo/2.png</clearlogo>
    </Images>
  </Game>
</Data>

So, the problem is getting this List with images to show up in my LongListSelector. I don't know if it has something to do with that my List Images is inside my ObservableCollection GetGameItems:

public List<Uri> Images { get; set; }

So i hope there is someone that can help me, Thanks.

Answer 1

You are trying to Assign List as an Image source, which wont work. You need to have a property for Image if you are binding to a Image.

Here is a sample on how you could do,

 public class PhotoItem
    {
        public string Name { get; set; }
        public BitmapImage Photo { get; set; }

        public static List<PhotoItem> getPhotos()
        {
            PhotoItem one = new PhotoItem();
            one.Photo = new BitmapImage(new Uri("",UriKind.Relative));
            one.Name = "Image1";

            PhotoItem two = new PhotoItem();
            two.Photo = new BitmapImage(new Uri("", UriKind.Relative));
            two.Name = "Image1";

            List<PhotoItem> Photos = new List<PhotoItem>();
            Photos.Add(one);
            return Photos;
        }

Your ViewModel,

class PhotoItemViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<PhoneApp1.Model.PhotoItem> _photoList;
        public ObservableCollection<PhoneApp1.Model.PhotoItem> PhotoList
        {
            get
            {
                return _photoList;
            }

            set
            {
                _photoList = value;
                OnPropertyChanged();
            }


        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }

        public void LoadData()
        {
            _photoList = new ObservableCollection<Model.PhotoItem>(Model.PhotoItem.getPhotos());

        }
    }

XAML,

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:LongListSelector ItemsSource="{Binding PhotoList}">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <Image Source="{Binding Photo}"></Image>
                    </StackPanel>           
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>            
        </phone:LongListSelector>
    </Grid>

Code behind:

public MainPage()
        {
            InitializeComponent();
            ViewModel.PhotoItemViewModel _vm = new ViewModel.PhotoItemViewModel();
            this.DataContext = _vm;
        }