上一篇文章中，我們使用Mindscape WPF Elements創(chuàng)建了儀表盤應(yīng)用程序，本文我們將接著前面的文章，介紹如何創(chuàng)建一個功能完善的儀表盤，以及用戶如何通過選擇時間范圍來顯示數(shù)據(jù)的數(shù)據(jù)表格。

添加WPF Elements

    在儀表盤項目中，給Mindscape.WpfElements添加一個引用，這樣你就可以直接從安裝它的文件夾里面或者是你復(fù)制的文件夾里面直接引用，值得注意的是，如果是復(fù)制的話，一定要注意復(fù)制.lic文件，然后還需要添加一個Licenses.licx到屬性文件夾中。

 添加屬性到模型

    接下來，我們將會添加屬性到這個可視化的模型中去，在視圖中進(jìn)行控件綁定，所需要的屬性之一就是在選擇的時間范圍內(nèi)，存儲所有的產(chǎn)品的總收入的雙倍值，所以需要添加一個雙域到一個叫totalRevenue的儀表可視化模型，然后添加再這樣的雙重屬性：

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

     在這里你會看見getter返回簡單的字段，setter正在使用Caliburn Micro NotifyOfPropertyChanged方法去提升屬性更改通知，這就意味著，當(dāng)更改視圖模型中的屬性值時，我們綁定到屬性上的控件在稍后就將會進(jìn)行相應(yīng)的數(shù)據(jù)更新。在這里我們所需要的一些其他簡單的屬性是開始日期、結(jié)束日期、顯示徑向儀表的幾個屬性。由于時間資源管理器將會使用一個雙向綁定，所以開始日期和結(jié)束日期需要有一個公有的setter，這就使得模型在用戶改變時間之后能夠知道時間范圍。對于圖表，每個系列的數(shù)據(jù)需要綁定到一個搜集數(shù)據(jù)點的屬性上，時間資源管理器顯示了一種數(shù)據(jù)，其他的兩個圖表每個顯示3種數(shù)據(jù)，每個產(chǎn)品類型之一。最后是在當(dāng)前時間范圍內(nèi)的在數(shù)據(jù)表格中顯示的訂單搜集，當(dāng)用戶改在時間資源管理器上改變范圍時，圖表上所有的時間資源，以及數(shù)據(jù)都將會進(jìn)行更新，對于這種應(yīng)用，我做了這些屬性，得到一個IList集合，在其他應(yīng)用程序中，你可能會想要使用這種可查看的集合，比如要小幅度的更新的項目資源，如隨著時間添加數(shù)據(jù)點。

生成數(shù)據(jù)

    現(xiàn)在需要給屬性賦值，儀表數(shù)據(jù)源將會是隨機(jī)的訂單集合，在這個可視化的模型中，我嗎將會存儲所有的訂單列表，用于任何時間范圍變化時計算值。在這篇文中，你將會看見我將它放在一個叫allOrders的域中，在視圖模型的構(gòu)成中，我使用我添加到模型文件夾中的RandomDataBuilder幫助類來設(shè)置這個域。

    在時間資源管理器中的圖表總是嫻熟一樣的數(shù)據(jù)，所以在隨機(jī)生成數(shù)據(jù)之后，我們可以使用一個循環(huán)來遍歷所有的訂單，合計所有的成本數(shù)據(jù)到兩個小時段，結(jié)果搜集將會用于設(shè)置在時間資源管理器上面顯示的占用屬性。

    只要用戶改變了時間的范圍，所有的數(shù)據(jù)將會進(jìn)行更新，當(dāng)日期范圍改變的時候，我們有一種方法更新這些屬性，我把它叫做UpdateData。當(dāng)應(yīng)用程序開始的時候，我們將會設(shè)置一個默認(rèn)的時間范圍，再調(diào)用這種更新方法，在當(dāng)前的時間范圍內(nèi)，方法將會通過命令循環(huán)訪問兩個小時時間段，當(dāng)前日期范圍內(nèi)的 3 種產(chǎn)品類型銷售。數(shù)據(jù)也會以相同的國家分組，來排名前十的國家，最后再總計收益。這些所用到的屬性都會被設(shè)置在視圖模型適當(dāng)?shù)膶傩韵逻叀?/p>

添加控件到視圖

    現(xiàn)在這個視圖模型有一些數(shù)據(jù)顯示，再向DashboardView.xaml中添加控件。首先確定Mindscape WPF Elements的名字空間。在最上面，是包含總收入的概要圖表的時間資源管理器。時間資源管理器包含了范圍開始時間和結(jié)束時間屬性，用來控制內(nèi)部視圖端口滑塊。這些屬性將會綁定到視圖模型的開始時間和結(jié)束時間。現(xiàn)在使用一種雙向綁定，以便當(dāng)用戶改變時間范圍的時候我們可以得到在視圖模型中的值。當(dāng)應(yīng)用程序運行時，Caliburn micro就會設(shè)置視圖的數(shù)據(jù)上下文為可視化模型，綁定也是非常直接的。

<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>

    對于圖表和數(shù)據(jù)表格，我簡單的綁定項目資源到適當(dāng)?shù)膶傩约希蚁陆堑膬x表盤、文本的標(biāo)簽和儀表的值綁定到適當(dāng)?shù)膶傩浴ＤＰ凸芾頂?shù)據(jù)和視圖綁定到模型中，運行應(yīng)用程序?qū)玫饺缦碌男Ч?/p>

連接事件

    現(xiàn)在來實現(xiàn)儀表盤的互動性。在這里邊主要的交互性來自時間資源管理器，記得我們在前面綁定了時間資源管理器的開始和結(jié)束值到模型的屬性中去，你可能會認(rèn)為這些屬性的setter是個調(diào)用UpdateData方法的好地方，但是當(dāng)用戶拖拽窗口時，屬性會不斷的變化，這將會濫用UpdateData方法導(dǎo)致性能死掉。相反，時間管理器提供了一個事件來提升用戶完全更改范圍的操作，而我們需要做的是監(jiān)聽這個事件引起，然后調(diào)用UpdateData方法。

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

現(xiàn)在示例中的所有的控件將會在任何時候時間范圍變化時更新顯示數(shù)據(jù)：

     右下角的按鈕是可以鏈接到網(wǎng)站的，當(dāng)點擊這個按鈕，在視圖模型中的方法就會打開網(wǎng)頁，但是如果你查看XAML時，這個按鈕沒有任何事件的監(jiān)聽代碼。

<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命名約定，由于按鈕和這個訪問網(wǎng)頁的方法有著一樣的名字，所以的那個點擊的時候，方法就會被調(diào)用。

數(shù)據(jù)過濾

    現(xiàn)在來實現(xiàn)儀表頂部的那三個數(shù)據(jù)過濾，構(gòu)想是其中一個按鈕被按下，其他按鈕就變成半透明，同時一些圖表會消失，留下用戶感興趣的數(shù)據(jù)。這標(biāo)明我們需要引入3個布爾屬性在可視化模型中，指定特定產(chǎn)品的數(shù)據(jù)類型是否應(yīng)該顯示，每個按鈕都可以綁定到這些屬性，并且使用轉(zhuǎn)換器改變透明度。

    通過設(shè)置圖表的可見性你可以隱藏圖表的數(shù)據(jù)，在這里可以輕松的綁定圖表的可見性到屬性上，并且使用BooleanToVisibilityConverter。

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

    現(xiàn)在需要實現(xiàn)點擊按鈕實現(xiàn)圖表中的數(shù)據(jù)過濾，可以使用之前在時間資源管理器一樣的方法實現(xiàn)，現(xiàn)在所有三個按鈕都將調(diào)用相同的方法，所以這一次我們將包括一個事件參數(shù)，這樣的話方法就會知道是哪一種類型將要被過濾，我只是使用整數(shù)1、2和3指定不同的產(chǎn)品類型，你可以使用Caliburn Micro包括事件類型如下：

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