【MVVMLight小记】二.开发一个简单图表生成程序附源码

时间:2021-12-25 19:39:56

  上一篇文章介绍了怎样快速搭建一个基于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已经设计好了

【MVVMLight小记】二.开发一个简单图表生成程序附源码

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

【MVVMLight小记】二.开发一个简单图表生成程序附源码

  主页面绑定了一个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>

对应下图

【MVVMLight小记】二.开发一个简单图表生成程序附源码

要实现点击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承载数据。

上一张效果图

【MVVMLight小记】二.开发一个简单图表生成程序附源码

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