Issue binding to ListBox WP7

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

Isn't the output showing errors? I don't think the property artists.artistName exists since it is a List?

Answer 2

Artists is a list. You have to bind it to a list control (eg. a ListBox or ItemsPanel).

Other possibility: To show only the first artist in the list use this syntax:

  <TextBlock Text="{Binding artists[0].artistName}" Width="173" />

Answer 3

You have a capitalization issue when binding ItemSource to Artists .

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

However, your FeaturedReleases class defines artists and not Artists .

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; }
}

In keeping with your still, you should change the binding to artists

Answer 4

Try using ObservableCollection , so instead of public List<ReleaseArtist> artists { get; set; } List<ReleaseArtist> artists { get; set; } List<ReleaseArtist> artists { get; set; } there should be public ObservableCollection<ReleaseArtist> artists { get; set; } public ObservableCollection<ReleaseArtist> artists { get; set; } public ObservableCollection<ReleaseArtist> artists { get; set; } because for me it seems to after you receive the artists from the internet the UI is not updated with those artists.

Check this tutorial: http://msdn.microsoft.com/en-us/library/ms748365.aspx

Answer 5

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>