如何将 WPFToolkit 图表的项目源动态数据绑定到公共属性？

Question

如何动态更新 WPF ToolKit 图表控件的数据源？在以下示例中，我使用 {Binding SomeText} 成功更新了 TextBlock.Text 属性，并将 MainWindow 的 DataContext 设置为属性 Input。 （请看下面的代码）

TextBlock.Text 绑定到 Input.SomeText 并且图表假设使用 Input.ValueList 作为数据源。

但图表仍然是空的。我可以通过放置一次填充它

lineChart.DataContext = Input.ValueList;

在主窗口构造函数中并将 XAML 中的绑定设置为 ItemsSource="{Binding}"。但这仅在启动时有效，例如，当您单击按钮时它不会更新。我想在应用程序使用新传入数据运行时更新图表。

我有以下 XAML：

<chartingToolkit:Chart  Name="lineChart">

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

</chartingToolkit:Chart>
<Button Width="100" Height="24" Content="More" Name="Button1" />
<TextBlock Name="TextBlock1" Text="{Binding SomeText}" />

带代码：

class MainWindow
{

    public DeviceInput Input;

    public MainWindow()
    {
        InitializeComponent();

        Input = new DeviceInput();
        DataContext = Input;
            lineChart.DataContext = Input;
        Input.SomeText = "Lorem ipsum.";

    }

    private void Button1_Click(System.Object sender, System.Windows.RoutedEventArgs e)
    {
        Input.AddValues();
    }
}

public class DeviceInput : INotifyPropertyChanged
{

    private string _SomeText;
    public string SomeText {
        get { return _SomeText; }

        set {
            _SomeText = value;
            OnPropertyChanged("SomeText");
        }
    }


    public List<KeyValuePair<string, int>> ValueList {get; private set;}

    public DeviceInput()
    {
        ValueList = (new List<KeyValuePair<string, int>>());
        AddValues();
    }

    public void AddValues()
    {
            //add values (code removed for readability)
        SomeText = "Items: " + ValueList.Count.ToString();
        OnPropertyChanged("ValueList");
    }

    public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged;

    private void OnPropertyChanged(String info)
    {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

}

SomeText 得到更新并确保 ValueList 发生变化，我将 ValueList.Count 放在文本块中，您可以看到计数按应有的上升，但图表保持不变。

所以这会导致 1 次成功绑定（但不会更新）：

lineChart.DataContext = Input.ValueList;

ItemsSource="{Binding}"

这根本不绑定：

ItemsSource="{Binding ValueList}"

Answer 1

wpf 绑定到公共属性所以你需要

 public List<KeyValuePair<string, int>> ValueList {get; private set;}

编辑：here 有关使用图表控件的更多信息。

EDIT2：

ItemsSource="{Binding ValueList}"

这是行不通的，因为您必须首先将 ValueList 创建为属性，然后您需要将 datacontext 设置为 DeviceInput 的实例（就像您在 mainwindow.cs 中所做的那样）。

EDIT3：快速而肮脏的示例，只需复制和粘贴，如果您点击按钮，数据将被添加

视图模型

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

    public Input()
    {
        this.ValueList = new ObservableCollection<KeyValuePair<string, int>>();
        ValueList.Add(new KeyValuePair<string, int>("Developer", 60));
        ValueList.Add(new KeyValuePair<string, int>("Misc", 20));
        ValueList.Add(new KeyValuePair<string, int>("Tester", 50));
        ValueList.Add(new KeyValuePair<string, int>("QA", 30));
        ValueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
    }

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

window.cs

public partial class MainWindow : Window
{
  private Input data;
  public MainWindow()
  {
    data= new Input();
    InitializeComponent();
    this.DataContext = data;
  }

  private void button1_Click(object sender, RoutedEventArgs e)
  {
    this.data.Add(new KeyValuePair<string, int>("XXX", 27));
  }

}

xaml

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
    <Grid Height="921">
        <chartingToolkit:Chart Height="262" HorizontalAlignment="Left" Margin="33,0,0,620" Name="columnChart" Title="Column Series Demo" VerticalAlignment="Bottom" Width="360">
            <chartingToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" />              
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="pieChart" Title="Pie Series Demo" VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
            <chartingToolkit:PieSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True" />
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="areaChart" Title="Area Series Demo" VerticalAlignment="Top" Margin="33,330,440,0" Height="262">
            <chartingToolkit:AreaSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="barChart" Title="Bar Series Demo" VerticalAlignment="Top" Margin="449,330,43,0" Height="262">
            <chartingToolkit:BarSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" VerticalAlignment="Top" Margin="33,611,440,0" Height="254">
            <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="342,10,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>
</ScrollViewer>