Silverlight中使用MVVM(1)

Silverlight中使用MVVM(1)

 

    Silverlight中使用MVVM(1)--基礎 

    Silverlight中使用MVVM(2)—提升 

    Silverlight中使用MVVM(3)—進階 

    Silverlight中使用MVVM(4)—演練

     這是我第一篇關於設計模式方面的文章，之前除了對單例模式等幾個經常使用的模式有所研究以外，對設計模式不是過重視，總以爲要到必定的程度才須要接觸，

最近的項目中使用了MVVM模式，因此這段時間查閱了大量這方面模式的文章，理論上的東西你們都說的比較好，這裏我也不大談MVVM模式的優點了，只是

美中不足的是大部分給出的示例中，對於一個沒有用過MVVM模式的人而言，這些例子老是給人一種摸不着頭緒的感受，因此我想將我學習MVVM的過程一步步

寫下來，但願對於和我同樣，剛剛接觸MVVM這個模式的人有一點點幫助。

     若是你不知道MVVM模式，我建議你先了解一下MVVM模式，至少要知道實現該模式的意圖是什麼。

     那麼我主要經過我認爲是已經算是比較簡單的例子進行講解這個模式，固然後面咱們會在這個例子的基礎上一步一步的進行擴展。

     先來看一看咱們的項目架構：

                

     很典型的MVVM的分層方式

     咱們先來構建Model，首先在Person.cs中簡單聲明瞭一個類型

        public class Person

       {

         public int age  { get; set; }

         public string name { get； set;}

       }

     類型定義好後，咱們在Persons.cs中獲得一個Person的集合

        public class Persons

       {

        public List<Person> person;

        public List<Person> getPerson()

        {

            person = new List<Person>() 

            { 

                new Person{name = "Tom",  age = 21 },

                new Person{name = "Jack", age = 22 },

                new Person{name = "Rose", age = 23 },

            };

            return person;

        }

     }

     那麼這裏咱們就簡單的完成了Model的工做，下面開始完成ViewModel部分的工做

       public class PageViewModel  

       {

       public List<Person> Human { get; set; }

       public PageViewModel()

       {

           Human = new Persons().getPerson();

       }      

       }

     ViewModel也設計的很簡單，只是簡單的獲取了以前定義的集合。

     下面就是PageView部分了，這裏用DataGrid進行顯示數據

          <data:DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding Path=Human}" HorizontalAlignment="Left" Margin="36,51,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="200">

            <data:DataGrid.Columns>

                <data:DataGridTemplateColumn>

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <StackPanel>

                                <TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding name}" VerticalAlignment="Top" />

                                <TextBlock Height="23" HorizontalAlignment="Left" Name="textBlock2" Text="{Binding age}" VerticalAlignment="Top" />

                            </StackPanel>

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                </data:DataGridTemplateColumn>

            </data:DataGrid.Columns>

        </data:DataGrid>

     這裏咱們將DataGrid的源設爲Human，這樣咱們就完成了MVVM模式各個層次的初步構建，關鍵的問題是怎樣將這幾個部分有效的聯繫起來

     咱們將PageView，PageViewModel引入到MainPage中

       <UserControl x:Class="UseMVVMInApp.MainPage"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       mc:Ignorable="d"

       xmlns:viw="clr-namespace:UseMVVMInApp.View"

       xmlns:vmmodel="clr-namespace:UseMVVMInApp.ViewModel"

       d:DesignHeight="300" d:DesignWidth="400">

       <UserControl.Resources>

        <vmmodel:PageViewModel x:Key="vm"></vmmodel:PageViewModel>

       </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm}" >

        <viw:PageView></viw:PageView>

      </Grid>

      </UserControl>

      這裏的工做就是將PageViewModel聲明爲一個資源，而後經過頁面引用它，這樣就實現了咱們所謂的MVVM模式。

                              

       固然了，這個例子是很簡單的，彷佛用MVVM模式未免小題大做，可是實際上，頁面與邏輯分離的狀況下，咱們改動其中任何一個部分都是比較清楚的。

       好吧，這篇就到這裏

 

原文引入：http://www.cnblogs.com/626498301/archive/2010/08/17/1801475.html