Question

I’m try to display three different values within a listbox using hub tile and two textblocks. right now only two of the three items appear. The release url and release name and the third item artistName is not showing up. I am using a webclient to download the JSON data. Here is my current setup.

First 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 List<ReleaseArtist> artists { get; set; }
    public ReleaseImage images { get; set; }
}

public class ReleaseArtist
{
    public int artistID { get; set; }
    public string artistName { get; set; }
}

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

public class ReleaseMedium
{
    public int width { get; set; }
    public int height { get; set; }
    public string url { get; set; }
    public string secureUrl { 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; }
}

xaml

                <ListBox Grid.Row="0" x:Name="listRelease" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <toolkit:HubTile Source="{Binding images.large.url}" Margin="10" />
                                <TextBlock Text="{Binding name}" Width="173" />
                                <TextBlock Text="{Binding artists.artistName}" Width="173" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

and the code behind

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

    const int limit = 6;

    this.listRelease.ItemsSource = homeData.results.featuredReleases.Take(limit);
}

The JSON string can be viewed by inserting the api:http://api.beatport.com/catalog/3/beatport/home, into a JSON formatter. Thanks.

UPDATE

Second listbox bound to Artists

                <ListBox ItemsSource="{Binding Artists}">
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding artistName}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>    
                </ListBox>

Answer 1

I was finally able to figure it out. I bound artists to a nested listbox and was able to get the layout I wanted. Here’s the code.

                    <ListBox x:Name="listRelease" Grid.Row="0" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <toolkit:HubTile Source="{Binding images.large.url}" Margin="10" IsFrozen="True" />
                                <TextBlock Text="{Binding name}" Width="173" />
                                <ListBox ItemsSource="{Binding artists}" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal" >
                                                <TextBlock Text="{Binding name}" Margin="10,0,0,0"  Width="173" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>