Silverlight学习（二）

好久没来写博客了，这期间经历了春节，也因为忙于一个项目，所以博客被疏忽了。最近一段时间一直在用silverlight做项目，从来一开始的不熟悉渐渐的开始上手。今天记录一下自己学习prism的一些samplecode。

silvierlight目前的主流架构是Silverlight+MVVM+WCF RIA，说来惭愧本人做项目的时候对设计模式不是很了解。MVVM设计模式是指模型（Model）-视图（View）-视图模型（ViewModel），MVVM设计模式能够将程序的UI设计和逻辑设计分开，这样能够节省开发人员的大量时间，也可以使代码更容易维护和升级等。View是指UI，是用来展示的，Model可以定义一些数据访问的实体类，ViewModel是连接model层和view层的桥梁，它是中间层，主要用来一些业务逻辑的设计，这里包括与数据库的交互。

Prism是微软提供的一个用于Silverlight和WPF开发的框架。

下面重点讲讲Prim+MVVM的实现。

1.需要新建一个Silverlight应用程序，分为Silverlight服务端和客户端两部分，需要在Silverlight客户端添加View、Model、ViewModel几个文件夹，分别对应MVVM设计模式。

2.在Model中添加类Questionnaire

     /// <summary>
     /// 定义Model,如果需要监听属性的变化，需要继承INotifyPropertyChanged类
     /// </summary>
     public class Questionnaire:INotifyPropertyChanged
     {
         private string favoriteColor;
         public Questionnaire()
         {
         }
         public event PropertyChangedEventHandler PropertyChanged;

         public string Name { get; set; }

         public int Age { get; set; }

         public string Quest { get; set; }

         public string FavoriteColor
         {
             get
             {
                 return this.favoriteColor;
             }

             set
             {
                 //监听颜色属性的变化
                 if (value != this.favoriteColor)
                 {
                     this.favoriteColor = value;
                     if (this.PropertyChanged != null)
                     {
                         this.PropertyChanged(this, new PropertyChangedEventArgs("FavoriteColor"));
                     }
                 }
             }
         }
         private string getText;
         public string GetText
         {
             get { return getText; }
             set
             {
                 //监听字符的变化
                 if (value != this.getText)
                 {
                     this.getText = value;
                     if (this.PropertyChanged != null)
                     {
                         this.PropertyChanged(this, new PropertyChangedEventArgs("GetText"));
                     }
                 }
             }
         }
     }

Model

3.添加在modelview文件夹中添加questionnaireviewmodel类

   /// <summary>
     /// 定义viewModel
     /// </summary>
     public class QuestionnaireViewModel
     {
         private readonly  Questionnaire questionnaire;

         public QuestionnaireViewModel()
         {
             this.questionnaire = new Questionnaire();
             this.AllColors = new[] { "Red", "Blue", "Green" };

             this.SubmitCommand = new DelegateCommand<object>(this.OnSubmit);//实例化一个command，DelegateCommand引用类库 Microsoft.Practices.Prism.Commands

         }
         /// <summary>
         /// 定义Model的属性
         /// </summary>
         public Questionnaire Questionnaire
         {
             get { return this.questionnaire; }
         }

         public IEnumerable<string> AllColors { get; private set; }
         /// <summary>
         /// 定义一个command，可以绑定到控件上
         /// </summary>
         public ICommand SubmitCommand { get; private set; }

         private void OnSubmit(object obj)
         {
             questionnaire.GetText = this.BuildResultString().ToString(); 

         }

         private string BuildResultString()
         {
             StringBuilder builder = new StringBuilder();
             builder.Append("Name: ");
             builder.Append(this.questionnaire.Name);
             builder.Append("\nAge: ");
             builder.Append(this.questionnaire.Age);
             builder.Append("\nQuestion 1: ");
             builder.Append(this.questionnaire.Quest);
             builder.Append("\nQuestion 2: ");
             builder.Append(this.questionnaire.FavoriteColor);
             return builder.ToString();
         }
     }

4.在view文件夹中添加QuestionView，用来显示

 d:DesignHeight="" d:DesignWidth="">
    <!--绑定ViewModel，获取上下文消息，这里面一般包括需要绑定的字段、类、方法等-->
    <UserControl.DataContext>
        <vm:QuestionnaireViewModel></vm:QuestionnaireViewModel>
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height=""/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

        <ScrollViewer Grid.Row="" Grid.ColumnSpan="" VerticalAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Border Grid.Row="" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="" Grid.Row="" VerticalAlignment="Bottom"><Run Text="Name"/></TextBlock>
                        <TextBox x:Name="NameTextBox" Grid.Column="" Grid.Row="" Text="{Binding Questionnaire.Name, Mode=TwoWay}" Width="" Margin="" />

                        <TextBlock Grid.Column="" Grid.Row="" VerticalAlignment="Bottom"><Run Text="Age"/></TextBlock>
                        <TextBox x:Name="AgeTextBox" Grid.Column="" Grid.Row="" HorizontalAlignment="Left" Text="{Binding Questionnaire.Age, Mode=TwoWay}" MaxLength="" Width="" Margin="" />

                    </Grid>
                </Border>

                <Grid Grid.Row="" Margin="" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Row="" Text="What is your quest?" Style="{StaticResource QuestionLabelStyle}" />
                    <TextBox x:Name="Question1Response" Grid.Row="" Text="{Binding TestClass.Quest, Mode=TwoWay}" />
                </Grid>

                <Grid Grid.Row="" Margin="">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="" Style="{StaticResource QuestionLabelStyle}">
                        <Run Text="What is your favorite "/><Run x:Name="ColorRun" Text="color" Foreground="{Binding Questionnaire.FavoriteColor, TargetNullValue=Black}"/><Run Text="?"/>
                    </TextBlock>

                    <Border Grid.Row="" Style="{StaticResource BorderBrush}">
                        <ListBox x:Name="Colors" IsTabStop="False" ItemsSource="{Binding AllColors}" Margin=""
                                 SelectedItem="{Binding Questionnaire.FavoriteColor, Mode=TwoWay}">
                        </ListBox>
                    </Border>
                </Grid>
            </Grid>
        </ScrollViewer>
        <TextBlock Grid.Row="" Grid.Column="" Text="{Binding Path=Questionnaire.GetText,Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="" Height=""></TextBlock>
        <Button x:Name="SubmitButton" Command="{Binding SubmitCommand}" Grid.Row="" Grid.Column="" Content="Submit" Height="" HorizontalAlignment="Right" Width=""/>
    </Grid>

View

设计前台，并未控件绑定数据。其中Button控件绑定了无参数的ICommand命令，后台为DelegateCommand。通过Button控件 我们可以获取到数据源的变化，并将它显示到页面上。。

5.在MainPage主页面添加已经设计好的页面。

 <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="SilverlightApplication4.MainPage"
              xmlns:view="clr-namespace:SilverlightApplication4.View"
              xmlns:viewModel="clr-namespace:SilverlightApplication4.ViewModel"
     Width="" Height="">
     <Grid x:Name="LayoutRoot" Background="White" >
         <view:QuestionnaireView></view:QuestionnaireView>
             <!--<view:PersonViewList DataContext="myele"></view:PersonViewList>-->
     </Grid>
 </UserControl>

Main

这样就玩一个了基本的Silverlight应用程序，本程序未设计到与数据库的交互，下一篇将会有所涉及。