LiveCharts文檔-3開始-8自定義工具提示

默認每個需要tooltip或者legend的chart都會初始化一個DefaultLengend和DefaultTooltip對象。

自定義默認

你可以用下面的類來自定義一小部分，比如背景顏色，指示塊尺寸方向。

cartesianChart1.Datatooltip.Bulletize = 20;
cartesianChart1.DataTooltip.Background = Brushes.Red;

你也可以設置你的tooltip的選擇模式，比如，用下面的代碼我們可以強制讓tooltip只在鼠標懸停的時候顯示。

cartesianChart1.DataTooltip.SelectionMode = LiveCharts.TooltipSelectionMode.OnlySender;

從頭開始

當你需要自定義圖表控件外觀的時候，直接使用前面的代碼就可以了，但是怎么來修改提示中的數據顯示方式呢，或者在工具提示中顯示額外的屬性呢？

很可惜，在WinForms中沒有原生的方式來顯示，但鑒於LiveCharts.Winforms其實是LiveCharts.Wpf的包裝器，你必須自定義一個Wpf控件來使它起作用，很簡單，你不需要知道太多wpf的東西就可以讓它工作。

DefaultTooltip和DefaultLengen類對所有例子都適用，如果你需要一個特定的控件，你可以很容易的自定義一個，當你創建一個自定義用戶控件的時候，LiveCharts能夠將用戶需要的數據顯示在tooltip當中，你需要根據你的需要來處理數據如何顯示，如果你懂wpf，那么你可以做任何設定。

下一個例子，我們將配置圖表來繪制CustomeVm類，我們將創建一個自定義的tooltip來顯示更多的客戶屬性。

右擊解決方案管理器，添加一個類，如下：

namespace Wpf.CartesianChart.CustomTooltipAndLegend
{
    public class CustomerVm
    {
        public string Name { get; set; }
        public string LastName { get; set; }
        public int Phone { get; set; }
        public int PurchasedItems { get; set; }
    }
}

現在我們就要構造自己的數據工具提示，工具提示會顯示所有CustomVm屬性，右鍵添加新的WPF用戶控件，命名它為CustomerTooltip，內容如下：

<UserControl x:Class="Wpf.CartesianChart.CustomTooltipAndLegend.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:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:local="clr-namespace:Wpf.CartesianChart.CustomTooltipAndLegend"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" 
             d:DataContext="{d:DesignInstance local:CustomersTooltip}"
             Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555">
    <ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type wpf:DataPointViewModel}">
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Title"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="LastName"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Phone"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="PurchasedItems"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Stroke="{Binding Series.Stroke}" Fill="{Binding Series.Fill}"
                               Height="15" Width="15"></Rectangle>
                    <TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(local:CustomerVm.Name)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                    <TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.(local:CustomerVm.LastName)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                    <TextBlock Grid.Column="3" Text="{Binding ChartPoint.Instance.(local:CustomerVm.Phone), 
                                                        StringFormat=Phone: {0}}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                    <TextBlock Grid.Column="4" Text="{Binding ChartPoint.Instance.(local:CustomerVm.PurchasedItems), 
                                                                StringFormat=Purchased Items: {0:N}}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

后台代碼如下：

using System.ComponentModel;
using LiveCharts;
using LiveCharts.Wpf;
namespace Wpf.CartesianChart.CustomTooltipAndLegend
{
    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;
        }
        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));
        }
    }
}

最重要的是，自定義的CustomersTooltip實現了IChartTooltip接口，這個接口需要我們的用戶控件實現INotifyPropertyChanged以及一個新的屬性數據類型TooltipData,
LiveCharts將會注入所有它知道的當前點並顯示在tooltip中，你的任務就是顯示你需要的數據。

注意到我們在用戶控件中使用了一個DataContext屬性，並綁定Data.Points屬性到我們的項目控件中來顯示當前我們需要的點。添加一個自定義用戶控件，命名為CustomersLegend,道理是一樣的，你需要實現IChartLegend接口來處理被Livecharts注入的數據。

我們再來創建一個自定義的Legend，用自定義樣式，

<UserControl x:Class="Wpf.CartesianChart.CustomTooltipAndLegend.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:Wpf.CartesianChart.CustomTooltipAndLegend"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             Background="#555555" BorderThickness="2" Padding="20 10" BorderBrush="AntiqueWhite"
             d:DataContext="{d:DesignInstance local:CustomersLegend}">
    <ItemsControl ItemsSource="{Binding Series}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type lvc:SeriesViewModel}">
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Title"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Stroke="{Binding Stroke}" Fill="{Binding Fill}" 
                               Width="15" Height="15"/>
                    <TextBlock Grid.Column="1" Margin="4 0" Text="{Binding Title}" Foreground="White" VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

using System.Collections.Generic;
using System.ComponentModel;
using System.Windows.Controls;
using LiveCharts.Wpf;
 
namespace Wpf.CartesianChart.CustomTooltipAndLegend
{
    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));
        }
    }
}

最后把自定的控件設定到我們的圖表上就可以了。

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