<UserControl
    x:Class="ChartSamples.Markers"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ChartSamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml.Chart"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>
        <FlipView>
            <FlipViewItem>
                <!-- simple bound marker -->
                <Grid>
                    <TextBlock Text="Tap or hover on columns to see markers" FontSize="12" Margin="12" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                    <c1:C1Chart x:Name="c1Chart1" ChartType="Column" Palette="Office" Margin="20">
                        <c1:C1Chart.Data>
                            <c1:ChartData>
                                <c1:ChartData.Children>
                                    <c1:DataSeries Label="s1" Opacity="0.8" Values="20 22 19 24 25 22 17 12 14 14 18"/>
                                </c1:ChartData.Children>
                            </c1:ChartData>
                        </c1:C1Chart.Data>
                        <c1:C1Chart.View>
                            <c1:ChartView>
                                <c1:ChartView.AxisY>
                                    <c1:Axis MinorTickThickness="0" MajorTickThickness="0" Max="30">
                                        <c1:Axis.AxisLine>
                                            <Line StrokeThickness="0" />
                                        </c1:Axis.AxisLine>
                                    </c1:Axis>
                                </c1:ChartView.AxisY>
                                <c1:ChartView.AxisX>
                                    <c1:Axis MajorGridStrokeThickness="0" />
                                </c1:ChartView.AxisX>
                                <!-- Markers layer -->
                                <c1:ChartView.Layers>
                                    <c1:ChartPanel>
                                        <!-- simple bound marker -->
                                        <c1:ChartPanelObject x:Name="obj" Attach="DataX"
                                                     Action="MouseMove"
                                                     DataPoint="-1,-1"
                                                     HorizontalAlignment="Center"
                                                     VerticalAlignment="Top"
                                                     Width="60" Height="50">
                                            <c1:ChartPanelObject.RenderTransform>
                                                <TranslateTransform Y="-55"/>
                                            </c1:ChartPanelObject.RenderTransform>
                                            <Border BorderBrush="Black" BorderThickness="2">
                                                <Grid DataContext="{Binding ElementName=obj}" Width="120" Height="50" HorizontalAlignment="Center" Background="{StaticResource AppBarBackgroundThemeBrush}">
                                                    <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>
                                        </c1:ChartPanelObject>
                                    </c1:ChartPanel>
                                </c1:ChartView.Layers>
                            </c1:ChartView>
                        </c1:C1Chart.View>

                    </c1:C1Chart>
                </Grid>
            </FlipViewItem>
            <FlipViewItem>
                <!-- vertical dot and line marker -->
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="txtLabel" FontSize="16" Margin="50 5"/>
                    <TextBlock Text="Tap or drag on plot to see markers" FontSize="12" Margin="12" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Row="1"/>
                    <c1:C1Chart x:Name="c1Chart2" ManipulationMode="All" ChartType="Area" Palette="Standard" Margin="50 20" Grid.Row="1">
                        <c1:C1Chart.Data>
                            <c1:ChartData>
                                <c1:ChartData.Children>
                                    <c1:DataSeries Label="s1" Opacity=".8" Values="20 22 19 24 25 24 22 27 26 20 22 19 24 25 21 23 18 25 27 23 24 22 27 26 21 23 18 25 27 23 24"/>
                                </c1:ChartData.Children>
                            </c1:ChartData>
                        </c1:C1Chart.Data>
                        <c1:C1Chart.View>
                            <c1:ChartView>
                                <c1:ChartView.AxisY>
                                    <c1:Axis Min="15" MinorTickThickness="0" MajorTickThickness="0">
                                        <c1:Axis.AxisLine>
                                            <Line StrokeThickness="0"/>
                                        </c1:Axis.AxisLine>
                                    </c1:Axis>
                                </c1:ChartView.AxisY>
                                <!-- Markers layer -->
                                <c1:ChartView.Layers>
                                    <c1:ChartPanel>
                                        <!-- vertical line and dot markers -->
                                        <c1:ChartPanelObject x:Name="line"
                                                 Attach="DataX"
                                                 Action="MouseMove"
                                                 VerticalContentAlignment="Stretch"
                                                 HorizontalAlignment="Center">
                                            <Border Background="Black" BorderBrush="Black" Padding="1" BorderThickness="1 0 0 0" />
                                        </c1:ChartPanelObject>
                                        <c1:ChartPanelObject x:Name="dot"
                                                 Attach="DataX"
                                                 Action="MouseMove"
                                                 DataPoint="0.5,0.5"
                                                             DataPointChanged="dot_DataPointChanged"
                                                 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" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                            </Grid>
                                        </c1:ChartPanelObject>
                                    </c1:ChartPanel>
                                </c1:ChartView.Layers>
                            </c1:ChartView>
                        </c1:C1Chart.View>
                    </c1:C1Chart>
                </Grid>
            </FlipViewItem>
            <FlipViewItem>
                <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 -->
                    <TextBlock Text="Tap or drag on plot to see markers" FontSize="12" Margin="12" VerticalAlignment="Top" Grid.Row="1" HorizontalAlignment="Center"/>
                    <c1:C1Chart x:Name="c1Chart_Crosshairs" ChartType="XYPlot" Palette="Office" ManipulationMode="All" Grid.Row="1" Margin="40 20">
                        <c1:C1Chart.Resources>
                            <local:DoubleFormatter x:Key="formatter" />
                        </c1:C1Chart.Resources>
                        <c1:C1Chart.Data>
                            <c1:ChartData>
                                <c1:ChartData.Children>
                                    <c1:DataSeries Label="s1" Opacity=".8" Values="20 22 19 24 22 20 23 25 19 24 22 20"/>
                                </c1:ChartData.Children>
                            </c1:ChartData>
                        </c1:C1Chart.Data>
                        <c1:C1Chart.View>
                            <c1:ChartView>
                                <c1:ChartView.AxisY>
                                    <c1:Axis MinorTickThickness="0" MajorTickThickness="0">
                                        <c1:Axis.AxisLine>
                                            <Line StrokeThickness="0" />
                                        </c1:Axis.AxisLine>
                                    </c1:Axis>
                                </c1:ChartView.AxisY>
                                <!-- Markers layer -->
                                <c1:ChartView.Layers>
                                    <c1:ChartPanel>
                                        <!-- crosshairs -->
                                        <c1:ChartPanelObject x:Name="vline"
                                                 Attach="DataXY"
                                                 Action="MouseMove"
                                                 VerticalContentAlignment="Stretch"
                                                 HorizontalAlignment="Center">
                                            <Border Background="Red" BorderBrush="Red" Padding="1" BorderThickness="1 0 0 0" />
                                        </c1:ChartPanelObject>
                                        <c1:ChartPanelObject x:Name="hline"
                                                 Attach="DataXY"
                                                 Action="MouseMove"
                                                 HorizontalContentAlignment="Stretch"
                                                 VerticalAlignment="Center">
                                            <Border Background="Red" BorderBrush="Red" Padding="1" BorderThickness="0 1 0 0" />
                                        </c1:ChartPanelObject>
                                        <c1: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" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                            </Grid>
                                        </c1:ChartPanelObject>
                                    </c1:ChartPanel>
                                </c1:ChartView.Layers>
                            </c1:ChartView>
                        </c1:C1Chart.View>
                    </c1:C1Chart>
                </Grid>
            </FlipViewItem>
        </FlipView>
    </Grid>
</UserControl>
