Step 1: Adding FinancialChart to the Application

This step creates a new Visual Studio project and adds the FinancialChart control to it.

1. Create a new WPF Application in Visual Studio.

   1. Select File | New | Project. The New Project dialog box appears.

   2. In the New Project dialog box, select a language in the left-hand pane, and then select WPF Application from the list of applications in the center pane.

   3. Give your application a Name, and then select OK.

2. Open the MainWindow.xaml file.

3. Place your cursor between the <Grid> </Grid> tags within either your Window or your UserControl, depending on the type of application you've created.

4. Locate the C1FinancialChart control in Visual Studio's ToolBox. Double-click the control to add it to your application. The following references are added to the project:

   C1.WPF.4.dll

   C1.WPF.FinancialChart.4.dll

   C1.WPF.FlexChart.4.dll

   If the references are not added, you need to add the same manually - right-click the References folder in the Solution Explorer and select Add | New Reference.

   
   

   The XAML markup resembles the following:

   xml

   <Window
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
           x:Class="FinancialChart.MainWindow"
           Title="MainWindow" Height="387.285" Width="641.667">
       <Grid>
           <c1:C1FinancialChart x:Name="financialChart" 
                                ChartType="HeikinAshi" 
                                HorizontalAlignment="Left" 
                                Height="325" VerticalAlignment="Top" 
                                Width="523">
               <c1:FinancialSeries AxisX="{x:Null}" AxisY="{x:Null}" 
                                   Binding="High,Low,Open,Close,Volume" 
                                   BindingX="Date" 
                                   Chart="{x:Null}" 
                                   SeriesName="{x:Null}">
                   <c1:FinancialSeries.ItemsSource>
                       <c1:QuoteCollection>
                           <c1:Quote Close="23.23" Date="01/23/15" 
                                     High="24.73" Low="20.16" 
                                     Open="20.2" Volume="42593223"/>
                           <c1:Quote Close="22.6" Date="01/26/15" 
                                     High="24.39" Low="22.5" 
                                     Open="23.67" Volume="8677164"/>
                           <c1:Quote Close="21.3" Date="01/27/15" 
                                     High="22.47" Low="21.17" 
                                     Open="22" Volume="3272512"/>
                           <c1:Quote Close="19.78" Date="01/28/15" 
                                     High="21.84" Low="19.6" 
                                     Open="21.62" Volume="5047364"/>
                           <c1:Quote Close="18.8" Date="01/29/15" 
                                     High="19.95" Low="18.51" 
                                     Open="19.9" Volume="3419482"/>
                       </c1:QuoteCollection>
                   </c1:FinancialSeries.ItemsSource>
               </c1:FinancialSeries>
           </c1:C1FinancialChart>
       </Grid>
   </Window>

The FinancialChart control is successfully added to the application.