このステップでは、FinancialChart コントロールを有効なデータソースに連結します。

1. 次のようにデータソースを作成します。
   1. プロジェクトを右クリックし、［追加］→［クラス］を選択します。
   2. テンプレートの一覧から［クラス］を選択し、「DataService」と名前を付け、［追加］をクリックします。
   3. DataService クラスに次のコードを追加して、データを生成します。
   • Visual Basic
   • C#

   • Visual Basic

   Public Class DataService
   
       Public Shared Function CreateData() As List(Of DataItem)
           Dim data = New List(Of DataItem)()
   
           Dim dt As DateTime = DateTime.Today
   
           data.Add(New DataItem(dt.[Date], 79))
           data.Add(New DataItem(dt.[Date].AddDays(-7), 78))
           data.Add(New DataItem(dt.[Date].AddDays(-14), 73))
           data.Add(New DataItem(dt.[Date].AddDays(-21), 74))
           data.Add(New DataItem(dt.[Date].AddDays(-28), 76))
           data.Add(New DataItem(dt.[Date].AddDays(-35), 74))
           data.Add(New DataItem(dt.[Date].AddDays(-42), 75))
           data.Add(New DataItem(dt.[Date].AddDays(-49), 75))
           data.Add(New DataItem(dt.[Date].AddDays(-56), 80))
           Return data
       End Function
   
   End Class
   
   Public Class DataItem
       Public Sub New(date__1 As DateTime, sales__2 As Integer)
           [Date] = date__1
           Sales = sales__2
       End Sub
   
       Public Property [Date]() As DateTime
           Get
               Return m_Date
           End Get
           Set
               m_Date = Value
           End Set
       End Property
       Private m_Date As DateTime
       Public Property Sales() As Integer
           Get
               Return m_Sales
           End Get
           Set
               m_Sales = Value
           End Set
       End Property
       Private m_Sales As Integer
   End Class
   

   • C#

   class DataService
   {
       public static List<DataItem> CreateData()
       {
           var data = new List<DataItem>();
   
           DateTime dt = DateTime.Today;
   
           data.Add(new DataItem(dt.Date,79));
           data.Add(new DataItem(dt.Date.AddDays(-7), 78));
           data.Add(new DataItem(dt.Date.AddDays(-14), 73));
           data.Add(new DataItem(dt.Date.AddDays(-21), 74));
           data.Add(new DataItem(dt.Date.AddDays(-28), 76));
           data.Add(new DataItem(dt.Date.AddDays(-35), 74));
           data.Add(new DataItem(dt.Date.AddDays(-42), 75));
           data.Add(new DataItem(dt.Date.AddDays(-49), 75));
           data.Add(new DataItem(dt.Date.AddDays(-56), 80));
           return data;
       }
   }
   
   public class DataItem
   {
       public DataItem(DateTime date, int sales)
       {
           Date = date;
           Sales = sales;
       }
   
       public DateTime Date { get; set; }
       public int Sales { get; set; }
   }
   

2. 次のように、データを FinancialChartに連結します。
   
   1. <Grid> タグを編集して次のマークアップを作成し、FinancialChart にデータを提供します。
      • MainWindow.xaml

      <Grid>
          <c1:C1FinancialChart x:Name="financialChart" 
                               ChartType="LineSymbols"  
                               ItemsSource="{Binding DataContext.Data}" 
                               HorizontalAlignment="Left" 
                               Height="321" 
                               VerticalAlignment="Top" 
                               Width="620" 
                               Margin="81,94,0,0">
              <c1:FinancialSeries AxisX="{x:Null}" 
                                  AxisY="{x:Null}" 
                                  Binding="Sales" 
                                  BindingX="Date" 
                                  SeriesName="{x:Null}">
              </c1:FinancialSeries>
          </c1:C1FinancialChart>
      </Grid>
      

      連結ソースを指定するには、DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}"  マークアップを MainWindow.xaml ファイルの <Window> タグに追加する必要があります。
   2. コードビューに切り替えます。MainWindow クラスに次のコードを追加して、チャートにデータをプロットします。
      
      • MainWindow.xaml.vb
      • MainWindow.xaml.cs

      • MainWindow.xaml.vb

      Partial Public Class MainWindow
          Inherits Window
          Private _data As List(Of DataItem)
      
          Public Sub New()
              Me.InitializeComponent()
              
              financialChart.AxisX.Format = "M月d日"
          End Sub
      
          Public ReadOnly Property Data() As List(Of DataItem)
              Get
                  If _data Is Nothing Then
                      _data = DataService.CreateData()
                  End If
      
                  Return _data
              End Get
          End Property
      End Class
      

      • MainWindow.xaml.cs

      public partial class MainWindow : Window
      {
          private List<DataItem> _data;
      
          public MainWindow()
          {
              this.InitializeComponent();
              
              financialChart.AxisX.Format = "M月d日";
          }
      
          public List<DataItem> Data
          {
              get
              {
                  if (_data == null)
                  {
                      _data = DataService.CreateData();
                  }
      
                  return _data;
              }
          }
      }
      

FinancialChart コントロールが正常にデータソースに連結できました。