ComboBox 内的绑定图表答案

【问题标题】：Binding chart inside ComboBoxComboBox 内的绑定图表
【发布时间】：2017-10-17 12:46:56
【问题描述】：

所以我想在我的ComboBox 中绑定Chart：

XAML:

<ComboBox x:Name="cbAdapters" SelectedIndex="0" Margin="30">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <telerik:RadCartesianChart x:Name="chartTemplate"
                                       Width="300" Height="200">
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis/>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LineSeries ValueBinding="Rate" CategoryBinding="Category" ItemsSource="{Binding ChartPlotInfos}" />
            </telerik:RadCartesianChart>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Code behind:

public MainWindow()
{
    InitializeComponent();

    var r = new Random();
    var comboBoxSource = new ObservableCollection<MachineNetworkAdapter>();
    for (int i = 0; i < 3; i++)
    {
        var adapter = new MachineNetworkAdapter()
        {
            Name = "Adapter " + i,
            IpAddress = r.Next(0, 255) + "." + r.Next(0, 255) + "." + r.Next(0, 255) + "." + r.Next(0, 255),
            ChartPlotInfos = new ObservableCollection<ChartPlotInfo>(),
        };

        for (int k = 0; k < 10; k++)
        {
            adapter.ChartPlotInfos.Add(new ChartPlotInfo() { Category = "Category " + k, Rate = r.Next(100, 300) });
        }

        comboBoxSource.Add(adapter);
    }

    cbAdapters.ItemsSource = comboBoxSource;
}

}

型号：

public class MachineNetworkAdapter
{
    public string Name { get; set; }
    public string IpAddress { get; set; }
    public ObservableCollection<ChartPlotInfo> ChartPlotInfos { get; set; }
}

public class ChartPlotInfo
{
    public double Rate { get; set; }
    public string Category { get; set; }
}

所以这很好用，除了在我的ComboBox 中我只能看到我的Chart 但我的MachineNetworkAdapter Name 和IP Address 不见了。

【问题讨论】：

在DataTemplate中，你还没有为Name和IpAddress设置绑定。

标签： wpf charts combobox binding

【解决方案1】：

你应该放两个控件来显示Name和IpAddress，不要忘记为它们设置绑定。

<ComboBox x:Name="cbAdapters" SelectedIndex="0" Margin="30">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding Name}"/>
                 <TextBlcok Text="{Binding IpAddress}"/>
                 <telerik:RadCartesianChart x:Name="chartTemplate" Width="300" Height="200">
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis />
                    </telerik:RadCartesianChart.VerticalAxis>
                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:CategoricalAxis/>
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:LineSeries ValueBinding="Rate" CategoryBinding="Category" ItemsSource="{Binding ChartPlotInfos}" />
                </telerik:RadCartesianChart>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

【讨论】：