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

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

   • Visual Basic

   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にデータを提供します。
      • MainPage.xaml

          <Page
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:Quick_Start"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:Finance="using:C1.Xaml.Chart.Finance"
          x:Class="Quick_Start.MainPage"
          DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
          mc:Ignorable="d">
      
          <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      
              <Finance:C1FinancialChart x:Name="financialChart" ChartType="LineSymbols" 
               ItemsSource="{Binding DataContext.Data}" HorizontalAlignment="Left" Height="321" 
               VerticalAlignment="Top" Width="620" Margin="79,85,0,0">
                  <Finance:FinancialSeries AxisX="{x:Null}" AxisY="{x:Null}" Binding="Sales"
                   BindingX="Date" Chart="{x:Null}" SeriesName="{x:Null}">
                  </Finance:FinancialSeries>
              </Finance:C1FinancialChart>
      
          </Grid>
      </Page>
      

   2. コードビュー（MainPage.xaml.cs）に切り替えます。次のコードを MainPage クラスに追加して、チャートにデータをプロットします。
      • MainPage.xaml.vb
      • MainPage.xaml.cs

      • MainPage.xaml.vb

      Partial Public NotInheritable Class MainPage
          Inherits Page
          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
      

      • MainPage.xaml.cs

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

FinancialChartコントロールは、データソースに正常にバインドされています。