彩票走势图

    上一篇文章中，我们使用Mindscape WPF Elements创建了仪表盘应用程序，本文我们将接着前面的文章，介绍如何创建一个功能完善的仪表盘，以及用户如何通过选择时间范围来显示数据的数据表格。

添加WPF Elements

    在仪表盘项目中，给Mindscape.WpfElements添加一个引用，这样你就可以直接从安装它的文件夹里面或者是你复制的文件夹里面直接引用，值得注意的是，如果是复制的话，一定要注意复制.lic文件，然后还需要添加一个Licenses.licx到属性文件夹中。

 添加属性到模型

    接下来，我们将会添加属性到这个可视化的模型中去，在视图中进行控件绑定，所需要的属性之一就是在选择的时间范围内，存储所有的产品的总收入的双倍值，所以需要添加一个双域到一个叫totalRevenue的仪表可视化模型，然后添加再这样的双重属性：

private double _totalRevenue;
 
public double TotalRevenue
{
  get { return _totalRevenue; }
  private set
  {
    _totalRevenue = value;
    NotifyOfPropertyChange(() => TotalRevenue);
  }
}

     在这里你会看见getter返回简单的字段，setter正在使用Caliburn Micro NotifyOfPropertyChanged方法去提升属性更改通知，这就意味着，当更改视图模型中的属性值时，我们绑定到属性上的控件在稍后就将会进行相应的数据更新。在这里我们所需要的一些其他简单的属性是开始日期、结束日期、显示径向仪表的几个属性。由于时间资源管理器将会使用一个双向绑定，所以开始日期和结束日期需要有一个公有的setter，这就使得模型在用户改变时间之后能够知道时间范围。对于图表，每个系列的数据需要绑定到一个搜集数据点的属性上，时间资源管理器显示了一种数据，其他的两个图表每个显示3种数据，每个产品类型之一。最后是在当前时间范围内的在数据表格中显示的订单搜集，当用户改在时间资源管理器上改变范围时，图表上所有的时间资源，以及数据都将会进行更新，对于这种应用，我做了这些属性，得到一个IList集合，在其他应用程序中，你可能会想要使用这种可查看的集合，比如要小幅度的更新的项目资源，如随着时间添加数据点。

生成数据

    现在需要给属性赋值，仪表数据源将会是随机的订单集合，在这个可视化的模型中，我吗将会存储所有的订单列表，用于任何时间范围变化时计算值。在这篇文中，你将会看见我将它放在一个叫allOrders的域中，在视图模型的构成中，我使用我添加到模型文件夹中的RandomDataBuilder帮助类来设置这个域。

    在时间资源管理器中的图表总是娴熟一样的数据，所以在随机生成数据之后，我们可以使用一个循环来遍历所有的订单，合计所有的成本数据到两个小时段，结果搜集将会用于设置在时间资源管理器上面显示的占用属性。

    只要用户改变了时间的范围，所有的数据将会进行更新，当日期范围改变的时候，我们有一种方法更新这些属性，我把它叫做UpdateData。当应用程序开始的时候，我们将会设置一个默认的时间范围，再调用这种更新方法，在当前的时间范围内，方法将会通过命令循环访问两个小时时间段，当前日期范围内的 3 种产品类型销售。数据也会以相同的国家分组，来排名前十的国家，最后再总计收益。这些所用到的属性都会被设置在视图模型适当的属性下边。

添加控件到视图

    现在这个视图模型有一些数据显示，再向DashboardView.xaml中添加控件。首先确定Mindscape WPF Elements的名字空间。在最上面，是包含总收入的概要图表的时间资源管理器。时间资源管理器包含了范围开始时间和结束时间属性，用来控制内部视图端口滑块。这些属性将会绑定到视图模型的开始时间和结束时间。现在使用一种双向绑定，以便当用户改变时间范围的时候我们可以得到在视图模型中的值。当应用程序运行时，Caliburn micro就会设置视图的数据上下文为可视化模型，绑定也是非常直接的。

<ms:TimeExplorer Grid.Row="1" Grid.ColumnSpan="2" RangeStartTime="{Binding StartDate, Mode=TwoWay}" RangeEndTime="{Binding EndDate, Mode=TwoWay}">
  <ms:Chart>
    <ms:AreaSeries ItemsSource="{Binding RevenueSummary}" />
  </ms:Chart>
</ms:TimeExplorer>

    对于图表和数据表格，我简单的绑定项目资源到适当的属性集合，右下角的仪表盘、文本的标签和仪表的值绑定到适当的属性。模型管理数据和视图绑定到模型中，运行应用程序将会得到如下的效果：

连接事件

    现在来实现仪表盘的互动性。在这里边主要的交互性来自时间资源管理器，记得我们在前面绑定了时间资源管理器的开始和结束值到模型的属性中去，你可能会认为这些属性的setter是个调用UpdateData方法的好地方，但是当用户拖拽窗口时，属性会不断的变化，这将会滥用UpdateData方法导致性能死掉。相反，时间管理器提供了一个事件来提升用户完全更改范围的操作，而我们需要做的是监听这个事件引起，然后调用UpdateData方法。

cal:Message.Attach="[Event TimeRangeChanged] = [Action UpdateData()]"

现在示例中的所有的控件将会在任何时候时间范围变化时更新显示数据：

    右下角的按钮是可以链接到网站的，当点击这个按钮，在视图模型中的方法就会打开网页，但是如果你查看XAML时，这个按钮没有任何事件的监听代码。

<Button Name="VisitWebsite" Grid.Row="1" Style="{StaticResource LinkButtonStyle}" HorizontalAlignment="Left" ToolTip="Visit the Mindscape website">
  <TextBlock Text="Built with Mindscape WPF Elements" FontSize="16" FontFamily="Segoe UI" Foreground="DarkGray" />
</Button>

    相反，我使用的是一个Caliburn Micro命名约定，由于按钮和这个访问网页的方法有着一样的名字，所以的那个点击的时候，方法就会被调用。

数据过滤

    现在来实现仪表顶部的那三个数据过滤，构想是其中一个按钮被按下，其他按钮就变成半透明，同时一些图表会消失，留下用户感兴趣的数据。这标明我们需要引入3个布尔属性在可视化模型中，指定特定产品的数据类型是否应该显示，每个按钮都可以绑定到这些属性，并且使用转换器改变透明度。

     通过设置图表的可见性你可以隐藏图表的数据，在这里可以轻松的绑定图表的可见性到属性上，并且使用BooleanToVisibilityConverter。

ms:StackedAreaSeries ItemsSource="{Binding Product1Data}" SeriesBrush="{StaticResource ProductColor1}" Title="{x:Static local:DashboardViewModel.ProductName1}"
                      Visibility="{Binding IsProduct1Displayed, Converter={StaticResource bvc}}" />

    现在需要实现点击按钮实现图表中的数据过滤，可以使用之前在时间资源管理器一样的方法实现，现在所有三个按钮都将调用相同的方法，所以这一次我们将包括一个事件参数，这样的话方法就会知道是哪一种类型将要被过滤，我只是使用整数1、2和3指定不同的产品类型，你可以使用Caliburn Micro包括事件类型如下：

cal:Message.Attach="[Event Click] = [Action Filter(1)]"