通用Windows應用《博客園-開發者的網上家園》開發（1）——MVVM模式

最近開發了個WP8.1和Windows8.1平台上的應用——《博客園-開發者的網上家園》，基於 Windows Runtime 。在此有必要說明一下，WP8.0以前的應用程序是基於Silverlight的，微軟為了統一Windows Phone OS 和 Windows RT，從開發人員的角度上，也統一了兩個平台上大部分的API，使得開發人員可以共享代碼（而不是一次編寫，跨平台運行）。

本文着重描述MVVM在Windows Runtime應用程序下的表現，關於MVVM模式的理解，可參考園子里 天神一 的博客——《MVVM架構的簡單解析》。

來看Model的代碼

    public class Blog
    {
        /// <summary>
        /// 博客Id
        /// </summary>
        public long Id { get; set; }
        /// <summary>
        /// 博客標題
        /// </summary>
        public string Title { get; set; }
        /// <summary>
        /// 博客摘要
        /// </summary>
        public string Summary { get; set; }
        /// <summary>
        /// 博客發表時間
        /// </summary>
        public string Published { get; set; }
        /// <summary>
        /// 博客更新時間
        /// </summary>
        public string Updated { get; set; }
        /// <summary>
        /// 博主
        /// </summary>
        public Author Author { get; set; }
        /// <summary>
        /// 博客鏈接
        /// </summary>
        public string Link { get; set; }
        /// <summary>
        /// 博主博客名稱
        /// </summary>
        public string BlogApp { get; set; }
        /// <summary>
        /// 推薦數
        /// </summary>
        public int Diggs { get; set; }
        /// <summary>
        /// 閱讀數
        /// </summary>
        public int Views { get; set; }
        /// <summary>
        /// 評論數
        /// </summary>
        public int Comments { get; set; }
    }

    public class Author
    {
        /// <summary>
        /// 博主名字
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 博主博客鏈接
        /// </summary>
        public string Uri { get; set; }
        /// <summary>
        /// 博主頭像地址
        /// </summary>
        public string Avatar { get; set; }
    }

再看ViewModel

public class ViewModel : INotifyPropertyChanged
    {
        public ViewModel()
        {
            this.Blogs = new ObservableCollection<Blog>();
        }

        /// <summary>
        /// 加載某一頁博客
        /// </summary>
        /// <param name="pageIndex">頁碼</param>
        /// <param name="pageSize">多少條</param>
        /// <returns></returns>
        public async Task LoadBlogsAsync(int pageIndex, int pageSize)
        {
            string url = string.Format(BlogUrl, pageIndex, pageSize);
            this.Blogs = XmlHelper.XmlToBlog(await new HttpClient().GetStringAsync(new Uri(url)));
            IsBlogLoaded = true;
        }

        /// <summary>
        /// 加載下一頁博客，並追加到當前數據源中
        /// </summary>
        /// <param name="count">加載多少條</param>
        /// <returns></returns>
        public async Task LoadMoreBlogsAsync(int count)
        {
            string url = string.Format(BlogUrl, ++App.CurrentBlogPage, count);
            foreach (var item in XmlHelper.XmlToBlog(await new HttpClient().GetStringAsync(new Uri(url))))
            {
                this.Blogs.Add(item);
            }
        }

        private ObservableCollection<Blog> _blogs;
        public ObservableCollection<Blog> Blogs
        {
            get { return _blogs; }
            private set
            {
                if (value != _blogs)
                {
                    _blogs = value;
                    NotifyPropertyChanged("Blogs");
                }
            }
        }

        private const string BlogUrl = "http://wcf.open.cnblogs.com/blog/sitehome/paged/{0}/{1}";

        public bool IsLoaded { get; private set; }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (null != handler)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

先看看 INotifyPropertyChanged 這個接口的定義：

這個接口只定義了一個事件：PropertyChanged，屬性改變。接口的說明告訴我們，這個接口的作用在於當我用於綁定在UI上的數據源發生改變的時候，可以向界面發出通知，讓界面做出相應的改變。

ViewModel實現了INotifyPropertyChanged接口，當ViewModel改變時可以通知UI做出相應的改變，同時，不使用List<T>作為數據集，而是使用ObservableCollection<T>，看看ObservableCollection<T>的定義：

    // 摘要: 
    //     表示一個動態數據集合，在添加項、移除項或刷新整個列表時，此集合將提供通知。
    //
    // 類型參數: 
    //   T:
    //     集合中的元素類型。
    public class ObservableCollection<T> : Collection<T>, INotifyCollectionChanged, INotifyPropertyChanged
    {
        // 摘要: 
        //     初始化 System.Collections.ObjectModel.ObservableCollection<T> 類的新實例。
        public ObservableCollection();
        //
        // 摘要: 
        //     初始化 System.Collections.ObjectModel.ObservableCollection<T> 類的新實例，該類包含從指定集合中復制的元素。
        //
        // 參數: 
        //   collection:
        //     從中復制元素的集合。
        //
        // 異常: 
        //   System.ArgumentNullException:
        //     collection 參數不能為 null。
        public ObservableCollection(IEnumerable<T> collection);

        // 摘要: 
        //     在添加、移除、更改或移動項或者在刷新整個列表時發生。
        public virtual event NotifyCollectionChangedEventHandler CollectionChanged;
        //
        // 摘要: 
        //     在屬性值更改時發生。
        protected virtual event PropertyChangedEventHandler PropertyChanged;

        // 摘要: 
        //     不允許可重入的更改此集合的嘗試。
        //
        // 返回結果: 
        //     可用於釋放對象的 System.IDisposable 對象。
        protected IDisposable BlockReentrancy();
        //
        // 摘要: 
        //     檢查可重入的更改此集合的嘗試。
        //
        // 異常: 
        //   System.InvalidOperationException:
        //     如果存在對 System.Collections.ObjectModel.ObservableCollection<T>.BlockReentrancy()（尚未釋放其
        //     System.IDisposable 返回值）的調用。 通常，這意味着在 System.Collections.ObjectModel.ObservableCollection<T>.CollectionChanged
        //     事件期間進行了額外的更改此集合的嘗試。 但是，這取決於派生類何時選擇調用 System.Collections.ObjectModel.ObservableCollection<T>.BlockReentrancy()。
        protected void CheckReentrancy();
        //
        // 摘要: 
        //     從集合中移除所有項。
        protected override void ClearItems();
        //
        // 摘要: 
        //     將一項插入集合中指定索引處。
        //
        // 參數: 
        //   index:
        //     從零開始的索引，應在該位置插入 item。
        //
        //   item:
        //     要插入的對象。
        protected override void InsertItem(int index, T item);
        //
        // 摘要: 
        //     將指定索引處的項移至集合中的新位置。
        //
        // 參數: 
        //   oldIndex:
        //     從零開始的索引，用於指定要移動的項的位置。
        //
        //   newIndex:
        //     從零開始的索引，用於指定項的新位置。
        public void Move(int oldIndex, int newIndex);
        //
        // 摘要: 
        //     將指定索引處的項移至集合中的新位置。
        //
        // 參數: 
        //   oldIndex:
        //     從零開始的索引，用於指定要移動的項的位置。
        //
        //   newIndex:
        //     從零開始的索引，用於指定項的新位置。
        protected virtual void MoveItem(int oldIndex, int newIndex);
        //
        // 摘要: 
        //     引發帶有提供的參數的 System.Collections.ObjectModel.ObservableCollection<T>.CollectionChanged
        //     事件。
        //
        // 參數: 
        //   e:
        //     要引發的事件的參數。
        protected virtual void OnCollectionChanged(NotifyCollectionChangedEventArgs e);
        //
        // 摘要: 
        //     引發帶有提供的參數的 System.Collections.ObjectModel.ObservableCollection<T>.PropertyChanged
        //     事件。
        //
        // 參數: 
        //   e:
        //     要引發的事件的參數。
        protected virtual void OnPropertyChanged(PropertyChangedEventArgs e);
        //
        // 摘要: 
        //     移除集合中指定索引處的項。
        //
        // 參數: 
        //   index:
        //     要移除的元素的從零開始的索引。
        protected override void RemoveItem(int index);
        //
        // 摘要: 
        //     替換指定索引處的元素。
        //
        // 參數: 
        //   index:
        //     待替換元素的從零開始的索引。
        //
        //   item:
        //     位於指定索引處的元素的新值。
        protected override void SetItem(int index, T item);
    }

ObservableCollection<T>集成於Collection<T>，同時實現了兩個接口：INotifyCollectionChanged 和 INotifyPropertyChanged，前者用於通知UI數據集改變，后者用於通知UI數據集中的屬性改變。

另外在ViewModel中自定義了兩個方法：LoadBlogsAsync(int pageIndex, int pageSize) 和 LoadMoreBlogsAsync(int count)，都是異步方法。

在App.xaml.cs里定義一個靜態屬性ViewModel，用於全局訪問

    private static ViewModel viewModel = null;
    /// <summary>
    /// 視圖用於進行綁定的靜態 ViewModel。
    /// </summary>
    /// <returns>ViewModel 對象。</returns>
    public static ViewModel ViewModel
    {
        get
        {
            // 延遲創建視圖模型，直至需要時
            if (viewModel == null)
                viewModel = new ViewModel();
            return viewModel;
        }
    }

上面說到延遲加載，直至需要時。那么什么時候需要呢，當然是我們在頁面上需要展示數據的時候。在MainPage.xaml的構造方法里，我們去創建ViewModel，並賦值給MainPage的數據上下文。

    public MainPage()
    {
        this.InitializeComponent();
        DataContext = App.ViewModel;
    }

並在導航到該頁面的時候加載ViewModel的數據：

    protected override async void OnNavigatedTo(Windows.UI.Xaml.Navigation.NavigationEventArgs e)
    {
        MyProgressBar.Visibility = Visibility.Visible;
        if (!App.ViewModel.IsLoaded)
        {
            await App.ViewModel.LoadBlogsAsync(1, App.PageSizeBlog);
        }
        MyProgressBar.Visibility = Visibility.Collapsed;
    }

上面便實現了所謂的延時加載。

剩下的便是如何在UI上綁定了

 <ListBox Loaded="GridViewData_Loaded" SelectionChanged="GridViewData_SelectionChanged" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" Name="GridViewData" ItemsSource="{Binding Blogs,Mode=TwoWay}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock FontSize="18" Text="{Binding Title}" TextWrapping="Wrap"></TextBlock>
                                <StackPanel Orientation="Horizontal" Margin="0 12">
                                    <TextBlock Text="{Binding Author.Name}" Foreground="#FF2B6695"></TextBlock>
                                    <TextBlock Text="發布於" Margin="6 0"></TextBlock>
                                    <TextBlock Text="{Binding Published}" Margin="0 0 6 0"></TextBlock>
                                    <TextBlock Text="評論("></TextBlock>
                                    <TextBlock Text="{Binding Comments}"></TextBlock>
                                    <TextBlock Text=")" Margin="0 0 6 0"></TextBlock>
                                    <TextBlock Text="閱讀("></TextBlock>
                                    <TextBlock Text="{Binding Views}"></TextBlock>
                                    <TextBlock Text=")"></TextBlock>
                                </StackPanel>
                                <Grid HorizontalAlignment="Left">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Image HorizontalAlignment="Left" Width="48" Height="48" Source="{Binding Author.Avatar}" Grid.Column="0" VerticalAlignment="Top"/>
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Padding="12 0" Grid.Column="1" Text="{Binding Summary}"></TextBlock>
                                </Grid>
                                <Canvas Background="#FF2B6695" Height="2" Width="1600" Margin="0 12 12 0"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

布局可無視。

 

下面是廣告時間，憑良心進。

 

windows 應用商店app（windows 8.1 +）：http://apps.microsoft.com/windows/zh-cn/app/4f20c8c7-2dfa-4e93-adcb-87acde53d4be

windows phone 應用商店app（windows phone 8.1 +）：http://www.windowsphone.com/s?appid=71e79c48-ad5d-4563-a42f-06d59d969eb8

第一版功能比較雞肋，后續版本將添加更多功能。如果有什么好的建議的，希望在商店里提出，或者博客里留言，我將綜合各方意見打造一個體驗更好的win平台的博客園app。

 

最后曬下圖吧：