c# - 更新数据时更新 WPF Bar Chart Ghosting/Fading 效果

Question

我有一个 WPF 条形图，每 200 毫秒更新一次。它可以很好地更新新数据，但存在重影效果。因此，当条形图从 1 变为 0.5 时，原始条形图所在的位置会出现一个褪色的条形图。我不确定为什么会发生这种情况，但我想将其删除，以便条形图干净利落地移动。

主窗口.xml

<charting:Chart Grid.Column="0" HorizontalAlignment="Stretch" Margin="6,6,6,6" Name="motorPowerChart" VerticalAlignment="Stretch" Title="Motor Power">
                    <charting:ColumnSeries IndependentValueBinding="{Binding Key}"
                                           DependentValueBinding="{Binding Value}"
                                           ItemsSource="{Binding}">
                    </charting:ColumnSeries>
                    <charting:Chart.Axes>
                        <charting:LinearAxis Orientation="Y" Minimum="0" Maximum="1" Title="PWM Frequency"/>
                    </charting:Chart.Axes>
                    <charting:Chart.LegendStyle>
                        <Style TargetType="Control">
                            <Setter Property="Width" Value="0"/>
                            <Setter Property="Height" Value="0"/>
                        </Style>
                    </charting:Chart.LegendStyle>
                </charting:Chart>

主窗口.xml.cs

public partial class MainWindow : Window
        {
        DispatcherTimer _statusUpdateTimer;
        public ObservableCollection<KeyValuePair<string, double>> MotorPowerGraphData = new ObservableCollection<KeyValuePair<string, double>>();
        public ObservableCollection<KeyValuePair<string, double>> PIDGraphData = new ObservableCollection<KeyValuePair<string, double>>();

        public MainWindow()
        {
              InitializeComponent();

              _statusUpdateTimer = new DispatcherTimer();
              _statusUpdateTimer.Interval = new TimeSpan(0, 0, 0, 0, 200);
              _statusUpdateTimer.Tick += new EventHandler(updateStatus);

              motorPowerChart.DataContext = MotorPowerGraphData;
              pidChart.DataContext = PIDGraphData;
        }

        private void updateStatus(Object myObject, EventArgs myEventArgs)
        {

              double[] status = SerialCommunications.GetStatus();

              MotorPowerGraphData.Clear();
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("Motor1", status[0]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("Motor2", status[1]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("Motor3", status[2]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("Motor4", status[3]));

              PIDGraphData.Clear();
              PIDGraphData.Add(new KeyValuePair<String, double>("Yaw", status[8]));
              PIDGraphData.Add(new KeyValuePair<String, double>("Pitch", status[9]));
              PIDGraphData.Add(new KeyValuePair<String, double>("Roll", status[10]));

        }

谁能帮我解决这个问题？

谢谢

编辑

我放慢了计时器，使其每秒滴答一次，并尝试从更新状态函数中输入虚拟数据，但我仍然看到相同的行为。它在 10Hz 时看起来更糟，因为在下一个呈现在顶部之前，这些条没有时间消退。

这是我新的更新状态函数

int i = 0;
        private void updateStatus(Object myObject, EventArgs myEventArgs)
        {

              /*double[] status = SerialCommunications.GetStatus();

              MotorPowerGraphData.Clear();
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("M1 " + Math.Round(status[0], 3), status[0]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("M2 " + Math.Round(status[1], 3), status[1]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("M3 " + Math.Round(status[2], 3), status[2]));
              MotorPowerGraphData.Add(new KeyValuePair<String, double>("M4 " + Math.Round(status[3], 3), status[3]));

              PIDGraphData.Clear();
              PIDGraphData.Add(new KeyValuePair<String, double>("Yaw " + Math.Round(status[8], 0), status[8]));
              PIDGraphData.Add(new KeyValuePair<String, double>("Pitch " + Math.Round(status[9], 0), status[9]));
              PIDGraphData.Add(new KeyValuePair<String, double>("Roll " + Math.Round(status[10], 0), status[10]));

              IMUGraphData.Clear();
              IMUGraphData.Add(new KeyValuePair<String, double>("Yaw " + Math.Round(status[4],0), status[4]));
              IMUGraphData.Add(new KeyValuePair<String, double>("Pitch " + Math.Round(status[5], 0), status[5]));
              IMUGraphData.Add(new KeyValuePair<String, double>("Roll " + Math.Round(status[6], 0), status[6]));

              if (status[7] == 1) batteryStatusLabel.Content = "Battery Level: Charged";
              else batteryStatusLabel.Content = "Battery Level: Empty";*/

              if (i == 5) i = 0;
              else
              {
                    IMUGraphData.Clear();
                    IMUGraphData.Add(new KeyValuePair<String, double>("Yaw " + i*30, i*30));
                    IMUGraphData.Add(new KeyValuePair<String, double>("Pitch " + i*-30, i*-30));
                    IMUGraphData.Add(new KeyValuePair<String, double>("Roll " + i * 15, i * 15));
                    i++;
              }

        }

我已经上传了一个视频到youtube这样您就可以看到图表在更新时的样子

编辑

我已经使用图表控件在 Win 表单中尝试过这个并且它工作得很好，但是我想使用 WPF 因为我想渲染一个立方体，它根据偏航、俯仰和滚动以及我所读的内容在空间中旋转这在 WPF 中很容易做到

编辑

如果没有人知道为什么这不起作用，谁能推荐一些其他显示我的数据的方式？

解决方案

我在适当的位置编辑了值，而不是删除并将它们添加到可观察集合中。

 public partial class MainWindow : Window
        {

        DispatcherTimer _statusUpdateTimer;
        public ObservableCollection<KeyValuePair<string, double>> _motorPowerGraphData = new ObservableCollection<KeyValuePair<string, double>>();
        public ObservableCollection<KeyValuePair<string, double>> _ratePIDGraphData = new ObservableCollection<KeyValuePair<string, double>>();
        public ObservableCollection<KeyValuePair<string, double>> _stabPIDGraphData = new ObservableCollection<KeyValuePair<string, double>>();
        public ObservableCollection<KeyValuePair<string, double>> _imuGraphData = new ObservableCollection<KeyValuePair<string, double>>();

        public MainWindow()
        {
              InitializeComponent();

              _motorPowerGraphData.Clear();
              _motorPowerGraphData.Add(new KeyValuePair<string, double>("M1 0", 0));
              _motorPowerGraphData.Add(new KeyValuePair<string, double>("M2 0", 0));
              _motorPowerGraphData.Add(new KeyValuePair<string, double>("M3 0", 0));
              _motorPowerGraphData.Add(new KeyValuePair<string, double>("M4 0", 0));

              _ratePIDGraphData.Clear();
              _ratePIDGraphData.Add(new KeyValuePair<String, double>("Yaw 0", 0));
              _ratePIDGraphData.Add(new KeyValuePair<String, double>("Pitch 0", 0));
              _ratePIDGraphData.Add(new KeyValuePair<String, double>("Roll 0", 0));

              _stabPIDGraphData.Clear();
              _stabPIDGraphData.Add(new KeyValuePair<String, double>("Yaw 0", 0));
              _stabPIDGraphData.Add(new KeyValuePair<String, double>("Pitch 0", 0));
              _stabPIDGraphData.Add(new KeyValuePair<String, double>("Roll 0", 0));

              _imuGraphData.Clear();
              _imuGraphData.Add(new KeyValuePair<String, double>("Yaw 0", 0));
              _imuGraphData.Add(new KeyValuePair<String, double>("Pitch 0",  0));
              _imuGraphData.Add(new KeyValuePair<String, double>("Roll 0",  0));

              _statusUpdateTimer = new DispatcherTimer();
              _statusUpdateTimer.Interval = new TimeSpan(0, 0, 0, 0, 200);
              _statusUpdateTimer.Tick += new EventHandler(updateStatus);

              motorPowerChart.DataContext = _motorPowerGraphData;
              ratePIDChart.DataContext = _ratePIDGraphData;
              stabPIDChart.DataContext = _stabPIDGraphData;
              imuChart.DataContext = _imuGraphData;
        }

        private void updateStatus(Object myObject, EventArgs myEventArgs)
        {

              double[] status = SerialCommunications.GetStatus();

              _motorPowerGraphData[0] = new KeyValuePair<String, double>("M1 " + Math.Round(status[0], 3), status[0]);
              _motorPowerGraphData[1] = new KeyValuePair<String, double>("M2 " + Math.Round(status[1], 3), status[1]);
              _motorPowerGraphData[2] = new KeyValuePair<String, double>("M3 " + Math.Round(status[2], 3), status[2]);
              _motorPowerGraphData[3] = new KeyValuePair<String, double>("M4 " + Math.Round(status[3], 3), status[3]);

              _ratePIDGraphData[0] = new KeyValuePair<String, double>("Yaw " + Math.Round(status[8], 0), status[8]);
              _ratePIDGraphData[1] = new KeyValuePair<String, double>("Pitch " + Math.Round(status[9], 0), status[9]);
              _ratePIDGraphData[2] = new KeyValuePair<String, double>("Roll " + Math.Round(status[10], 0), status[10]);

              _stabPIDGraphData[0] = new KeyValuePair<String, double>("Yaw " + Math.Round(status[8], 0), status[11]);
              _stabPIDGraphData[1] = new KeyValuePair<String, double>("Pitch " + Math.Round(status[9], 0), status[12]);
              _stabPIDGraphData[2] = new KeyValuePair<String, double>("Roll " + Math.Round(status[10], 0), status[13]);

              _imuGraphData[0] = new KeyValuePair<String, double>("Yaw " + Math.Round(status[4],0), status[4]);
              _imuGraphData[1] = new KeyValuePair<String, double>("Pitch " + Math.Round(status[5], 0), status[5]);
              _imuGraphData[2] = new KeyValuePair<String, double>("Roll " + Math.Round(status[6], 0), status[6]);

              if (status[7] == 1) batteryStatusLabel.Content = "Battery Level: Charged";
              else batteryStatusLabel.Content = "Battery Level: Empty";

              double armed = status[14];
              if (armed == 1)
              {
                    armButton.Content = "Disarm";
                    armedLabel.Content = "Armed: True";
              }
              else
              {
                    armButton.Content = "Arm";
                    armedLabel.Content = "Armed: False";
              }

              double rateMode = status[16];
              double stabMode = status[17];
              if (rateMode == 1 && stabMode == 0)
              {
                    modeLabel.Content = "Mode: Rate";
                    modeButton.Content = "Set Mode To Stability";
              }
              else
              {
                    modeLabel.Content = "Mode: Stability";
                    modeButton.Content = "Set Mode To Rate";
              }

              double initialised = status[15];
              if (initialised == 1) initialisedLabel.Content = "Initialised: True";
              else initialisedLabel.Content = "Initialised: False";
        }

Answer 1

查看 WPFToolkit 中的源代码，BarDataPoint 似乎有一个“显示”VisualState，它在 0.5 秒内将不透明度从 0 -> 1 动画化。我的猜测是，由于您要为条形图添加和删除 KeyValuePairs，因此工具包会“显示”新的 BarDataPoints，就好像它们是新数据一样。

<VisualStateGroup x:Name="RevealStates">
  <VisualStateGroup.Transitions>
    <VisualTransition GeneratedDuration="0:0:0.5" />
  </VisualStateGroup.Transitions>
  <VisualState x:Name="Shown">
    <Storyboard>
      <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
    </Storyboard>
  </VisualState>
  <VisualState x:Name="Hidden">
    <Storyboard>
      <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
    </Storyboard>
  </VisualState>
</VisualStateGroup>

我可以想象两种可能的解决方案:

1. 直接修改绑定(bind)数据。不要添加/删除您的 KeyValuePairs，而是就地更新它们。根据绑定(bind)源的设置方式，让绑定(bind)更新可能有点棘手。
2. 覆盖 BarDataPoints 的 DefaultStyle。或者，直接修改 WPFToolkit 的源代码(假设您自己构建它)以尝试删除有问题的“RevealStates”。