<Page x:Class="DataManipulation.Basic"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="using:DataManipulation"
      xmlns:Chart="using:C1.Xaml.Chart"
      xmlns:Annotation="using:C1.Xaml.Chart.Annotation"
      mc:Ignorable="d" 
      d:DesignHeight="600" d:DesignWidth="600">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.DataContext>
            <local:AnnotationViewModel />
        </Grid.DataContext>
        <Chart:C1FlexChart x:Name="flexChart" ChartType="Line" ToolTipContent="{}{y}" ItemsSource="{Binding Data}">
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis Min="0" Max="100" AxisLine="False" MajorGrid="True" MajorTickMarks="None"/>
            </Chart:C1FlexChart.AxisY>
            <Chart:Series SeriesName="Base dataList" Binding="Y" BindingX="X"/>
            <Chart:C1FlexChart.Layers>
                <Annotation:AnnotationLayer>
                    <Annotation:AnnotationLayer.Annotations>
                        <Annotation:Text Content="Relative" Location="0.55, 0.15" Attachment="Relative" TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=TextTooltip}">
                            <Annotation:Text.Style>
                                <Chart:ChartStyle FontSize="15" Stroke="Black" FontFamily="GenericSansSerif" />
                            </Annotation:Text.Style>
                        </Annotation:Text>
                        <Annotation:Ellipse Content="Relative" Location="0.4, 0.45" Width="120" Height="80" Attachment="Relative"
                                    TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=EllipseTooltip}">
                            <Annotation:Ellipse.Style>
                                <Chart:ChartStyle Fill="Goldenrod" Stroke="DarkGoldenrod" FontWeight="Bold" FontSize="10" FontFamily="GenericSansSerif" />
                            </Annotation:Ellipse.Style>
                        </Annotation:Ellipse>
                        <Annotation:Circle Content="DataIndex" Radius="50" SeriesIndex="0" PointIndex="27" Attachment="DataIndex"
                                   TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=CircleTooltip}">
                            <Annotation:Circle.Style>
                                <Chart:ChartStyle Fill="LightSeaGreen" FontSize="10" Stroke="DarkCyan" FontFamily="GenericSansSerif" FontWeight="Bold" />
                            </Annotation:Circle.Style>
                        </Annotation:Circle>
                        <Annotation:Rectangle Content="DataCoordinate" Width="130" Height="100" Location="37, 30" Attachment="DataCoordinate"
                                      TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=RectangleTooltip}">
                            <Annotation:Rectangle.Style>
                                <Chart:ChartStyle Fill="SlateBlue" FontSize="10" Stroke="DarkSlateBlue" FontFamily="GenericSansSerif" FontWeight="Bold" />
                            </Annotation:Rectangle.Style>
                        </Annotation:Rectangle>
                        <Annotation:Square Content="DataIndex" Length="80" SeriesIndex="0" PointIndex="45" Attachment="DataIndex"
                                      TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=SquareTooltip}">
                            <Annotation:Square.Style>
                                <Chart:ChartStyle Fill="SandyBrown" FontSize="10" Stroke="Chocolate" FontFamily="GenericSansSerif" FontWeight="Bold" />
                            </Annotation:Square.Style>
                        </Annotation:Square>
                        <Annotation:Polygon x:Name="polygonAnno" Content="Absolute" Attachment="Absolute"
                                      TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=PolygonTooltip}">
                            <Annotation:Polygon.Style>
                                <Chart:ChartStyle Fill="Red" StrokeThickness="3" FontSize="10" Stroke="DarkTurquoise" FontFamily="GenericSansSerif" FontWeight="Bold" />
                            </Annotation:Polygon.Style>
                        </Annotation:Polygon>
                        <Annotation:Line Content="Absolute" Start="50, 200" End="300, 350" Attachment="Absolute"
                                      TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=LineTooltip}">
                            <Annotation:Line.Style>
                                <Chart:ChartStyle StrokeThickness="4" FontSize="10" Stroke="DarkTurquoise" FontFamily="GenericSansSerif" FontWeight="Bold" />
                            </Annotation:Line.Style>
                        </Annotation:Line>
                        <Annotation:Image Location="22, 30" x:Name="imageAnno" Attachment="DataCoordinate" TooltipText="{Binding Source={StaticResource DataManipulationLocalization}, Path=ImageTooltip}"/>
                    </Annotation:AnnotationLayer.Annotations>
                </Annotation:AnnotationLayer>
            </Chart:C1FlexChart.Layers>
        </Chart:C1FlexChart>
    </Grid>
</Page>
