Question

So, I am on my way learning MVVM Pattern for Windows Phone, and stuck how to bind the View to my ViewModel. App that I build now is getting current and next 5 days weather and display it to one of my panorama item on MainPage.xaml using UserControl.

I cannot just simply set the Forecasts.ItemsSource = forecast; in my WeatherViewModel, it says that Forecasts (Listbox element name in WeatherView) not exist in the current context.

Can anybody teach me how to bind it? and anybody have a good source/example sample to mvvm pattern in windows-phone? Thanks before.

EDIT:

WeatherModel.cs

namespace JendelaBogor.Models
{
    public class WeatherModel
    {
        public string Date { get; set; }
        public string ObservationTime { get; set; }
        public string WeatherIconURL { get; set; }
        public string Temperature { get; set; }
        public string TempMaxC { get; set; }
        public string TempMinC { get; set; }
        public string Humidity { get; set; }
        public string WindSpeedKmph { get; set; }
    }
}

WeatherViewModel.cs

namespace JendelaBogor.ViewModels
{
    public class WeatherViewModel : ViewModelBase
    {
        private string weatherURL = "http://free.worldweatheronline.com/feed/weather.ashx?q=";
        private const string City = "Bogor,Indonesia";
        private const string APIKey = "APIKEY";

        private IList<WeatherModel> _forecasts;
        public IList<WeatherModel> Forecasts
        {
            get 
            {
                if (_forecasts == null)
                {
                    _forecasts = new List<WeatherModel>();
                }

                return _forecasts;
            }

            private set
            {
                _forecasts = value;

                if (value != _forecasts)
                {
                    _forecasts = value;
                    this.NotifyPropertyChanged("Forecasts");
                }
            }
        }

        public WeatherViewModel()
        {
            WebClient downloader = new WebClient();
            Uri uri = new Uri(weatherURL + City + "&num_of_days=5&extra=localObsTime&format=xml&key=" + APIKey, UriKind.Absolute);
            downloader.DownloadStringCompleted += new DownloadStringCompletedEventHandler(ForecastDownloaded);
            downloader.DownloadStringAsync(uri);
        }

        private void ForecastDownloaded(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Result == null || e.Error != null)
            {
                MessageBox.Show("Cannot load Weather Forecast!");
            }

            else
            {
                XDocument document = XDocument.Parse(e.Result);
                var current = from query in document.Descendants("current_condition")
                                     select new WeatherModel
                                     {
                                         ObservationTime = DateTime.Parse((string)query.Element("localObsDateTime")).ToString("HH:mm tt"),
                                         Temperature = (string)query.Element("temp_C"),
                                         WeatherIconURL = (string)query.Element("weatherIconUrl"),
                                         Humidity = (string)query.Element("humidity"),
                                         WindSpeedKmph = (string)query.Element("windspeedKmph")
                                     };             

                this.Forecasts = (from query in document.Descendants("weather")
                                       select new WeatherModel
                                       {
                                           Date = DateTime.Parse((string)query.Element("date")).ToString("dddd"),
                                           TempMaxC = (string)query.Element("tempMaxC"),
                                           TempMinC = (string)query.Element("tempMinC"),
                                           WeatherIconURL = (string)query.Element("weatherIconUrl")
                                       }).ToList();
            }
        }
    }
}

WeatherView.xaml

<UserControl x:Class="JendelaBogor.Views.WeatherView"
    xmlns:vm="clr-namespace:JendelaBogor.ViewModels">

    <UserControl.DataContext>
         <vm:WeatherViewModel />
    </UserControl.DataContext>

    <Grid Margin="0,-10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="Current" Grid.Row="0" Height="150" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" delay:LowProfileImageLoader.UriSource="{Binding WeatherIconURL}" Width="120" Height="120" VerticalAlignment="Top"/>
            <StackPanel Grid.Column="1" Height="200" VerticalAlignment="Top">
                <TextBlock Text="{Binding Temperature}" FontSize="22"/>
                <TextBlock Text="{Binding ObservationTime}" FontSize="22"/>
                <TextBlock Text="{Binding Humidity}" FontSize="22"/>
                <TextBlock Text="{Binding Windspeed}" FontSize="22"/>
            </StackPanel>
        </Grid>

        <Grid Grid.Row="1" Height="300"  VerticalAlignment="Bottom" Margin="10,0,0,0">
            <StackPanel VerticalAlignment="Top">
                <StackPanel Height="40" Orientation="Horizontal" Margin="0,0,0,0">
                    <TextBlock Text="Date" FontSize="22" Width="170"/>
                    <TextBlock Text="FC" FontSize="22" Width="60"/>
                    <TextBlock Text="Max" TextAlignment="Right" FontSize="22" Width="90"/>
                    <TextBlock Text="Min" TextAlignment="Right" FontSize="22" Width="90"/>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <ListBox ItemsSource="{Binding Forecasts}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Height="40" Orientation="Horizontal" Margin="0,10,0,0">
                                    <TextBlock Text="{Binding Date}" FontSize="22" TextAlignment="Left" Width="170" />
                                    <Image delay:LowProfileImageLoader.UriSource="{Binding WeatherIconURL}" Width="40" Height="40" />
                                    <TextBlock Text="{Binding TempMaxC, StringFormat='\{0\} °C'}" TextAlignment="Right" FontSize="22" Width="90" />
                                    <TextBlock Text="{Binding TempMinC, StringFormat='\{0\} °C'}" TextAlignment="Right" FontSize="22" Width="90" />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>

MainPage.xaml

<controls:PanoramaItem x:Name="Weather" Header="weather">
    <views:WeatherView />
</controls:PanoramaItem>

Answer 1

The ViewModel doesn’t know about the view.

You need to make a Forecasts property on the ViewModel, and bind the ItemsSource to it from your View. In your view, change the ListBox to:

<!-- No need for a name - just add the binding -->
<ListBox ItemsSource="{Binding Forecasts}">

Then, in your ViewModel, add:

// Add a backing field
private IList<WeatherModel> forecasts;

// Add a property implementing INPC
public IList<WeatherModel> Forecasts 
{ 
    get { return forecasts; }
    private set
    {
        forecasts = value;
        this.RaisePropertyChanged("Forecasts");
    }
}

You can then set this in your method:

 this.Forecasts = (from query in document.Descendants("weather")
                             select new WeatherModel
                             {
                                 Date = DateTime.Parse((string)query.Element("date")).ToString("dddd"),
                                 TempMaxC = (string)query.Element("tempMaxC"),
                                 TempMinC = (string)query.Element("tempMinC"),
                                 WeatherIconURL = (string)query.Element("weatherIconUrl")
                             })
                 .ToList(); // Turn this into a List<T>