<UserControl
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    x:Class="ChartSamples.FinancialChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Foreground="#FFF0F8FE">
    <UserControl.Resources>
        <SolidColorBrush x:Key="CE_SampleForeground" Color="#FFF0F8FE"/>
        <Style x:Key="CE_SampleChart" TargetType="c1:C1Chart">
            <Setter Property="Foreground" Value="#FFF0F8FE" />
            <Setter Property="Background" Value="#ff071D2E" />
            <Setter Property="BorderBrush" Value="#FF8FB4CC" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="10" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Margin="4" Orientation="Horizontal" VerticalAlignment="Center">
            <Button x:Name="btnNew" Content="NewData" Width="140" Click="btnNew_Click" Margin="4"/>
        </StackPanel>
        <c1:C1Chart x:Name="chart" Grid.Row="1" c1:BarColumnOptions.Size="1" Style="{StaticResource CE_SampleChart}"
                    Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1:C1Chart, ResourceId=MediaPlayer}}"
                         ChartType="Candle" 
                         FontSize="10">
            <c1:C1Chart.Resources>
                <DataTemplate x:Key="tt">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.ColumnSpan="2" Text="{Binding XAsString}" FontStyle="Oblique" />
                        <TextBlock Grid.Row="1" Text="Low=" />
                        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Low}" Foreground="Blue" />
                        <TextBlock Grid.Row="2" Text="High=" />
                        <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding High}" Foreground="Red" />
                        <TextBlock Grid.Row="3" Text="Open=" />
                        <TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Open}" />
                        <TextBlock Grid.Row="4" Text="Close=" />
                        <TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Close}" />
                    </Grid>
                </DataTemplate>
                <DataTemplate x:Key="ttVol">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.ColumnSpan="2" Text="{Binding XAsString}" FontStyle="Oblique" />
                        <TextBlock Grid.Row="1" Text="Volume=" />
                        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Y}" />
                    </Grid>
                </DataTemplate>
            </c1:C1Chart.Resources>
            <c1:C1Chart.Data>
                <c1:ChartData>
                    <c1:HighLowOpenCloseSeries
                        PointTooltipTemplate="{StaticResource tt}"
                        SymbolSize="9,9" SymbolStrokeThickness="2"
                        XValueBinding="{Binding Time}"
                        HighValueBinding="{Binding High}"
                        LowValueBinding="{Binding Low}"
                        OpenValueBinding="{Binding Open}"
                        CloseValueBinding="{Binding Close}"
                        PlotElementLoaded="Series_Loaded"
                        Label="Price"/>
                    <c1:XYDataSeries 
                        AxisY="Volume"
                        PointTooltipTemplate="{StaticResource ttVol}"
                        XValueBinding="{Binding Time}"
                        ValueBinding="{Binding Volume}" 
                        ChartType="Bar"
                        Label="Volume"/>
                </c1:ChartData>
            </c1:C1Chart.Data>
            <c1:C1Chart.View>
                <c1:ChartView>
                    <c1:ChartView.AxisX>
                        <c1:Axis>
                            <c1:Axis.ScrollBar>
                                <c1:AxisScrollBar />
                            </c1:Axis.ScrollBar>
                        </c1:Axis>
                    </c1:ChartView.AxisX>
                    <c1:ChartView.AxisY>
                        <c1:Axis Min="500" >
                            <c1:Axis.Title>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                    <Button Width="60" x:Name="btnPrice" Content="Standard" Click="btnPrice_Click" 
                                            ToolTipService.ToolTip="Change chart type" />
                                    <TextBlock x:Name="txtPrice" Text="Price" Width="60"  TextAlignment="Right" VerticalAlignment="Bottom"/>
                                </StackPanel>
                            </c1:Axis.Title>
                        </c1:Axis>
                    </c1:ChartView.AxisY>
                    <c1:Axis x:Name="Volume" Max="200" Position="Far" AxisType="Y" MajorGridStrokeThickness="0">
                        <c1:Axis.Title>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                <TextBlock x:Name="txtVol" Text="Volume" Width="60" />
                                <Button Width="60" x:Name="btnVol" Content="Area" Click="btnVol_Click" 
                                        ToolTipService.ToolTip="Change chart type" />
                            </StackPanel>
                        </c1:Axis.Title>
                    </c1:Axis>
                </c1:ChartView>
            </c1:C1Chart.View>
            <!-- legend -->
            <!--<c1:C1ChartLegend Position="TopLeft" Orientation="Horizontal" Padding="5 0"/>-->
        </c1:C1Chart>
    </Grid>
</UserControl>
