<Page
    x:Class="UWP.CartesianChart.Customized_Series.CustomizedLineSeries"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP.CartesianChart.Customized_Series"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveCharts.Uwp"
    mc:Ignorable="d"
    >

    <Grid Background="#303030">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Margin="20" Click="MoveOnClick">Move</Button>
        <lvc:CartesianChart Grid.Row="2" Background="#222E31">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="{Binding Values1}" StrokeThickness="4" StrokeDashArray="2" 
                                Stroke="#6BBA45" Fill="Transparent" LineSmoothness="0" PointGeometrySize="20"
                                PointForeround="#6BBA45">
                </lvc:LineSeries>
                <lvc:LineSeries Values="{Binding Values2}" StrokeThickness="2" 
                                Stroke="#1C8FC5" Fill="Transparent" LineSmoothness="1" 
                                PointGeometrySize="15" PointForeround="#222E31"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.VisualElements>
                <lvc:VisualElement X="0.5" Y="8">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="White">
                            Hello!, this is a note merged in the chart.
                        </TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
            </lvc:CartesianChart.VisualElements>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis IsMerged="True">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" StrokeDashArray="2">
                            <lvc:Separator.Stroke>
                                <SolidColorBrush Color="#404F56" />
                            </lvc:Separator.Stroke>
                        </lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis IsMerged="True">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1.5" StrokeDashArray="4">
                            <lvc:Separator.Stroke>
                                <SolidColorBrush Color="#404F56" />
                            </lvc:Separator.Stroke>
                        </lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</Page>
