Question

I’m trying to bind a matching name and image into a Hub Tile. the data comes from an api that outputs JSON. I have no problems deserializing the data and use a foreach loop to add the data to my classes. Heres the setup:

    // Deserialize home page data
    public void jsonHome_GetDataCompleted(object snder, DownloadStringCompletedEventArgs e)
    {
        NewReleasesCharts homeData = JsonConvert.DeserializeObject<NewReleasesCharts>(e.Result);

        foreach (FeaturedReleases release in homeData.results.featuredReleases)
        {
            int releaseID = release.id;
            string releaseName = release.name;
            string releaseImg = release.images.large.url;

            new ReleaseLarge()
            {
                url = releaseImg
            };
            new FeaturedReleases()
            {
                id = releaseID,
                name = releaseName
            };
        }

        this.listRelease.ItemsSource = homeData.results.featuredReleases;        
    }

Here are my classes

public class NewReleasesCharts 
{
    //public Metadata metadata { get; set; }
    public ResultHome results = new ResultHome();
    public IEnumerator<ResultHome> GetEnumerator()
    {
        return this.results.GetEnumerator();
    }
}

public class ResultHome
{
    public List<FeaturedReleases> featuredReleases { get; set; }

    //public List<FeaturedCharts> featuredCharts { get; set; }
    //public List<TopDownloads> topdownloads { get; set; }
    //public List<MostPopularReleases> mostPopularReleases { get; set; }
    //public List<Components> components { get; set; }

    internal IEnumerator<ResultHome> GetEnumerator()
    {
        throw new NotImplementedException();
    }
}

public class FeaturedReleases
{
    public int id { get; set; }
    public string type { get; set; }
    public string name { get; set; }
    public string slug { get; set; }
    public ReleaseImage images { get; set; }
}

public class ReleaseImage
{
    //public ReleaseSmall small { get; set; }
    public ReleaseMedium medium { get; set; }
    public ReleaseLarge large { get; set; }
}

public class ReleaseLarge
{
    public int width { get; set; }
    public int height { get; set; }
    public string url { get; set; }
    public string secureUrl { get; set; }
}

and my xaml

                    <ListBox Grid.Row="0" x:Name="listRelease">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <toolkit:HubTile Title="{Binding name}" Source="{Binding url}" Margin="10" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Right now only the name is showing up in the Hub Tile. I assume this is because the name and the image are in different classes, but i haven’t been able to find a solution. Thanks for the help.

Answer 1

You have

Source="{Binding img}"

but nowhere in your models do you have a public property named img.

I’m going out on a limb, but if anything, your binding should be something along the lines of:

Source="{Binding images.medium.url}"