美国银行卡Payoneer注册奖励25美元

我在csdn以前写过的一系列文章,关于Silverlight4的。希望对Silverlight的新手有帮助。

代码下载:

http://www.n-pei.com/download/SLVM_Product.rar


 part1: 如何使用RIA Services

part2: RIA Services更新和验证

part3:RIA Services数据新增

part4:皮肤的更改

part5:报表的展示

part6:Endpoint的设置

part7:如何使用RIA Service Class Library

part8:url重写和界面友好

part9:MVVM+RIA Service


周末就是爽,可以写很多自己喜欢的代码。。

今天花了6个小时去试着把第二篇MVVm+RIA service的例子写出来。代码写的我都有点晕了,特别是页面的style我发现比我后台写代码还要花更多时间,看出来我是不会blend了,也不是搞设计的。

 MVVM模式中使用RIA Service提供数据,说白了Model部分其实已经差不多自动生成很多了。你可以再加以改造就可以了,不需要花很大力气去写那么多model了。

这里我使用一个数据库表中的Product为例子来实现增删改查功能。我先声明这篇文章描述的不是纯粹的MVVM模式,因为未使用ICommand。因为对ICmmand不是很熟悉,我准备下一篇MVVm中再去使用它,供大家学习。

页面的布局如下:

 

 

如果你有兴趣研究这个我一会把代码上传供你们下载。

先说说如何来实现的吧。

1. 创建Business Application 模板。

2. 创建Domain Service。

3. 辅助类和资源的编写

4. Model部分的完成

5. ViewModel部分的功能

6. View界面的完成

7. 绑定数据:

 

1.       创建Business Application模板:

  这个就不用说了,你可以使用其它的模板,只要选上RIA Service就行了。

2.       创建Domain Service:

我选用的表名字叫Product:

 

 

创建好这个ADO.NET Data Model后,按步骤创建Domain Service。需要注意的是在Domain Service自动生成后需要添加一个查询方法:

 

 

通过productID来查询到需要的product.

3.       辅助类和资源文件的编写:

辅助的类主要是两个转换时间和货币单位的:

 

这个是时间格式的转换,你也可以不使用它,它的使用时在数据绑定时在blinding: field,Converter= 这种方式使用。具体的使用轻参看代码。

因为不像直接把DomainContext拖到xaml页面中那样子方便,所以很多验证都需要在Model里来搞定。你可以使用try catch来警告,或者是使用Tooltip,我这里是使用了自定义的方法来验证。比如我某个字段为空时我点击保存:

 

所有的警告信息我都是用Resource文件管理,这样以后容易修改。

 

4.       Model部分的完成:

在MVVM中Model的作用就是能够为View提供数据,至于一些其他功能等操作都交给ViewModel部分处理。

这里我们因为是使用RIA Service,所以一定记得把如下两个namespace加进来:

 

Model部分的代码比较多,我这里就只给大家贴个类结构图:

 

前面的两个事件委托类都用来处理错误出现时和当数据交换完成事件发生时执行的动作。

ProductModel类其实已经不是个纯粹的Model类,它里面有很多和RIA Service的数据交互处理。也算是准备数据。Product是个Enumerator 他才是最终要提供数据的实体。

这里需要注意Delete product时,因为Domain Context提供的方法中remove()返回结果是void,而我们需要让delete事件发生时返回一个bool类型来确定是否记录删除成功,所以方法如下:

 

5.       ViewModel部分的功能

    

Base类是个抽象类,后面的productviewModel类继承它,在View部分绑定时需要绑定的是ProductCollection的数据到某个DataGrid或者是自定义的模板等。

6.       View界面的完成:

 这部分我试着去使用Style和LinearGradientBrush伤的来做个好看点页面,很费劲,建议你使用blend。

有3个UserControl:

1.       Banner:

 

<UserControl.Resources>
        <!-- Main var that runs accross the banner-->
        <Style x:Key="BannerBar" TargetType="Rectangle">
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCDCDCD" Offset="0.02"/>
                        <GradientStop Color="#FF9D9D9D" Offset="0.07"/>
                        <GradientStop Color="#FF5D5D5D" Offset="0.45"/>
                        <GradientStop Color="#FF282828" Offset="0.55"/>
                        <GradientStop Color="#FF121212" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Inlay where banner text sits-->
        <Style x:Key="BannerInlay" TargetType="Rectangle">
            <Setter Property="RadiusX" Value="6" />
            <Setter Property="RadiusY" Value="6" />
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF666868" Offset="0"/>
                        <GradientStop Color="Black" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Stroke">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF949494" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Texted displayed in the banner-->
        <Style x:Key="BannerInlayText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="#FF868686" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Rectangle Height="50" Style="{StaticResource BannerBar}"/>
        <Rectangle HorizontalAlignment="Center" Height="40" Margin="5"  Width="260" Style="{StaticResource BannerInlay}" />
        <TextBlock HorizontalAlignment="Center" Height="50" Text="Product management" Style="{StaticResource BannerInlayText}" />
    </Grid>

 

2.       Detail页面:

 

3.       主页面:

 

Banner是加在主页面的一个表头部分。

Detail页面时在主页面上的按钮点击时才会出现的。

比如点击了Add Product:

// product
            Product product = new Product();

            DetailsPage details = new DetailsPage();

            details.ProductViewModel = viewModel;

            details.DataContext = product;

            details.DialogClosed += (s, a) =>
                {

                    if (details.DialogResult == DialogResult.Ok)

                    {

                        this.viewModel.Addproduct(product);

                        HtmlPage.Window.Alert("A new product has been added successfully");

                    }

                    tpWorkspace.Items.Remove((s as UserControl).Parent);

                };

            this.AddTab(details, "Adding new product...");

在Tab部分添加一个item。。。。

7.       数据的绑定

 

绑定就比较简单了,在页面的Resources中添加上ViewModel,然后在下面的控件中就可以绑定数据了。

说得不够详细,大家可以自己看看代码。

Cheers

 

posted on 2010-06-13 18:43  Nic Pei  阅读(3397)  评论(7编辑  收藏  举报