將 LiveCharts Pie Chart PieSeries Values 綁定到后面代碼中的屬性

Question

我有以下一個包含從數據庫中獲取數據值的屬性的類。

    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 中的 PieSeries 值。

當我嘗試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：'未將對象引用設置為對象的實例。'

請告知我做錯了什么？”。

Answer 1

Apples屬性不存在，而Fruit實例存在。 您必須向UserControl添加一個屬性並創建一個Fruit實例。 此外，屬性的類型必須是ChartValues<T>類型的集合。

由於Fruit是實體框架返回的 POCO，因此您必須為圖表創建一個包裝類以作為圖表模型。

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 屬性：

餅圖示例.xaml

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

如果要在FruitPieChartModel屬性上設置Binding （作為綁定目標），則必須將其設為DependencyProperty 。