# Step 1: Adding FinancialChart to the Application

## Content

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**.
<br>
    The XAML markup resembles the following: 
    **xml**

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