<Page
    x:Class="UWP.CartesianChart.SharedTooltip.SharedTooltipExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP.CartesianChart.SharedTooltip"
    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="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Canvas Name="CanvasContainer">

            <!-- 
        the tooltip requires a canvas to move properly, 
        so lets wrap our view where you need a shared tooltip 
        with a Canvas container
        -->

            <lvc:DefaultTooltip Name="CurrentTooltip" Visibility="Collapsed" 
                            Canvas.ZIndex="100"
                            Canvas.Left="0" Canvas.Top="0"
                            IsWrapped="True">
                <!--
            it needs to: 
            1. Have an initial position
            2. Be hidden on startup
            3. to be wrapped in a Canvas, and say it with IsWrapped = true
            -->
            </lvc:DefaultTooltip>

            <Grid Height="{Binding ActualHeight, ElementName=CanvasContainer}" 
              Width="{Binding ActualWidth, ElementName=CanvasContainer}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <lvc:CartesianChart Grid.Column="0" Background="White"
                            DataTooltip="{Binding ElementName=CurrentTooltip}">
                    <lvc:CartesianChart.Series>
                        <lvc:LineSeries Values="{x:Bind ChartValues}" LabelPoint="{Binding LabelPoint}"></lvc:LineSeries>
                    </lvc:CartesianChart.Series>
                </lvc:CartesianChart>
                <lvc:CartesianChart Grid.Column="1" Background="White"
                            DataTooltip="{Binding ElementName=CurrentTooltip}">
                    <lvc:CartesianChart.Series>
                        <lvc:LineSeries Values="{x:Bind ChartValues}" LabelPoint="{Binding LabelPoint}"></lvc:LineSeries>
                    </lvc:CartesianChart.Series>
                </lvc:CartesianChart>
                <lvc:CartesianChart Grid.Column="2" Background="White"
                            DataTooltip="{Binding ElementName=CurrentTooltip}">
                    <lvc:CartesianChart.Series>
                        <lvc:LineSeries Values="{x:Bind ChartValues}" LabelPoint="{Binding LabelPoint}" ></lvc:LineSeries>
                    </lvc:CartesianChart.Series>
                </lvc:CartesianChart>
            </Grid>
        </Canvas>
    </Grid>
</Page>
