WP学习笔记(4)MVVM入门 第一部分 INotifyPropertyChanged和ICommand
2013-07-10 16:10
405 查看
这一篇到MVVM了,心里很是忐忑,听说MVVM很长时间了但是一直也没有真正用过,两年前做Silverlight那会项目里也没怎么用,而且那时候还没有windows phone和win8,所以也没太在意,悔不当初啊。这一篇我就多用代码实例说话,少用描述性的文字,以免误人子弟。
打开前几篇的代码,上一篇我们把json转换成了实体类中的数据并且用弹出框显示了一下,那么怎么显示到界面上呢,也许会这么做
在页面里面这样
可以显示没问题,但是太丑陋了,要在code-behid里写很多代码,搞的显示和逻辑混乱不堪,刷新一次请求就要重新绑定一次页面的DataContext,而且这个DataContext要是新的引用(也就是说要重新new一个model出来)显示上才会刷新。下面我们引入ViewModel
新建一个类叫WeatherViewModel
里面有几行注释掉的代码,不用管它那是一会要用的。这个类实现了INotifyPropertyChanged接口,它的作用就是通知UI属性变更了,UI知道后就会重新调用属性的get获取。
下面几个地方我们这么改,打开app.xaml,找到添加资源的<Application.Resources>标签,对,就是添加动画那里。然后在里面添加下面代码
在页面的头部添加DataContext="{StaticResource weather}"
把最开始写在code-behind里的this.DataContext = details改成((WeatherViewModel)this.DataContext).city = details.city;
一样可以显示,而且我们只是给属性重新赋值了。不过codebehind里的代码还是太多,层次还是不清晰,需要继续改造。不在code-behind里响应点击事件,改用command
新建一个类就叫UpdateCmd
把WeatherViewModel里注释的代码打开。把xaml中button的click换成command
现在我们可以把code-behind里所有不是自带的,前几篇添加的代码全部注释掉了。测试一下看看,我们没有在code-behind里写一句代码就实现了数据的显示。而且我们也完成了view-view model-model分层。上面的代码里,Command中Excute部分也应该提取出来成为service。
关于INotifyPropertyChanged和ICommand更多的信息感兴趣的还是baidu吧,我就不这里献丑了,网上还是很多的。今天这篇就到这,下一篇简单应用一下DependencyProperty。
打开前几篇的代码,上一篇我们把json转换成了实体类中的数据并且用弹出框显示了一下,那么怎么显示到界面上呢,也许会这么做
HttpClient hc = new HttpClient(); var task = await hc.GetAsync("http://www.weather.com.cn/data/cityinfo/101010100.html"); string result = await task.Content.ReadAsStringAsync(); JObject obj = JObject.Parse(result); WeatherModel1 details = (WeatherModel1)JsonConvert.DeserializeObject(obj["weatherinfo"].ToString(), typeof(WeatherModel1)); this.DataContext = details;
在页面里面这样
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button Content="Button" HorizontalAlignment="Left" Margin="137,103,0,0" VerticalAlignment="Top" Click="Button_Click"/> <TextBlock HorizontalAlignment="Left" Margin="119,265,0,0" TextWrapping="Wrap" Text="{Binding city}" VerticalAlignment="Top"/> </Grid>
可以显示没问题,但是太丑陋了,要在code-behid里写很多代码,搞的显示和逻辑混乱不堪,刷新一次请求就要重新绑定一次页面的DataContext,而且这个DataContext要是新的引用(也就是说要重新new一个model出来)显示上才会刷新。下面我们引入ViewModel
新建一个类叫WeatherViewModel
public class WeatherViewModel : INotifyPropertyChanged { //public WeatherViewModel() //{ // if (updateCmd == null) // { // updateCmd = new UpdateCmd(this); // } //} public event PropertyChangedEventHandler PropertyChanged; //public ICommand updateCmd { get; private set; } private string _city; public string city { get { return _city; } set { _city = value; if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("city")); } } } }
里面有几行注释掉的代码,不用管它那是一会要用的。这个类实现了INotifyPropertyChanged接口,它的作用就是通知UI属性变更了,UI知道后就会重新调用属性的get获取。
下面几个地方我们这么改,打开app.xaml,找到添加资源的<Application.Resources>标签,对,就是添加动画那里。然后在里面添加下面代码
<my:WeatherViewModel xmlns:my="clr-namespace:PhoneApp3" x:Key="weather"/>
在页面的头部添加DataContext="{StaticResource weather}"
把最开始写在code-behind里的this.DataContext = details改成((WeatherViewModel)this.DataContext).city = details.city;
一样可以显示,而且我们只是给属性重新赋值了。不过codebehind里的代码还是太多,层次还是不清晰,需要继续改造。不在code-behind里响应点击事件,改用command
新建一个类就叫UpdateCmd
public class UpdateCmd : ICommand { private WeatherViewModel _weather; public UpdateCmd(WeatherViewModel weather) { _weather = weather; } public bool CanExecute(object parameter) { if (parameter != null) { CanExecuteChanged(parameter, new EventArgs()); } return true; //throw new NotImplementedException(); } public event EventHandler CanExecuteChanged; public async void Execute(object parameter) { //System.Windows.MessageBox.Show("a"); //throw new NotImplementedException(); HttpClient hc = new HttpClient(); var task = await hc.GetAsync("http://www.weather.com.cn/data/cityinfo/101010100.html"); string result = await task.Content.ReadAsStringAsync(); JObject obj = JObject.Parse(result); WeatherModel1 details = (WeatherModel1)JsonConvert.DeserializeObject(obj["weatherinfo"].ToString(), typeof(WeatherModel1)); _weather.city = details.city; } }
把WeatherViewModel里注释的代码打开。把xaml中button的click换成command
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button Content="Button" HorizontalAlignment="Left" Margin="137,103,0,0" VerticalAlignment="Top" Command="{Binding updateCmd}"/> <TextBlock HorizontalAlignment="Left" Margin="119,265,0,0" TextWrapping="Wrap" Text="{Binding city}" VerticalAlignment="Top"/> </Grid>
现在我们可以把code-behind里所有不是自带的,前几篇添加的代码全部注释掉了。测试一下看看,我们没有在code-behind里写一句代码就实现了数据的显示。而且我们也完成了view-view model-model分层。上面的代码里,Command中Excute部分也应该提取出来成为service。
关于INotifyPropertyChanged和ICommand更多的信息感兴趣的还是baidu吧,我就不这里献丑了,网上还是很多的。今天这篇就到这,下一篇简单应用一下DependencyProperty。
相关文章推荐
- WP学习笔记(4)MVVM入门 第一部分 INotifyPropertyChanged和ICommand
- WP学习笔记(5)MVVM入门 第二部分DependencyProperty
- Seliverlight 中数据绑定INotifyPropertyChanged 接口的用法 .数据绑定IValueConvert的用法学习笔记
- SilverLight 学习笔记--Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用
- [置顶] 【第一部分-django论坛从搭建到部署】一个完整的Django入门指南学习笔记
- prism4学习笔记5:INotifyPropertyChanged接口
- [Silverlight入门系列]使用MVVM模式(3):Model的INotifyPropertyChanged接口实现
- SilverLight学习笔记--Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用
- [Silverlight入门系列]使用MVVM模式(7):ViewModel的INotifyPropertyChanged接口实现
- 【day 14】python编程:从入门到实践学习笔记-基于Django框架的Web开发-用户账户(一)
- java 从零开始,学习笔记之基础入门<SQL_Server_视图_函数_存储过程_触发器等>(二十三)
- mongodb 学习笔记之二 mongodb入门(数据库、文档和集合)
- headFirst学习笔记之一:设计模式入门(4.28)
- [cocos2d-x学习笔记][入门基础]Box-2d物理引擎的使用02制作一个简易的愤怒小鸟Demo
- Google.Android开发入门与实践-学习笔记1
- AngularJs 初级入门 学习笔记
- [学习笔记]JSON for java入门总结
- 【Hibernate学习笔记】hibernate入门
- jQuery入门基础知识学习笔记
- 持续集成学习笔记-入门篇(8)成果管理自动化(二):maven项目站点管理