c# - 如何自定义/添加部分到 LiveCharts 图例？

Question

我使用 LiveCharts 在 MVVM WPF 应用程序的 UserControl 中显示一些测量值。我想将我最近的测量结果与基线进行比较。通常，基线是恒定的，分别是平行于 x 轴的水平线，因此我在ViewModel中添加了一个包含新 AxisSection的SectionsCollection 。随后，我将SectionsCollection绑定到视图中 y 轴的Sections属性。它显示正确，同时我最近的测量值显示为Series。

不幸的是，默认图例不显示Sections，只显示Series测量值。这就是为什么我用我的本地覆盖 LiveChartsView.xaml 中的默认图例：LegendView

<UserControl x:Class="<ViewNamespace>.LiveChartsView"
             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:<ViewNamespace>"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:vm="clr-namespace:<ViewModelNamespace>
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance vm:LiveChartsViewModel}"
             d:DesignHeight="800" d:DesignWidth="600">
<UserControl.Resources>
        <vmhelper:ContinuousMeasurementVmConverter x:Key="ContinuousMeasurementVmConverter" />
    </UserControl.Resources>
    <Border BorderThickness="10">
        <Grid>
            <lvc:CartesianChart Series="Series="{Binding ContinuousMeasurements, Converter={StaticResource ContinuousMeasurementVmConverter}}" LegendLocation="Right" >
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis Title="Response Time [ms]" MinValue="0"/>
                </lvc:CartesianChart.AxisY>
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis Title="Measurement Date" Labels="{Binding Labels}" LabelsRotation="45">
                        <lvc:Axis.Separator>
                            <lvc:Separator Step="1" />
                        </lvc:Axis.Separator>
                    </lvc:Axis>                    
                </lvc:CartesianChart.AxisX>
                <lvc:CartesianChart.ChartLegend>
                    <local:LegendView></local:LegendView>
                </lvc:CartesianChart.ChartLegend>                
            </lvc:CartesianChart>
        </Grid>
    </Border>
</UserControl>

我的 LiveChartsViewModel.cs 是具有两个集合作为属性的基本 ViewModel：

public class LiveChartsViewModel
    {
        private ObservableCollection<MeasurementViewModel> _continuousMeasurements;

        public ObservableCollection<MeasurementViewModel> ContinuousMeasurements
        {
            get => _continuousMeasurements;
            set
            {
                _continuousMeasurements = value;
                OnPropertyChanged(nameof(ContinuousMeasurements));
            }
        }
}
public LiveChartsViewModel()
{
PopulateContinuousMeasurements();
}
}

我的 LegendView.xaml 如下所示：

<UserControl x:Class="<LegendViewNamespace>"
             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="<ViewNamespace>"
             xmlns:vm="<ViewModelNamespace>"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance local:LegendView}">
    <ListView BorderThickness="0">        
        <ListViewItem>
            <ListView ItemsSource="{Binding ContinuousMeasurements}" Grid.IsSharedSizeScope="True" BorderThickness="0">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <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}" VerticalAlignment="Center" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ListViewItem>
    </ListView>    
</UserControl>

还有我的代码隐藏 LegendView.xaml.cs

namespace <LegendViewNamespace>
{
    /// <summary>
    /// Interaction logic for LegendView.xaml
    /// </summary>
    public partial class LegendView : UserControl, IChartLegend
    {
        public LegendView()
        {
            InitializeComponent();
            DataContext = new LiveChartsViewModel();
        }

        private List<SeriesViewModel> _series;

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

        public event PropertyChangedEventHandler PropertyChanged;

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

我无法弄清楚，我必须如何调整我的任何文件以显示我的图例中的部分。请你帮帮我好吗？

标签： c#wpflegendlivecharts