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应用程序,本程序未设计到与数据库的交互,下一篇将会有所涉及。
最新文章
- Spring-test使用JUnit时,测试类autowired报错,create bean error
- django的前后的结合,search搜索功能案例
- Tomcat安装及配置
- mysql命令行操作
- (转)iOS消息推送机制的实现
- 1Android系统移植与驱动开发概述
- HDU 1540 Tunnel Warfare 线段树区间合并
- Lazy evaluation
- php缓存生成及更新实现参考哦
- hdu3081 Marriage Match II
- Ubuntu下安装pytorch(GPU版)
- AutoIt介绍
- JavaScript性能优化小知识总结
- Django-项目配置
- Ubuntu服务器的anaconda环境修复办法(自动进入base环境怎么办?)
- 20170617xlVBA调查问卷基础数据分类计数
- spring的jar包以及相关的API文档的下载方式
- ambassador 学习一基本试用
- Hash表及hash算法的分析
- Metabase 从 H2 迁移到 MySQL 踩坑指南
热门文章
- kaggle之旧金山犯罪
- Error &#39;Cannot add or update a child row: a foreign key constraint fails故障解决
- 【欧拉函数】【HDU1286】 找新朋友
- IE 中创建 子窗口 传值 与接收值 【window.showModalDialog】
- WinForm实现窗体最小化后小图标在右边任务栏下
- 【27前端】在线css三角
- sql 事务和回滚
- 初识nginx+tomcat
- Path Sum,Path Sum II
- CDZSC_2015寒假新人(1)——基础 b