<UserControl
    x:Class="ControlExplorer.Controls.Chart.Markers"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlExplorer.Controls.Chart"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:c1chart="using:C1.Xaml.Chart"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style TargetType="c1chart:C1Chart">
            <Setter Property="Margin" Value="0 0 0 25" />
        </Style>
        <local:DoubleFormatter x:Key="formatter" />
    </UserControl.Resources>
    <Grid>
        <TextBlock Text="Tap or drag on plot to see markers" Margin="12" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        <Pivot>
            <PivotItem Header="simple">
                <!-- simple bound marker -->
                <c1chart:C1Chart x:Name="c1Chart1" ChartType="Column" Palette="Office" ManipulationMode="All">
                    <c1chart:C1Chart.Data>
                        <c1chart:ChartData>
                            <c1chart:ChartData.Children>
                                <c1chart:DataSeries Label="s1" Opacity="0.8" Values="20 22 19 24 25"/>
                            </c1chart:ChartData.Children>
                        </c1chart:ChartData>
                    </c1chart:C1Chart.Data>
                    <c1chart:C1Chart.View>
                        <c1chart:ChartView>
                            <c1chart:ChartView.AxisY>
                                <c1chart:Axis MinorTickThickness="0" MajorTickThickness="0">
                                    <c1chart:Axis.AxisLine>
                                        <Line StrokeThickness="0" />
                                    </c1chart:Axis.AxisLine>
                                </c1chart:Axis>
                            </c1chart:ChartView.AxisY>
                            <c1chart:ChartView.AxisX>
                                <c1chart:Axis MajorGridStrokeThickness="0" />
                            </c1chart:ChartView.AxisX>
                            <!-- Markers layer -->
                            <c1chart:ChartView.Layers>
                                <c1chart:ChartPanel>
                                    <!-- simple bound marker -->
                                    <c1chart:ChartPanelObject x:Name="obj" Attach="DataX"
                                                 Action="MouseMove"
                                                 DataPoint="-1,-1"
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Top"
                                                 Width="60" Height="50">
                                        <c1chart:ChartPanelObject.RenderTransform>
                                            <TranslateTransform Y="-55"/>
                                        </c1chart:ChartPanelObject.RenderTransform>
                                        <Border BorderBrush="Black" BorderThickness="2">
                                            <Grid DataContext="{Binding ElementName=obj}" Width="100" Height="50" HorizontalAlignment="Center" Background="White">
                                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                                    <TextBlock Text="Value" FontSize="18" Margin="2 0" />
                                                    <TextBlock Text="{Binding DataPoint.Y}" TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="2"/>
                                                </StackPanel>
                                            </Grid>
                                        </Border>
                                    </c1chart:ChartPanelObject>
                                </c1chart:ChartPanel>
                            </c1chart:ChartView.Layers>
                        </c1chart:ChartView>
                    </c1chart:C1Chart.View>

                </c1chart:C1Chart>
            </PivotItem>
            <PivotItem Header="vertical">
                <!-- vertical dot and line marker -->
                <c1chart:C1Chart x:Name="c1Chart2" ManipulationMode="All" ChartType="Area" Palette="Standard">
                    <c1chart:C1Chart.Data>
                        <c1chart:ChartData>
                            <c1chart:ChartData.Children>
                                <c1chart:DataSeries Label="s1" Opacity=".8" Values="20 22 19 24 25 21 23 18 25 27 23 24 22 27 26"/>
                            </c1chart:ChartData.Children>
                        </c1chart:ChartData>
                    </c1chart:C1Chart.Data>
                    <c1chart:C1Chart.View>
                        <c1chart:ChartView>
                            <c1chart:ChartView.AxisY>
                                <c1chart:Axis Min="15" MinorTickThickness="0" MajorTickThickness="0">
                                    <c1chart:Axis.AxisLine>
                                        <Line StrokeThickness="0"/>
                                    </c1chart:Axis.AxisLine>
                                </c1chart:Axis>
                            </c1chart:ChartView.AxisY>
                            <!-- Markers layer -->
                            <c1chart:ChartView.Layers>
                                <c1chart:ChartPanel>
                                    <!-- vertical line and dot markers -->
                                    <c1chart:ChartPanelObject x:Name="line"
                                                 Attach="DataX"
                                                 Action="MouseMove"
                                                 VerticalContentAlignment="Stretch"
                                                 HorizontalAlignment="Center">
                                        <Border Background="Black" BorderBrush="Black" Padding="1" BorderThickness="1 0 0 0" />
                                    </c1chart:ChartPanelObject>
                                    <c1chart:ChartPanelObject x:Name="dot"
                                                 Attach="DataX"
                                                 Action="MouseMove"
                                                 DataPoint="0.5,0.5"
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Center">
                                        <Grid DataContext="{Binding ElementName=dot}">
                                            <Ellipse Fill="White" Stroke="Black" StrokeThickness="2" Width="30" Height="30" />
                                            <TextBlock Text="{Binding DataPoint.Y}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                        </Grid>
                                    </c1chart:ChartPanelObject>
                                </c1chart:ChartPanel>
                            </c1chart:ChartView.Layers>
                        </c1chart:ChartView>
                    </c1chart:C1Chart.View>
                </c1chart:C1Chart>
            </PivotItem>
            <PivotItem Header="crosshairs">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <CheckBox x:Name="chkSnap" Content="Snap to points" IsChecked="True" Checked="chkSnap_Checked" Unchecked="chkSnap_Unchecked"/>
                    <!-- cross hairs -->
                    <c1chart:C1Chart x:Name="c1Chart_Crosshairs" ChartType="XYPlot" Palette="Office" ManipulationMode="All" Grid.Row="1">
                        <c1chart:C1Chart.Data>
                            <c1chart:ChartData>
                                <c1chart:ChartData.Children>
                                    <c1chart:DataSeries Label="s1" Opacity=".8" Values="20 22 19 24 22 20 23 25"/>
                                </c1chart:ChartData.Children>
                            </c1chart:ChartData>
                        </c1chart:C1Chart.Data>
                        <c1chart:C1Chart.View>
                            <c1chart:ChartView>
                                <c1chart:ChartView.AxisY>
                                    <c1chart:Axis MinorTickThickness="0" MajorTickThickness="0">
                                        <c1chart:Axis.AxisLine>
                                            <Line StrokeThickness="0" />
                                        </c1chart:Axis.AxisLine>
                                    </c1chart:Axis>
                                </c1chart:ChartView.AxisY>
                                <!-- Markers layer -->
                                <c1chart:ChartView.Layers>
                                    <c1chart:ChartPanel>
                                        <!-- crosshairs -->
                                        <c1chart:ChartPanelObject x:Name="vline"
                                                 Attach="DataXY"
                                                 Action="MouseMove"
                                                 VerticalContentAlignment="Stretch"
                                                 HorizontalAlignment="Center">
                                            <Border Background="Red" BorderBrush="Red" Padding="1" BorderThickness="1 0 0 0" />
                                        </c1chart:ChartPanelObject>
                                        <c1chart:ChartPanelObject x:Name="hline"
                                                 Attach="DataXY"
                                                 Action="MouseMove"
                                                 HorizontalContentAlignment="Stretch"
                                                 VerticalAlignment="Center">
                                            <Border Background="Red" BorderBrush="Red" Padding="1" BorderThickness="0 1 0 0" />
                                        </c1chart:ChartPanelObject>
                                        <c1chart:ChartPanelObject x:Name="cross"
                                                 Attach="DataXY"
                                                 Action="MouseMove"
                                                 DataPoint="0.5,0.5"
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Center">
                                            <Grid DataContext="{Binding ElementName=cross}">
                                                <Ellipse Fill="White" Stroke="Red" StrokeThickness="2" Width="30" Height="30" />
                                                <TextBlock Text="{Binding DataPoint.Y, Converter={StaticResource formatter}, ConverterParameter=n0}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                            </Grid>
                                        </c1chart:ChartPanelObject>
                                    </c1chart:ChartPanel>
                                </c1chart:ChartView.Layers>
                            </c1chart:ChartView>
                        </c1chart:C1Chart.View>
                    </c1chart:C1Chart>
                </Grid>
            </PivotItem>
        </Pivot>
        
    </Grid>
</UserControl>
