在最新的WPF Elements中，加入了股市圖和蠟燭圖，這些圖表會隨著時間的推移實時的顯示股市的活動，今天就來看看它強大的功能特性。

    棒線圖顯示一條垂直線里面有最高和最低的值，在左側放置了一個刻度線顯示所對應的值，下面就是一個棒線圖的例子。

    蠟燭圖和幫線圖很像，但是在開始和結束刻度之間有一個方形，這個著色的方形將會更加容易的看清股市變化趨勢，下面就是一個蠟燭圖的默認風格樣式：

    想要創建類似這樣的股市圖，你所需要做的就是添加一個幫線圖系列或是蠟燭圖系列到一個圖表控件，然后再WPF Elements里的StockDataPoint模型類填充項目源，構造函數StockDataPoint主要用在日期時間和值上邊。

    創建股市圖好的視覺效果需要用適當的值，由于股市圖在默認的情況下是沿著時間軸進行繪制，你也按照你的方式來設置X軸的的標簽格式。下面是一個簡單的股市圖的創建實例，這個項目源是綁定到一個在后臺代碼的用于搜集股市數據點對象的數據屬性上。

<ms:Chart Title="Stock prices">
  <ms:StockSeries ItemsSource="{Binding Data}" Title="Year 2012" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>

使用自己的數據模型

     提供的股市數據點對象模型類是為了提供一個方便的方法來獲得股市圖表，并實現快速的建立運行，但是如果說你并不想用這個模型類來實現圖表的創建，集也可以用你自己的模型，下面就是一些你可能想使用自己的數據模型的場景：

• 你已經有了一個模型，遵循了你自己公司的命名約定或是包含額外的數據值。
• 你想要你的x軸是一個數值軸而不是時間日期。
• 你更喜歡使用一個不可變的數據模型或一個struct。

    想要使用你自己的數據點模型，你需要告訴股市圖對于開盤、收盤、最高值、最低值以及X軸應該使用哪些屬性。下面就是一個簡單的模型來實現剛才所說的內容，但是值得注意的是設置YBinding屬性也是非常重要的。

public class MyStockDataPoint
{
  public MyStockDataPoint(double x, double open, double high, double low, double close)
  {
    X = x;
    OpenValue = open;
    HighValue = high;
    LowValue = low;
    CloseValue = close;
  }
 
  public double X { get; private set; }
 
  public double OpenValue { get; private set; }
 
  public double HighValue { get; private set; }
 
  public double LowValue { get; private set; }
 
  public double CloseValue { get; private set; }
}

<ms:Chart Title="Stock prices">
  <ms:CandlestickSeries ItemsSource="{Binding Data}" Title="Year 2012"
                        XBinding="{Binding X}" YBinding="{Binding LowValue}"
                        OpenBinding="{Binding OpenValue}" HighBinding="{Binding HighValue}"
                        LowBinding="{Binding LowValue}" CloseBinding="{Binding CloseValue}" />
</ms:Chart>

自定義樣式選項

    股市圖最基本的可供選擇的樣式就是改變positive 和negative brushes。常用的SeriesBrush屬性主要用于著色的數據點，可以使用NegativeSeriesBrush屬性來改變數據點顏色。也可以改變路徑的厚度或是改變填充蠟燭的顏色，都可以通過設置PositiveStyle和NegativeStyle屬性實現：

Style x:Key="ThinPositiveCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#98C723" />
</Style>
 
<Style x:Key="ThinNegativeCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#AA2B1E" />
</Style>
 
<ms:Chart Title="Stock prices">
  <ms:CandleStickSeries ItemsSource="{Binding Data}"
                        PositiveStyle="{StaticResource ThinPositiveCandlestickStyle}"
                        NegativeStyle="{StaticResource ThinNegativeCandlestickStyle}" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>