我正在创建一个基于C＃的WPF演示应用程序，该应用程序具有用户定义的控件(用户控制("卡"，该应用程序具有两个标签和一个图表( livecharts (。
我如何正确地将数据绑定到 livecharts 在卡用户控件内部的控制，以便显示图表？
我尝试了各种可能的解决方案，包括DataContext={Binding RelativeSource={RelativeSource Self}}。
不使用用户控件，该图表正确显示，但是由于我需要多个实例，我希望拥有一个用户控制以重复使用。
图片：运行时当前应用的示例
存储库
https://github.com/pwa-goulda/c4prog-dotnet-wpf-livechartdemo
代码提取：
cardlinechart.xaml的互动逻辑
public partial class CardLineChart : UserControl
{
public CardLineChart()
{
InitializeComponent();
CardGrid.DataContext = this;
}
#region SeriesData DP
public SeriesCollection SeriesData
{
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("SeriesData",
typeof(SeriesCollection), typeof(CardLineChart),
new PropertyMetadata(new SeriesCollection()));
#endregion
#region BackgroundColour DP
public string BackgroundColour
{
set { SetValue(ColourBG, value); }
}
public static readonly DependencyProperty ColourBG =
DependencyProperty.Register("BackgroundColour",
typeof(string), typeof(CardLineChart), new PropertyMetadata(""));
#endregion
#region BottomLabel DP
public string BottomLabel
{
set { SetValue(LabelAtBottom, value); }
}
public static readonly DependencyProperty LabelAtBottom =
DependencyProperty.Register("BottomLabel",
typeof(string), typeof(CardLineChart), new PropertyMetadata(null));
#endregion
#region TopLabel DP
public string TopLabel
{
set { SetValue(LabelAtTop, value); }
}
public static readonly DependencyProperty LabelAtTop =
DependencyProperty.Register("TopLabel",
typeof(string), typeof(CardLineChart), new PropertyMetadata(null));
#endregion
}
cardlinechart.xaml
<UserControl x:Class="WPF_With_LiveCharts.CardLineChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="200"
>
<Grid x:Name="CardGrid" Margin="5,5,5,5" MaxHeight="200" MaxWidth="200">
<Grid.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="2"/>
</Grid.Effect>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border1}" />
</Grid.OpacityMask>
<Grid.Resources>
<Style TargetType="lvc:LineSeries">
<Setter Property="StrokeThickness" Value="1"></Setter>
<Setter Property="Stroke" Value="White"></Setter>
<Setter Property="Fill" Value="#00ffffff"></Setter>
<Setter Property="PointGeometrySize" Value="0"></Setter>
<Setter Property="LineSmoothness" Value="0.25"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="ShowLabels" Value="False"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="80*"></RowDefinition>
</Grid.RowDefinitions>
<Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="3" CornerRadius="5"
Background="{Binding Path=BackgroundColour}" />
<TextBlock Grid.Row="0" TextAlignment="Center" Padding="5, 5, 0, 5"
Foreground="#ccFFFFFF" FontSize="12"
Text="{Binding Path=TopLabel}" />
<lvc:CartesianChart Grid.Row="1"
Margin="0,0,0,0"
Series="{Binding Path=SeriesData}"
Hoverable="False"
DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<lvc:Axis MinValue="0"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
<TextBlock Grid.Row="2" x:Name="ChartValue"
Foreground="#ccFFFFFF" FontSize="48"
VerticalAlignment="Center" TextAlignment="Center"
Margin="8,0,8,6" Text="{Binding Path=BottomLabel}"/>
</Grid>
</UserControl>
windowmain.cs
public partial class MainWindow : Window
{
public SeriesCollection theData;
public SeriesCollection theData2;
public string BackgroundColour;
public MainWindow()
{
InitializeComponent();
theData = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<decimal> { 7, 3, 2, 3, 5, 7, 4 }
}
};
theData2 = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<decimal> { 100, 90, 70, 40, 10 }
}
};
BackgroundColour = "#FFCE2156";
DataContext = this;
}
private void ButtonLineChart_Click(object sender, RoutedEventArgs e)
{
}
}
windowmain.xaml
<Window x:Class="WPF_With_LiveCharts.MainWindow"
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:local="clr-namespace:WPF_With_LiveCharts"
xmlns:control = "clr-namespace:WPF_With_LiveCharts"
mc:Ignorable="d"
Title="MainWindow" Height="460" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonLineChart" Content="Line Chart" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonLineChart_Click" Height="25"/>
<Button x:Name="ButtonPieChart" Content="Pie Chart" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="2" Height="25"/>
<control:CardLineChart
Grid.Column="0" Grid.Row="1"
x:Name="TestingCardLineChart"
SeriesData="{Binding theData}"
BackgroundColour="#ffc22735"
TopLabel="Testing"
BottomLabel="123"
/>
<control:CardLineChart
Grid.Column="1"
Grid.Row="1"
x:Name="TestingCardLineChart2"
SeriesData="{Binding theData2}"
BackgroundColour="#FF000000"
TopLabel="Oh Yes!"
BottomLabel="9999"
/>
</Grid>
</Window>
绑定在WPF中的字段上不起作用。如果将MainWindow.xaml.cs上的系列集合更改为使用属性，则应该可以看到图形。
例如
public SeriesCollection theData { get; set; }
public SeriesCollection theData2 { get; set; }