在WindowsPhone開發中使用MVVM設計模式

相信.NET程序員多多少少都聽說過MVVM的設計模式，對於一個大一點的項目來說，使用這種設計模式無疑是一種不錯的選擇， 它提高了程序的可維護性，降低了耦合度，可以實現代碼的重用，方便獨立開發和進行測試。這里，筆者講述一下如何在WindowsPhone中開發使用這種設計模式。

功能描述：通過在前台顯示和更改數據來保證后台數據可以實時更新，始終與前台保持一致。

首先，我們建立一個空的WindowsPhone工程，分別為當前工程中添加一個ViewModel文件夾和Model文件夾，用於儲存不同的類文件，這樣方便進行管理和編寫，如圖一所示：

圖一

其次，我們需要在Model文件夾中創建一個Person類，用於在后台存儲數據，示例代碼如下所示：

namespace MVVMDemo.Model
{
    /// <summary>
    /// 該類繼承INotifyPropertyChanged，用於對屬性值放生改變時的通知
    /// 需要自定義實現一個對應的通知函數：FirePropertyChanged
    /// </summary>
   public class Person:INotifyPropertyChanged
   {
       private string _name;

       public string Name
       {
           get { return _name; }
           set {
               if (value != _name)
               {
                   _name = value;
                   FirePropertyChanged();
               }
           }
       }

       private int _age;

       public int Age
       {
           get { return _age; }
           set {
               if (value != _age)
               {
                   _age = value;
                   FirePropertyChanged();
               }
           }
       }

       public Person(string name, int age)
       {
           this.Name = name;
           this.Age = age;
       }

       public event PropertyChangedEventHandler PropertyChanged;

       public void FirePropertyChanged([CallerMemberName]string propertyName=null)
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
           }
       }
   }
}

再其次，我們需要在ViewModel中實現一個用於獲取Model中數據的類，示例代碼如下所示：

namespace MVVMDemo.ViewModel
{
    public  class GetInfo
    {
        public Person person ;

        public GetInfo(string name="Demo", int age=0)
        {
            person = new Person(name, age);
        }

        public Person GetPerson()
        {
            return person;
        }

        public void SetPerson(string name, int age)
        {
            person.Name = name;
            person.Age = age;
        }
    }
}

最后，我們需要在View中進行相關數據的展示，筆者這里使用到了數據綁定，如果您對這一部分不是很了解的話，可以查看博客園中一些大牛的博文進行了解，我這里就直接使用了，XAML和CS對應的示例代碼如下所示：

    <StackPanel>
        <GridView Header="設置值：" FontSize="20">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Name:" VerticalAlignment="Center"/>
                    <TextBox x:Name="tb_Name" Text="{Binding Name}" Width="200"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Age" VerticalAlignment="Center"/>
                    <TextBox x:Name="tb_Age" Text="{Binding Age}" Width="200" Margin="12"/>
                </StackPanel>
                <Button Content="修改當前值" Click="ButtonBase_OnClick"/>

                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Name:" VerticalAlignment="Center" FontSize="20"/>
                    <TextBlock Text="{Binding Name}" Width="200" FontSize="20"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="Age" VerticalAlignment="Center" FontSize="20"/>
                    <TextBlock Text="{Binding Age}" Width="200" Margin="12" FontSize="20"/>
                </StackPanel>
            </StackPanel>
        </GridView>
    </StackPanel>

namespace MVVMDemo
{
    /// <summary>
    /// 可用於自身或導航至 Frame 內部的空白頁。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private GetInfo info;

        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        /// <summary>
        /// 在此頁將要在 Frame 中顯示時進行調用。
        /// </summary>
        /// <param name="e">描述如何訪問此頁的事件數據。
        /// 此參數通常用於配置頁。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // TODO: 准備此處顯示的頁面。

            if (e.NavigationMode == NavigationMode.New)
            {
                info = new GetInfo();
                this.DataContext = info.GetPerson();
            }

            // TODO: 如果您的應用程序包含多個頁面，請確保
            // 通過注冊以下事件來處理硬件“后退”按鈕:
            // Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
            // 如果使用由某些模板提供的 NavigationHelper，
            // 則系統會為您處理該事件。
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            info.SetPerson(tb_Name.Text, Convert.ToInt32(tb_Age.Text));
            this.DataContext = info.GetPerson();
        }
    }
}

最后，程序運行的效果如圖二圖三所示（它們操作的都是同一個對象）：

圖二：原始數據　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　圖三：修改后的數據

 

可能你認為MVVＭ在使用中有點麻煩，但請用發展的眼看來看待它，如果你期待你的項目能夠長期進行運作和擴展，那筆者還是很建議你使用這種開發方式的，因為隨着你項目的逐漸擴大，你會發現管理起來確實很方便的。順便附帶一個Demo，給初學者一個參考！

如果你感覺這篇博文對你有用，請記得點贊哦！！！！！！！！！！！