Question

I use two different webclients to pull down data to display in the main page of my app. I’d like to move this code to the app.xaml.cs to download the data before the user get to the main page. I’m not sure how to set the itemssource for my listboxes on the main page. Here’s what i have so far.

Code within Application_Launching

     private void Application_Launching( object sender, LaunchingEventArgs e)
    {
        // WebClient jsonGenres
        WebClient jsonGenres = new WebClient();
        Uri apiGenres = new Uri( "http://api.beatport.com/catalog/3/genres" );
        jsonGenres.DownloadStringCompleted += newDownloadStringCompletedEventHandler (jsonGenres_GetDataCompleted);
        jsonGenres.DownloadStringAsync(apiGenres);

        // WebClient jsonHome
        WebClient jsonHome = new WebClient();
        Uri apiHome = new Uri ("http://api.beatport.com/catalog/3/beatport/home" );
        jsonHome.DownloadStringCompleted += newDownloadStringCompletedEventHandler (jsonHome_GetDataCompleted);
        jsonHome.DownloadStringAsync(apiHome);

    }

    // Deserialize genres data
    public void jsonGenres_GetDataCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        GenresHome genresData = JsonConvert.DeserializeObject<GenresHome>(e.Result);

        ViewModel.Genres = genresData.results;
        //this.listGenres.ItemsSource = genresData.results;
    }

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

        const int limit = 6;
        ViewModel.Releases = homeData.results.featuredReleases.Take(limit);
        //this.listRelease.ItemsSource = homeData.results.featuredReleases.Take(limit);
    }

and my main page xaml code.

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

    <!--Panorama item four-->          
    <controls:PanoramaItem x:Name="genres" Header="genres">
    <!--Single line list-->
            <Grid>
                <ListBox x:Name="listGenres" ItemsSource="{Binding GenresHome}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock x:Name="genresTxtBlock" Text="{Binding name}" MouseLeftButtonUp="genreSelectedHandler" Margin="10,5,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" />                                      
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>       
            </Grid>        
    </controls:PanoramaItem>

Thanks for the help.

UPDATE

See updated code above and my ViewModel below

public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {

    }

    private IEnumerable<ResultGenreHome> _genres; // backing field
    public IEnumerable<ResultGenreHome> GenresHome
    { 
        get { return _genres; }
        set
        {
            _genres = value;
            OnPropertyChanged("GenresHome");
        }
    }

    private IEnumerable<FeaturedReleasesHome> _releases; // backing field
    public IEnumerable<FeaturedReleasesHome> ReleasesHome
    {
        get { return _releases; }
        set
        {
            _releases = value;
            OnPropertyChanged("ReleasesHome");
        }
    }

    private void OnPropertyChanged(string p)
    {
        throw new NotImplementedException();
    }

    public bool IsDataLoaded
    {
        get;
        private set;
    }

    public void LoadData()
    {
        this.IsDataLoaded = true;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

I’ve set the datacontext in the code behind for the main page. This is my first time using a ViewModel so i’m not exactly sure what i should be putting in here. The app runs without any issues, but no data is showing up.

Answer 1

Take a look at the default “Windows Phone Databound Application” Windows Phone project. This project has a ViewModel that it created within the App and this ViewModel is used by the MainPage. The MainPage then uses Binding to get to the data it needs. You can set the data in the ViewModel from the App by doing

ViewModel.Genres = genresData.results;

Then your xaml would look like

<ListBox ItemsSource="{Binding Genres}">
    ...
</ListBox>

In order for the UI to be updated when you set the genres, your property in the ViewModel must fire the PropertyChanged event

private IEnumerable<Genre> _genres; // backing field
public IEnumerable<Genre> Genres
{ 
    get { return _genres; }
    set
    {
        _genres = value;
        OnPropertyChanged("Genres");
    }
}

Same thing for the Release part as well.