zoukankan      html  css  js  c++  java
  • 【MVVMLight小记】二.开发一个简单图表生成程序附源码

      上一篇文章介绍了怎样快速搭建一个基于MVVMLight的程序http://www.cnblogs.com/whosedream/p/mvvmlight1.html算是简单入门了下,今天我们来做一个稍许复杂点的应用,关于这个应用我是找了个CodePlex上的小例子加以改造的。

    需求大致如下

    1.用户输入一定规格的数据

      例如:

    •     buy car;100000
    •     buy bike;3000
    •     receive;20000

    2.用户自定义类别,并将索引值(指用于匹配数据的关键字)关联上类别

      例如:

    •    category name: 买车   ,token value:car 
    •    category name:  买自行车,token value: bike
    •          category name:    收入,token value: receive

    3.程序根据类别以及它所关联的索引,生成饼状图。

      具体的逻辑我们就不去分析了,这里我们是要用MVVM思想去开发,当然还得是基于MVVMLight的。

      首先无论如何,我们会设计一个主页面,然后1,2,3功能各一个页面嵌入到主页面中去,这里我们就用tab标签进行控制页面切换,假设我们的View已经设计好了

    每一个View肯定都会有一个ViewModel,并且一个ViewModel可能会包含其它的ViewModel,我们要开发的ViewModel也会是这么个结构,如下图

      主页面绑定了一个MainViewModel,而MainViewModel还包含了三个ViewModel,分别用来绑定对应的Tab标签页面,category1,category2之类也就是Model

    App.xaml

     <Application.Resources>
            <vm:ViewModelLocator x:Key="Locator"
                                 d:IsDataSource="True" />
    
        </Application.Resources>

    App的资源文件照例添加ViewModelLocator资源,用来实现IOC功能

    ViewModelLocator代码

      /// <summary>
            /// Initializes a new instance of the ViewModelLocator class.
            /// </summary>
            public ViewModelLocator()
            {
                ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
                SimpleIoc.Default.Register<MainViewModel>();
            }
    
            /// <summary>
            /// 主界面ViewModel包含了3个子ViewModel
            /// </summary>
            public MainViewModel Main
            {
                get
                {
                    return ServiceLocator.Current.GetInstance<MainViewModel>();
                }
            }

    关于命令绑定,看一段稍许复杂点的listbox的命令绑定

      <ListBox x:Name="CategoryListbox" 
                                 Margin="0,28,15,0" 
                                 ItemsSource="{Binding Categories}"
                                 SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" >
                            <ListBox.ItemTemplate>
                                <DataTemplate >
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock TextWrapping="Wrap" Text="{Binding Name}" Margin="2,0" VerticalAlignment="Center" MinWidth="100"/>
                                        <Button>
                                            <i:Interaction.Triggers>
                                                <i:EventTrigger EventName="Click">
                                                    <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding RemoveCommand}" />
                                                </i:EventTrigger>
                                            </i:Interaction.Triggers>
                                            <Image Height="16" Source="/BankCharts.Silverlight;component/Media/Pictures/Remove.png" Stretch="Fill" Width="16"/>
                                        </Button>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

    对应下图

    要实现点击X删除项

    我们看到Command绑定的是RemoveCommand,来看看后台如何实现的

            //列表项上删除类别命令
            public RelayCommand RemoveCommand { get; set; }
         
    
            public void PrepareCommand()
            {
                RemoveCommand = new RelayCommand(Remove);
              
            }
    
    
            public void Remove()
            {
                //容器中移除当前项
                _parent.RemoveCategory(this);
            }        

    定义了一个RelayCommand,它是何方神圣?

     public class RelayCommand : ICommand

    知道了吗,它是MVVMLight的对ICommand的一层包装

    想了想代码太多,一一贴出未免嫌啰嗦,那就总结下

    View关联上ViewModel,CRUD业务逻辑写在ViewModel中,ViewModel操作Model,Model承载数据。

    上一张效果图

    源码下载  如果觉得有帮助就顶一个吧,让我乐呵乐呵

  • 相关阅读:
    10 个雷人的注释,就怕你不敢用!
    Java 14 之模式匹配,非常赞的一个新特性!
    poj 3661 Running(区间dp)
    LightOJ
    hdu 5540 Secrete Master Plan(水)
    hdu 5584 LCM Walk(数学推导公式,规律)
    hdu 5583 Kingdom of Black and White(模拟,技巧)
    hdu 5578 Friendship of Frog(multiset的应用)
    hdu 5586 Sum(dp+技巧)
    hdu 5585 Numbers
  • 原文地址:https://www.cnblogs.com/whosedream/p/3328643.html
Copyright © 2011-2022 走看看