上一篇文章中，我們使用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)]"