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"));
                    }
                }
            }
        }
    }

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("
Age: ");
            builder.Append(this.questionnaire.Age);
            builder.Append("
Question 1: ");
            builder.Append(this.questionnaire.Quest);
            builder.Append("
Question 2: ");
            builder.Append(this.questionnaire.FavoriteColor);
            return builder.ToString();
        }
    }

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

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

        </Grid.ColumnDefinitions>

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

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

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

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

                    </Grid>
                </Border>

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

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

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

                    <TextBlock Grid.Row="0" 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="1" Style="{StaticResource BorderBrush}">
                        <ListBox x:Name="Colors" IsTabStop="False" ItemsSource="{Binding AllColors}" Margin="5"
                                 SelectedItem="{Binding Questionnaire.FavoriteColor, Mode=TwoWay}">
                        </ListBox>
                    </Border>
                </Grid>
            </Grid>
        </ScrollViewer>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=Questionnaire.GetText,Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" Height="30"></TextBlock>
        <Button x:Name="SubmitButton" Command="{Binding SubmitCommand}" Grid.Row="1" Grid.Column="1" Content="Submit" Height="23" HorizontalAlignment="Right" Width="75"/>
    </Grid>

设计前台，并未控件绑定数据。其中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="640" Height="480">
    <Grid x:Name="LayoutRoot" Background="White" >
        <view:QuestionnaireView></view:QuestionnaireView>
            <!--<view:PersonViewList DataContext="myele"></view:PersonViewList>-->
    </Grid>
</UserControl>

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