将 LiveCharts Pie Chart PieSeries Values 绑定到代码后面的属性

Question

我有以下 class 包含从数据库获取数据值的属性。

    public partial class Fruit
    {

        public double Apples { get; set; }
        public double Oranges { get; set; }
        public double Grapes { get; set; }
        public double Bananas { get; set; }
    }

我想将这些属性绑定到 LiveCharts PieChart.

当我尝试 Values="{Binding Source= Apples}" 时，控制中断。谁能帮忙？我的代码如下。 C#

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Windows;
using System.Windows.Controls;

namespace Wpf.PieChart
{
    public partial class PieChartExample : UserControl
    {
        public Fruit Fruit => new Fruit();
        public Fruit fruitData = new Fruit();
        public static readonly DependencyProperty FruitPieChartModelProperty = DependencyProperty.Register(
                                                "FruitPieChartModel",
                                                typeof(FruitPieChartDataModel),
                                                typeof(PieChartExample),
                                                new PropertyMetadata(default(FruitPieChartDataModel)));

        public FruitPieChartDataModel FruitPieChartModel
        {
            get => (FruitPieChartDataModel)GetValue(PieChartExample.FruitPieChartModelProperty);
            set => SetValue(PieChartExample.FruitPieChartModelProperty, value);
        }

        public PieChartExample()
        {
            InitializeComponent();
            PointLabel = chartPoint =>
                string.Format("{0} ({1:P})", chartPoint.Y, chartPoint.Participation);
            DataContext = this;
            CreatePieChartData(fruitData);
        }
        private void CreatePieChartData(Fruit fruitData)
        {
            this.FruitPieChartModel = new FruitPieChartDataModel(fruitData);
        }
        public Func<ChartPoint, string> PointLabel { get; set; }
        private void Chart_OnDataClick(object sender, ChartPoint chartpoint)
        {
            var chart = (LiveCharts.Wpf.PieChart)chartpoint.ChartView;

            //clear selected slice.
            foreach (PieSeries series in chart.Series)
                series.PushOut = 0;

            var selectedSeries = (PieSeries)chartpoint.SeriesView;
            selectedSeries.PushOut = 8;
        }
    }
    public class FruitPieChartDataModel
    {
        public FruitPieChartDataModel(Fruit entityFrameworkDataModel)
        {
            this.AppleDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Apples };
            this.OrangeDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Oranges };
            this.GrapeDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Grapes };
            this.BananaDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Bananas };
        }

        public ChartValues<double> AppleDataSeries { get; set; }
        public ChartValues<double> OrangeDataSeries { get; set; }
        public ChartValues<double> GrapeDataSeries { get; set; }
        public ChartValues<double> BananaDataSeries { get; set; }
    }

    public partial class Fruit
    {
        public double Apples { get; set; } = 6;
        public double Oranges { get; set; } = 4;
        public double Grapes { get; set; } = 8;
        public double Bananas { get; set; } = 5;
    }
}

XAML

<UserControl
    x:Class="Wpf.PieChart.PieChartExample"
    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:local="clr-namespace:Wpf.PieChart"
    xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DataContext="{d:DesignInstance local:PieChartExample}"
    d:DesignHeight="300"
    d:DesignWidth="500"
    mc:Ignorable="d">
    <Grid>
        <lvc:PieChart
            DataClick="Chart_OnDataClick"
            DataTooltip="{x:Null}"
            Hoverable="False"
            LegendLocation="Bottom">
            <lvc:PieChart.Series>
                <lvc:PieSeries
                    Title="Apples"
                    DataLabels="True"
                    LabelPoint="{Binding PointLabel}"
                    Values="{Binding FruitPieChartModel.AppleDataSeries}" />
                <lvc:PieSeries
                    Title="Oranges"
                    DataLabels="True"
                    LabelPoint="{Binding PointLabel}"
                    Values="{Binding FruitPieChartModel.OrangeDataSeries}" />
                <lvc:PieSeries
                    Title="Grapes"
                    DataLabels="True"
                    LabelPoint="{Binding PointLabel}"
                    Values="{Binding FruitPieChartModel.GrapeDataSeries}" />
                <lvc:PieSeries
                    Title="Bananas"
                    DataLabels="True"
                    LabelPoint="{Binding PointLabel}"
                    Values="{Binding FruitPieChartModel.BananaDataSeries}" />
            </lvc:PieChart.Series>
        </lvc:PieChart>
    </Grid>
</UserControl>

此代码结合了 BionicCode 提出的宝贵建议。

不幸的是，我无法将软件安装到运行，因为我遇到了“System.NullReferenceException: 'Object reference not set to an instance of an object.'

请指教我做错了什么？"。

Answer 1

属性 Apples 不存在，Fruit 的实例存在。您必须将属性添加到 UserControl 并创建 Fruit 的实例。此外，属性的类型必须是 ChartValues<T> 类型的集合。

由于 Fruit 是由 Entity Framework 返回的 POCO，因此您必须为图表创建一个包装器 class 作为图表模型。

FruitPieChartDataModel.cs

public class FruitPieChartDataModel
{
  public FruitPieChartDataModel(Fruit entityFrameworkDataModel)
  {
    this.AppleDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Apples };
    this.OrangeDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Oranges };
    this.GrapeDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Grapes };
    this.BananaDataSeries = new ChartValues<double>() { entityFrameworkDataModel.Bananas };
  }

  public ChartValues<double> AppleDataSeries { get; set; }
  public ChartValues<double> OrangeDataSeries { get; set; }
  public ChartValues<double> GrapeDataSeries { get; set; }
  public ChartValues<double> BananaDataSeries { get; set; }
}

PieChartExample.xaml.cs

public partial class PieChartExample : UserControl
{   
  public static readonly DependencyProperty FruitPieChartModelProperty = DependencyProperty.Register(
    "FruitPieChartModel",
    typeof(FruitPieChartDataModel),
    typeof(PieChartExample),
    new PropertyMetadata(default(FruitPieChartDataModel)));

  public FruitPieChartDataModel FruitPieChartModel
  {
    get => (FruitPieChartDataModel) GetValue(PieChartExample.FruitPieChartModelProperty);
    set => SetValue(PieChartExample.FruitPieChartModelProperty, value);
  }

  private void CreatePieChartData(Fruit fruitData)
  {
    this.FruitPieChartModel = new FruitPieChartDataModel(fruitData);
  }

  ...
}

然后就可以把饼图绑定到FruitPieChartModel上了属性:

PieChartExample.xaml

<lvc:PieSeries Title="Apples" 
               Values="{Binding FruitPieChartModel.AppleDataSeries}" 
               DataLabels="True"
               LabelPoint="{Binding PointLabel}"/>

如果要在 FruitPieChartModel 属性上设置 Binding（作为绑定目标），则必须将其设置为 DependencyProperty.

将 LiveCharts Pie Chart PieSeries Values 绑定到代码后面的属性

Bind LiveCharts Pie Chart PieSeries Values to properties in the code behind

c#

wpf

data-binding

livecharts