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

i have problem im trying show images list inside longlistselector, when im trying bind longlistselector list contains images, wont show 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 datacontext:

this.datacontext = gd.getgameitems; 

the observablecollection im binding longlistselector contains list images:

private observablecollection<getgame> _getgameitems = new observablecollection<getgame>(); public observablecollection<getgame> getgameitems {         {         return this._getgameitems;     } } 

the code read xml , store data. method getimages im getting images , putting them list(images) xml show in longlistselector. class getgame store 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; } 

} 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>      makers of far cry, crysis offers fps fans best-looking, highly-        evolving gameplay, requiring player use adaptive tactics , total customization of    weapons , armor survive in dynamic, hostile environments including zero-g. earth, 2019. team of scientists makes frightening discovery on island in south china sea. contact team lost when north korean government seals off area. united states responds dispatching elite team of delta force operators recon situation. tension rises between 2 nations, massive alien ship reveals in middle of island. ship generates immense force sphere freezes vast portion of island , drastically alters global weather system. , north korea must join forces battle alien menace. hope rapidly fading, must fight epic battles through tropical jungle, frozen landscapes, , heart of alien ship ultimate 0 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, problem getting list images show in longlistselector. don't know if has list images inside observablecollection getgameitems:

public list<uri> images { get; set; } 

so hope there can me, thanks.

you trying assign list image source, wont work. need have property image if binding image.

here sample on how do,

 public class photoitem     {         public string name { get; set; }         public bitmapimage photo { get; set; }          public static list<photoitem> getphotos()         {             photoitem 1 = new photoitem();             one.photo = new bitmapimage(new uri("",urikind.relative));             one.name = "image1";              photoitem 2 = 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         {                         {                 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;         }