Silverlight开发之MVVM模式

      前段时间做Silverlight开发，用到了经典的MVVM开发模式，MVVM开发模式的组织形式有多种，但是万变不离其中，就是Module-View-ViewModule的形式，下面就以一个最简单的示例来讲解一下。

首先打开VS 2010，新建一个Silverlight应用程序：

然后在LeoSLWebPart项目上建立三个文件夹，分别为：Module，View和ViewModel：

在Module文件下添加一个DataModule.cs的类文件，这个用来定义我们的Module对象，然后在里面写下如下的代码： 

public class DataModule
    {
        public string ID
        {
            get;
            set;
        }

        public string Title
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }

        public DataModule() { }

        public DataModule(string id, string title, string name)
        {
            this.ID = id;
            this.Title = title;
            this.Name = name;
        }
    }

 再在ViewModule文件夹下添加一个名为GetDataViewModule.cs的类文件，用来获取数据，我这里只做一个简单的Demo，所以就直接赋给它一些静态的数据，代码如下：

public class GetDataViewModule
    {
        public ObservableCollection<DataModule> AllData { get; set; }

        public GetDataViewModule()
        {
            AllData = new ObservableCollection<DataModule>();
            LoadData();
        }

        private void LoadData()
        {
            AllData.Clear();
            AllData = GetAllData();
        }

        public ObservableCollection<DataModule> GetAllData()
        {
            ObservableCollection<DataModule> allData = new ObservableCollection<DataModule>();
            allData.Add(new DataModule
            {
                ID = "0001",
                Title = "afda",
                Name = "Leo"
            });
            allData.Add(new DataModule
            {
                ID = "0002",
                Title = "aawa",
                Name = "Edmund"
            });
            return allData;
        }
    }

然后再到View文件夹下添加一个名为DataViewPage.xaml的Silverlight页面，并且在页面里面添加一个DataGrid控件用于展示数据，在<navigation:Page>标签下添加一个引用ViewModule的语句：

xmlns:vm="clr-namespace:LeoSLWebPart.ViewModule"

然后添加如下代码，将刚刚开发的GetDataViewModule作为其静态数据源： 

<navigation:Page.Resources>
    <vm:GetDataViewModule x:Key="gdvm"/>
</navigation:Page.Resources>

页面的详细代码如下：

    <Grid x:Name="LayoutRoot" DataContext="{StaticResource gdvm}">
        <data:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding AllData}" IsReadOnly="True" Height="200" HorizontalAlignment="Left" Margin="0,4,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="400" >
            <data:DataGrid.Columns>
                <data:DataGridTemplateColumn Header="ID">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding ID}" />
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
                <data:DataGridTemplateColumn Header="标题">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" />
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
                <data:DataGridTemplateColumn Header="姓名">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}"/>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>

还有一步，在App.xaml.cs文件中找到Application_Startup方法，将其中的代码修改为this.RootVisual = new DataViewPage();

最后将解决方案生成，在浏览器中查看，就可以看到下图所示的结果了：