windows phone7—mvvm進階

說明

mvvm中的我們可以將一個實現 ICommand的object綁定到對應的elment來和viewmodel互動，mvvm會幫我們更新頁面繫結資料源；今天我們接著做一個添加好友的功能.

很簡單就是擷取使用者輸入並把輸入的對象添加到集合中..

1.在viewmodel裡添加屬性Friend

 private Friend _friend;/// <summary>/// 接收輸入構造的Friend/// </summary>public Friend Friend{get{return _friend;}set{if (value == _friend){return;}_friend = value;RaisePropertyChanged("Friend");}}

2.在頁面添加接受輸入控制項

3.添加綁定和儲存按鈕

 <TextBlock Canvas.Left="75" Canvas.Top="20" Height="40" Text="Name" Width="58" /><TextBox Canvas.Left="145" Canvas.Top="0" Height="60" x:Name="txtName" Text="{Binding Friend.Name, Mode=TwoWay}" Width="250" Padding="1" FontSize="18" IsEnabled="{Binding IsNameEditable}" /><TextBlock Canvas.Left="62" Canvas.Top="65" Height="30" x:Name="textBlock2" Text="Address" /><TextBox Canvas.Left="145" Canvas.Top="48" Height="60" x:Name="txtAddress" Text="{Binding Friend.Address, Mode=TwoWay}" Width="250" FontSize="18" /><TextBlock Canvas.Left="33" Canvas.Top="118" Height="30" x:Name="textBlock3" Text="PhoneNum" /><TextBox Canvas.Left="145" Canvas.Top="102" Height="62" x:Name="txtPhoneNum" Text="{Binding Friend.PhoneNum, Mode=TwoWay}" Width="250" FontSize="18" />

 <Button Canvas.Left="167" Canvas.Top="163" Content="Save" Height="69" x:Name="save" Width="123" Command="{Binding AddCommand}" />

4.添加儲存對應的AddCommand並在ViewModel裡添加AddCommand（你知道的）

using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace HelloWp7.ViewModel{public class AddCommand:ICommand{private readonly MainViewModel _viewModel;public AddCommand(MainViewModel viewModel){_viewModel = viewModel;}public bool CanExecute(object parameter){return true;}public event EventHandler CanExecuteChanged;public void Execute(object parameter){_viewModel.Add(_viewModel.Friend);}}}

 

viewmode裡添加屬性和add方法：

 public ICommand AddCommand{get;private set;}

 /// <summary>/// save/// </summary>/// <param name="friend"></param>public void Add(Friend friend){friendService.AddFriend(friend); //添加到集合this.Friends = new ObservableCollection<Friend>(friendService.GetFriendsSet());this.Friend = new Friend(); //清空}

並在viewmode的建構函式裡初始化addCommand

 public MainViewModel(){//初始化資料_title = "Friends Book";_friends = new ObservableCollection<Friend>(friendService.GetFriends());RefreshCommand = new RefreshCommand(this); //重新整理事件AddCommand = new AddCommand(this);}

在FriendService裡很簡單，就是將以好友名稱為主鍵將Friend添加到集合中

using System;using System.Collections.Generic;using System.Linq;namespace HelloWp7.Model{public class FriendService{public List<Friend> GetFriends(){List<Friend> friends = new List<Friend>() {new Friend(){ Name="Johnny", Address="北京", PhoneNum="13621010899"},new Friend(){ Name="David", Address="上海", PhoneNum="23621010899"},new Friend(){ Name="John", Address="天津", PhoneNum="33621010899"},new Friend(){ Name="Susan", Address="武漢", PhoneNum="43621010899"},new Friend(){ Name="Badboy", Address="深圳", PhoneNum="53621010899"},new Friend(){ Name="Jobs", Address="廣州", PhoneNum="11621010899"},new Friend(){ Name="kevin", Address="深圳", PhoneNum="53621010899"}};return friends;}/// <summary>/// 靜態變數作為資料容器/// </summary>private static List<Friend> _friends = new List<Friend>() {new Friend(){ Name="Jay", Address="台北", PhoneNum="8888888888"}};public List<Friend> GetFriendsSet(){return _friends;}public void AddFriend(Friend friend){bool isHave = false;int index = 0;foreach (var item in _friends){if (item.Name == friend.Name){isHave = true;break;}index++;}if (isHave){_friends[index] = friend;}else{_friends.Add(friend);}}}}

運行時異常，原來沒有在viewmodel裡初始化Friend原因;

現在運行可以自動添加並更新列表了，效果：

 

下載 source code