LiveCharts 设置 DateTime X 轴 MinValue 和 MaxValue 以便放大/缩小

Question

我有一个使用LiveCharts 的WPF 应用程序，其中我绘制了一个LineGraph，X 轴为DateTime。我的最终目标是实现“双向”缩放。也就是说，我的应用程序上有两个DateTimePicker 控件（来自WPF Toolkit），它们代表图表当前显示区域 的最小值和最大值DateTime，如果我使用滚轮在要放大/缩小的图形区域上，更新的范围应反映在所述控件上，并且（这是我正在努力解决的部分）相反，如果我在 DateTimePicker 控件上设置最小值/最大值，则图表应该相应地放大/缩小。

我的XAML 很简单：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <lvc:CartesianChart Name="MyChart"
                        Series="{Binding SeriesCollection}"
                        Zoom="X">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                      PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                      MinValue="{Binding TimeStampMin, Mode=TwoWay}"
                      MaxValue="{Binding TimeStampMax, Mode=TwoWay}"/>
        </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
        <xceed:DateTimePicker Margin="4" Width="160" Name="dtpMinX"
                              Format="Custom" FormatString="yyyy/MM/dd HH:mm:ss"
                              Value="{Binding TimeStampMin, Mode=TwoWay}"/>
        <xceed:DateTimePicker Margin="4" Width="160" Name="dtpMaxX"
                              Format="Custom" FormatString="yyyy/MM/dd HH:mm:ss"
                              Value="{Binding TimeStampMax, Mode=TwoWay}"/>
    </StackPanel>
</Grid>

这是我的DataPoint 课程：

public class DataPoint
{
    public DataPoint() { }

    public DataPoint(DateTime timeStamp, double value)
    {
        TimeStamp = timeStamp;
        Value = value;
    }

    public double Value { get; set; }
    public DateTime TimeStamp { get; set; }
}

这是我的PlotGraph() 方法，它完成了所有的绘图工作。如果您想重现此应用程序，我将在本文底部包含我的整个 MainWindow() 代码。

private void PlotGraph()
{
    var mapper = Mappers.Xy<DataPoint>()
        .X(dp => dp.TimeStamp.Ticks)
        .Y(dp => dp.Value);
    SeriesCollection = new SeriesCollection(mapper);

    var lineSeries = new LineSeries
    {
        Values = DataPoints.AsChartValues(),
        Fill = Brushes.Transparent
    };
    SeriesCollection.Add(lineSeries);

    TimeStampMin = DataPoints.FirstOrDefault().TimeStamp;
    TimeStampMax = DataPoints.LastOrDefault().TimeStamp;

    Formatter = value => new DateTime((long)value).ToString("MM/dd/yy HH:mm:ss");

    DataContext = this;
}

现在，当我运行它并使用鼠标放大/缩小时，我的时间戳的更新结束值将很好地反映在 DateTimePicker 控件上。但是，如果我尝试在DateTimePicker 控件中设置值以放大/缩小，它将无法合作。当我尝试时，在我的 Output 窗口中，我收到以下两条与绑定相关的错误消息：

System.Windows.Data 错误：5：BindingExpression 产生的值是 对目标属性无效。；值='10/09/2019 15:50:41' BindingExpression:Path=TimeStampMin;数据项='主窗口'（名称=''）； 目标元素是 'Axis' (Name='');目标属性是“MinValue” （输入“双”）

System.Windows.Data 错误：5：产生的值 BindingExpression 对目标属性无效。；价值='10/09/2019 16:00:54' BindingExpression:Path=TimeStampMax;数据项='主窗口' （名称=''）；目标元素是 'Axis' (Name='');目标属性是 'MaxValue'（输入'Double'）

这告诉我问题出在绑定中，Axis.MinValue 和 Axis.MaxValue 期待双精度，而我的 TimeStampMin 和 TimeStampMax 显然是 DateTime 对象。我将如何进行转换以实现双向缩放？

---

Here 是我的整个MainWindow 代码，如果你想复制它的话。我将MVVMLight 工具包用于命令等，所以如果你想按原样运行它，你可能需要获取NuGet 包。

似乎有些人无法访问该链接，所以这里是完整的代码：

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public SeriesCollection SeriesCollection
    {
        get;
        set;
    }

    public Func<double, string> Formatter
    {
        get;
        set;
    }

    private DateTime _timeStampMin;
    public DateTime TimeStampMin
    {
        get
        {
            return _timeStampMin;
        }

        set
        {
            if (_timeStampMin == value)
                return;
            _timeStampMin = value;
            OnPropertyChanged("TimeStampMin");
        }
    }

    private DateTime _timeStampMax;
    public DateTime TimeStampMax
    {
        get
        {
            return _timeStampMax;
        }

        set
        {
            if (_timeStampMax == value)
                return;
            _timeStampMax = value;
            OnPropertyChanged("TimeStampMax");
        }
    }

    public List<DataPoint> DataPoints
    {
        get;
        set;
    }

    public RelayCommand<PreviewRangeChangedEventArgs> XRangeChangedCommand
    {
        get;
        private set;
    }

    public MainWindow()
    {
        InitializeComponent();
        XRangeChangedCommand = new RelayCommand<PreviewRangeChangedEventArgs>(e => XRangeChanged(e));
        InitializeData();
        PlotGraph();
    }

    private void InitializeData()
    {
        var now = DateTime.Now;
        DataPoints = new List<DataPoint>{new DataPoint()
        {Value = 1, TimeStamp = now.AddMinutes(1)}, new DataPoint()
        {Value = 4, TimeStamp = now.AddMinutes(2)}, new DataPoint()
        {Value = 9, TimeStamp = now.AddMinutes(3)}, new DataPoint()
        {Value = 16, TimeStamp = now.AddMinutes(4)}, new DataPoint()
        {Value = 25, TimeStamp = now.AddMinutes(5)}, new DataPoint()
        {Value = 36, TimeStamp = now.AddMinutes(6)}, new DataPoint()
        {Value = 49, TimeStamp = now.AddMinutes(7)}, new DataPoint()
        {Value = 64, TimeStamp = now.AddMinutes(8)}, new DataPoint()
        {Value = 81, TimeStamp = now.AddMinutes(9)}, new DataPoint()
        {Value = 100, TimeStamp = now.AddMinutes(10)}, new DataPoint()
        {Value = 11 * 11, TimeStamp = now.AddMinutes(11)}, new DataPoint()
        {Value = 12 * 12, TimeStamp = now.AddMinutes(12)}, new DataPoint()
        {Value = 13 * 13, TimeStamp = now.AddMinutes(13)}, new DataPoint()
        {Value = 14 * 14, TimeStamp = now.AddMinutes(14)}, new DataPoint()
        {Value = 15 * 15, TimeStamp = now.AddMinutes(15)}, new DataPoint()
        {Value = 16 * 16, TimeStamp = now.AddMinutes(16)}, new DataPoint()
        {Value = 17 * 17, TimeStamp = now.AddMinutes(17)}, new DataPoint()
        {Value = 18 * 18, TimeStamp = now.AddMinutes(18)}, new DataPoint()
        {Value = 19 * 19, TimeStamp = now.AddMinutes(19)}, new DataPoint()
        {Value = 20 * 20, TimeStamp = now.AddMinutes(20)}, };
    }

    private void PlotGraph()
    {
        var mapper = Mappers.Xy<DataPoint>().X(dp => dp.TimeStamp.Ticks).Y(dp => dp.Value);
        SeriesCollection = new SeriesCollection(mapper);
        var lineSeries = new LineSeries{Values = DataPoints.AsChartValues(), Fill = Brushes.Transparent};
        SeriesCollection.Add(lineSeries);
        TimeStampMin = DataPoints.FirstOrDefault().TimeStamp;
        TimeStampMax = DataPoints.LastOrDefault().TimeStamp;
        Formatter = value => new DateTime((long)value).ToString("MM/dd/yy HH:mm:ss");
        DataContext = this;
    }

    public void XRangeChanged(PreviewRangeChangedEventArgs e)
    {
        TimeStampMin = DateTime.FromBinary((long)e.PreviewMinValue);
        TimeStampMax = DateTime.FromBinary((long)e.PreviewMaxValue);
    }
}

Answer 1

是的，当您说问题在于轴 X 的最小值和最大值的 double 和 datetime 之间时，您得到了部分答案：

您有两种解决方案：要么使用 Converter，要么将 datepicker 和 min/max 值之间的值分开：这里是第二种解决方案：

在 xaml 文件中：

        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                  PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                  MinValue="{Binding TimeStampMinX, Mode=TwoWay}"
                  MaxValue="{Binding TimeStampMaxX, Mode=TwoWay}"/>
        </lvc:CartesianChart.AxisX>

在 cs.file 中：

    private double _timeStampMinX;
    public double TimeStampMinX
    {
        get
        {
            return _timeStampMinX;
        }

        set
        {
            if (_timeStampMinX == value)
                return;
            _timeStampMinX = value;
            OnPropertyChanged("TimeStampMinX");
        }
    }

    private double _timeStampMaxX;
    public double TimeStampMaxX
    {
        get
        {
            return _timeStampMaxX;
        }

        set
        {
            if (_timeStampMaxX == value)
                return;
            _timeStampMaxX = value;
            OnPropertyChanged("TimeStampMaxX");
        }
    }
    private DateTime _timeStampMin;
    public DateTime TimeStampMin
    {
        get
        {
            return _timeStampMin;
        }

        set
        {
            if (_timeStampMin == value)
                return;
            _timeStampMin = value;
            TimeStampMinX = value.Ticks;
            OnPropertyChanged("TimeStampMin");
        }
    }

    private DateTime _timeStampMax;
    public DateTime TimeStampMax
    {
        get
        {
            return _timeStampMax;
        }

        set
        {
            if (_timeStampMax == value)
                return;
            _timeStampMax = value;
            TimeStampMaxX = value.Ticks;
            OnPropertyChanged("TimeStampMax");
        }
    }

DateTime 和双精度值之间的联系是 DateTime.Ticks。

---

带转换器的解决方案：

类转换器：

public class DateTimeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((DateTime)value).Ticks;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

转换器在 xaml 文件中的集成（将命名空间 WpfApp2 更改为您的命名空间）

    xmlns:dc="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <dc:DateTimeConverter x:Key="DateTimeConverter"></dc:DateTimeConverter>
</Window.Resources>
                        :
                        :
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"
                  PreviewRangeChangedCommand="{Binding XRangeChangedCommand}"
                  MinValue="{Binding TimeStampMin, Mode=TwoWay,Converter={StaticResource DateTimeConverter}}"
                  MaxValue="{Binding TimeStampMax, Mode=TwoWay,Converter={StaticResource DateTimeConverter}}"/>
        </lvc:CartesianChart.AxisX>

在这种情况下，无需分离绑定值，转换器完成工作。