wpf livecharts 自定义tooltip

nuget

		<PackageReference Include="LiveCharts.Wpf.Core" Version="0.9.8" />
		<PackageReference Include="PropertyChanged.Fody" Version="4.1.0" />

CustomersLegend.xaml

<UserControl x:Class="LivechartsDemo.CustomersLegend"
             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="clr-namespace:LivechartsDemo"
             mc:Ignorable="d" Background="#555555" BorderThickness="2" Padding="20 10" BorderBrush="AntiqueWhite"
             d:DesignHeight="450" d:DesignWidth="800">
    <ItemsControl ItemsSource="{Binding Series}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate >
                <StackPanel Orientation="Horizontal" Margin="2 0">
                    <Rectangle Grid.Column="0" Stroke="{Binding Stroke}" Fill="{Binding Fill}"
                Height="15" Width="15"></Rectangle>
                    <TextBlock Grid.Column="1" Text="{Binding Title}"
                Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

CustomersLegend.cs

using LiveCharts.Wpf;
using System.ComponentModel;
using System.Windows.Controls;

namespace LivechartsDemo
{
    /// <summary>
    /// CustomersLegend.xaml 的交互逻辑
    /// </summary>
    public partial class CustomersLegend : UserControl, IChartLegend
    {
        private List<SeriesViewModel> _series;

        public CustomersLegend()
        {
            InitializeComponent();
            DataContext = this;

        }
        public List<SeriesViewModel> Series
        {
            get { return _series; }
            set
            {
                _series = value;
                OnPropertyChanged("Series");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

CustomersTooltip.xaml

<UserControl x:Class="LivechartsDemo.CustomersTooltip"
             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="clr-namespace:LivechartsDemo"
             xmlns:resultReview="clr-namespace:LivechartsDemo"
             mc:Ignorable="d" 
             Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555"
             d:DesignHeight="450" d:DesignWidth="800">
    <ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate >
                <StackPanel Margin="2" Orientation="Horizontal">
                    <Rectangle Grid.Column="0" Stroke="{Binding Series.Stroke}" Fill="{Binding Series.Fill}"
                               Height="15" Width="15"></Rectangle>
                    <TextBlock Grid.Column="1" Text="test" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                    <TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.XAxisLabel}" Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                    <!--<TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(resultReview:VMResultChartValue.YValue)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>-->
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

CustomersTooltip.cs

using LiveCharts;
using LiveCharts.Wpf;
using System.ComponentModel;

namespace LivechartsDemo
{
    /// <summary>
    /// CustomersTooltip.xaml 的交互逻辑
    /// </summary>
    public partial class CustomersTooltip : IChartTooltip
    {
        private TooltipData _data;

        public CustomersTooltip()
        {
            InitializeComponent();

            //LiveCharts will inject the tooltip data in the Data property
            //your job is only to display this data as required
            DataContext = this;


            this.SelectionMode = TooltipSelectionMode.SharedXInSeries;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public TooltipData Data
        {
            get { return _data; }
            set
            {
                _data = value;
                OnPropertyChanged("Data");
            }
        }
        public TooltipSelectionMode? SelectionMode { get; set; }
        protected virtual void OnPropertyChanged(string propertyName = null)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

ViewModelBase

using PropertyChanged;

namespace LivechartsDemo.Base
{
    [AddINotifyPropertyChangedInterface]
    public class ViewModelBase
    {

    }
}

BaseCommand

using System.Windows.Input;

namespace LivechartsDemo.Base
{
    public class BaseCommand : ICommand
    {
        public BaseCommand(Action<object> executeAction)
        {
            ExecuteAction = executeAction;
        }

        public Action<object> ExecuteAction { get; set; }


        public Func<object, bool> CanExecuteAction { get; set; }

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            if (CanExecuteAction != null)
                return CanExecuteAction(parameter);
            return true;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="parameter"></param>
        public void Execute(object parameter)
        {
            ExecuteAction?.Invoke(parameter);
        }
    }
}

MainWindow.xaml

<Window x:Class="LivechartsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LivechartsDemo" 
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DockPanel>
            <Grid DockPanel.Dock="Top">
                <Button Content="test" Click="Button_Click"/>
            </Grid>
            <lvc:CartesianChart Name="chart1" Hoverable="False" LegendLocation="Bottom">
                <!--<lvc:CartesianChart.DataTooltip>
                    <lvc:DefaultTooltip SelectionMode="OnlySender" ShowTitle="False" ShowSeries="False"  IsWrapped="False"/>
                </lvc:CartesianChart.DataTooltip>-->
                <lvc:CartesianChart.Series   >
                    <lvc:LineSeries Fill="Transparent" DataLabels="False" Values="{Binding ChartTestValue}" Stroke="Red" Title="test" >
                    </lvc:LineSeries>

                    <lvc:LineSeries Fill="Transparent" DataLabels="False" Values="{Binding ChartTestValue1}" Stroke="Red" ScalesYAt="1">
                    </lvc:LineSeries>
                </lvc:CartesianChart.Series>
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis Title="Y-Axis" Position="LeftBottom" ShowLabels="False" />
                    <lvc:Axis Title="Y-Axis" Position="RightTop" />
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
        </DockPanel>
    </Grid>
</Window>

MainWindow.cs

using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Wpf;
using LivechartsDemo.Base;
using System.Windows;

namespace LivechartsDemo
{
    public class VMResultChartValue : ViewModelBase
    {
        public string XAxisLabel { get; set; }

        public double YValue { get; set; }
    }

    public class VMMain : ViewModelBase
    {
        public ChartValues<double> TestValue { get; set; } = new ChartValues<double>() { 2, 1, 3, 5, 3, 4, 6 };
        public ChartValues<double> TestValue1 { get; set; } = new ChartValues<double>() { 4, 6, 2, 1, 3, 5, 3 };

        public ChartValues<VMResultChartValue> ChartTestValue { get; set; }
        public ChartValues<VMResultChartValue> ChartTestValue1 { get; set; }
    }


    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private VMMain model;
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = model = new VMMain();

            chart1.ChartLegend = new CustomersLegend();
            chart1.DataTooltip = new CustomersTooltip();

            chart1.ToolTip = null;
            chart1.Hoverable = false;

            model.ChartTestValue = new()
            {
                new VMResultChartValue
                {
                    XAxisLabel = "Jan",
                    YValue = 2
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Feb",
                    YValue = 1
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Mar",
                    YValue = 3
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Apr",
                    YValue = 5
                },
                new VMResultChartValue
                {
                    XAxisLabel = "May",
                    YValue = 3
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Jun",
                    YValue = 4
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Jul",
                }
            };

            model.ChartTestValue1 = new()
            {
                new VMResultChartValue
                {
                    XAxisLabel = "Apr",
                    YValue = 5
                },
                new VMResultChartValue
                {
                    XAxisLabel = "May",
                    YValue = 3
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Jun",
                    YValue = 4
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Jul",
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Jan",
                    YValue = 2
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Feb",
                    YValue = 1
                },
                new VMResultChartValue
                {
                    XAxisLabel = "Mar",
                    YValue = 3
                },
            };

            var customerVmMapper = Mappers.Xy<VMResultChartValue>()
             .X((value, index) => index) // lets use the position of the item as X
             .Y(value => value.YValue); //and PurchasedItems property as Y

            //lets save the mapper globally
            Charting.For<VMResultChartValue>(customerVmMapper);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
        }
    }
}