如何实时刷新WPF Toolkit ColumnSeries图表

Question

应用程序成功地向ColumnSeries WPF图表添加和清除数据，但在清除后重新添加失败。按照其他建议，在清除之前将DataContext设置为null并不能解决问题。以下是代码，感谢您的帮助：

public partial class MainWindow : Window
{

    public MainWindow()
        {
            dataToChart = new Input();
            InitializeComponent();
            this.DataContext = dataToChart;
        }

    private void Button_Click_Clear(object sender, RoutedEventArgs e)
        {
            foreach (var series in columnChart.Series.OfType<Series>())
                {
                    series.DataContext = null;
                }
                columnChart.Series.Clear();
                dataToChart.Clear();
        }

    private void Button_Click_Add(object sender, RoutedEventArgs e)
        {
            dataToChart.Add(new KeyValuePair<string, int>("Test", 10));
        }
}

Input.cs

public class Input
{
    public ObservableCollection<KeyValuePair<string, int>> ValueList { get; private set; }

    public Input()
    {
        this.ValueList = new ObservableCollection<KeyValuePair<string, int>>();
    }

    public void Add(KeyValuePair<string, int> data)
    {
        ValueList.Add(data);
    }

    public void Clear()
    {
        ValueList.Clear();
    }
}

MainWindow.xaml

<Window 
        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:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="IES_Console.MainWindow"
        x:Name="wndMain" Title="IES Console" AllowsTransparency="True" WindowStyle="None"  WindowStartupLocation="Manual" ResizeMode="NoResize" Background="Transparent" Foreground="{x:Null}" Loaded="Window_Loaded" Closing="Window_Closing" KeyUp="Window_KeyUp" MouseLeftButtonDown="Window_MouseLeftButtonDown" SizeChanged="Window_SizeChanged" LocationChanged="Window_LocationChanged" Icon="/IES%20Console;component/48x48.ico" MouseLeave="wndMain_MouseLeave" mc:Ignorable="d" FontFamily="Arial" Width="Auto" Height="Auto" SizeToContent="WidthAndHeight">


    <Grid x:Name="MainGrid" Background="Black" ShowGridLines="False" Width="531" Height="700"  VerticalAlignment="Top" HorizontalAlignment="Left">

        <!--Code taken out for simplicity-->


        <Grid x:Name="subFooter" Grid.Row="3" Background =" Black" Margin="0,20,0,-144">


            <TextBlock x:Name="textBlock1"  VerticalAlignment="top" Margin="10,10,0,0" TextWrapping="Wrap" 
                Text="TextBlock" Foreground="White" Width="511" Height="50"/>

            <chartingToolkit:Chart Height="262" HorizontalAlignment="Left" 
                                   Margin="33,0,0,10" Name="columnChart" Title="Column Series Demo" 
                                   VerticalAlignment="Bottom" Width="360">

                <chartingToolkit:ColumnSeries  DependentValuePath="Value" Visibility="Visible"
                                        IndependentValuePath="Key" ItemsSource="{Binding ValueList}" />

                <chartingToolkit:Chart.LegendStyle>
                    <Style TargetType="Control">
                        <Setter Property="Width" Value="0" />
                        <Setter Property="Height" Value="0" />
                    </Style>
                </chartingToolkit:Chart.LegendStyle>

            </chartingToolkit:Chart>

            <Button Content="Data Clear" HorizontalAlignment="Left" Margin="426,65,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_Clear"/>
            <Button Content="Data Add" HorizontalAlignment="Left" Margin="426,108,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_Add"/>

        </Grid>
    </Grid>
</Window>

- Dave B.

Answer 1

问题出在代码中。

private void Button_Click_Clear(object sender, RoutedEventArgs e)
{
    foreach (var series in columnChart.Series.OfType<Series>())
    {
        series.DataContext = null;
    }
    columnChart.Series.Clear();
    dataToChart.Clear();
}

1. 您将DataContext设置为null，但之后没有重新分配它，导致数据源中断。
2. 行columnChart.Series.Clear()会清除您在XAML中声明的ColumnSeries。同样，不重新分配会导致图表保持空白。

您可以使用以下方法解决这两个问题：

private void Button_Click_Clear(object sender, RoutedEventArgs e)
{
    dataToChart.Clear();
    foreach (var series in columnChart.Series.OfType<Series>())
    {
        series.DataContext = null;
        series.DataContext = dataToChart;
    }
}

当然，如果有多个具有不同DataContext的系列，则需要将正确的Input重新分配给相应的series.DataContext。

- bab7lon