Windows Phone - 将视图绑定到视图模型

Question

所以，我正在学习 Windows Phone 的 MVVM 模式，并坚持如何将视图绑定到我的 ViewModel。我现在构建的应用程序正在获取当前和未来 5 天的天气，并使用 UserControl 将其显示到 MainPage.xaml 上的我的全景项目之一。

我不能简单地在我的 WeatherViewModel 中设置 Forecasts.ItemsSource = Forecast;，它表示当前上下文中不存在预测（WeatherView 中的列表框元素名称） .

谁能教我怎么绑定？并且任何人都有一个很好的源/示例示例到 windows-phone 中的 mvvm 模式？之前谢谢。

编辑：

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

您需要告诉视图您正在使用什么视图模型。通过添加

<UserControl
    xmlns:vm="clr-namespace:JendelaBogor.ViewModels">

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

</UserControl>

所有{Binding} 都映射到WeatherViewModel 类。按照 Reed 的建议，通过在列表框上使用 ItemsSource 属性，您可以绑定通过属性公开的列表中的所有项目。

如果列表在运行应用程序时发生更改，请考虑使用ObservableCollection 并在收到新数据时将其清除并添加所有新项目。如果你这样做了，你的 GUI 就会随之更新。

Answer 2

ViewModel 不知道视图。

您需要在 ViewModel 上创建一个 Forecasts 属性，并将 ItemsSource 从您的视图绑定到它。在您看来，将ListBox 更改为：

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

然后，在您的 ViewModel 中，添加：

// 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");
    }
}

然后你可以在你的方法中设置它：

 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>