c# - Windows Phone - 将 View 绑定(bind)到 View 模型

Question

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

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

谁能教我怎么绑定(bind)？并且任何人都有一个很好的源/示例示例到 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

您需要告诉 View 您正在使用什么 View 模型。通过增加

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

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

</UserControl>

全部 {Binding}被映射到类 WeatherViewModel .通过使用 ItemsSource正如 Reed 建议的那样，您可以绑定(bind)列表框中的所有项目，这些项目通过属性公开。

如果在运行应用程序时列表发生了变化，请考虑使用 ObservableCollection并在收到新数据时清除它并添加所有新项目。如果你这样做了，你的 GUI 将简单地更新它。