SilverlightでのMVVMの使用(1)--基本

14384 ワード

http://www.cnblogs.com/626498301/archive/2010/08/17/1801475.htmlから
 
    SilverlightでのMVVMの使用(1)--基本  
    SilverlightでのMVVM(2)の使用:向上  
    SilverlightでのMVVMの使用(3)-ステップアップ  
    SilverlightでMVVM(4)を使用する-練習
これは私の最初の設計モードに関する文章で、以前は単例モードなどいくつかのよく使われるモードについて研究した以外に、設計モードに対してあまり重視していないで、いつもある程度まで接触する必要があると感じて、
最近のプロジェクトではMVVMモードが使われているので、この間このモードの文章をたくさん調べました.理論的なことはみんな言ったほうがいいです.ここではMVVMモードの優位性はあまり話しません.
アメリカで不足しているのは、ほとんど与えられた例の中で、MVVMモードを使ったことがない人にとって、これらの例はいつも手がかりがつかめない感じがしますので、MVVMを学ぶ過程を一歩一歩進めたいと思います.
書いて、私と同じようにMVVMというモードに触れたばかりの人に少しでも助けてほしいです.
MVVMモードを知らない場合は、MVVMモードを理解して、少なくともこのモードを実現する意図を知っておくことをお勧めします.
では、私は主に私がすでに比較的簡単な例だと思って説明することを通じて、もちろん後で私たちはこの例の基礎の上で一歩一歩拡張します.
まず、私たちのプロジェクトアーキテクチャを見てみましょう.
                QQ截图未命名
典型的なMVVMの階層化方式
まずモデルを構築し、まずPersonでcsでは単純にタイプが宣言されています
        public class Person 
       { 
         public int age  { get; set; } 
         public string name { getset;} 
       }

タイプが されたら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の を し、 はView Modelの の を します.
       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,PageView Modelを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モードを します.
                              QQ
もちろん、この は で、MVVMモードでは げさなことを っているようですが、 には、ページと が されている 、どの を しても らかです.
よし、これはここまで