为什么在更新source属性时视图没有更新？

Question

因此，我刚开始使用一个名为LiveCharts的库，并且正在尝试一个示例项目，但遇到了一个问题。

我正在更新源属性LastHourSeries但是单击触发UpdateChart函数的按钮时，UI并未更新。

我的MainWindow.xaml看起来像这样

<Window.DataContext>
    <local:ChartControlViewModel/>
</Window.DataContext>
<Grid>
    <local:ChartControl x:Name="Eh"/>
    <Button Width="100" Height="25"
            Content="Update"
            Command="{Binding UpdateCommand}"
            Margin="484,244,208,150"/>
</Grid>

而且userControl本身看起来像这样

<UserControl.DataContext>
        <liveChartExample:ChartControlViewModel/>
    </UserControl.DataContext>

    <Grid Height="500" Width="650" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid Margin="15, -60, 15, 15" MaxHeight="350">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
            </Grid.Effect>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Border1}" />
            </Grid.OpacityMask>
            <Grid.Resources>
                <Style TargetType="lvc:LineSeries">
                    <Setter Property="StrokeThickness" Value="3"></Setter>
                    <Setter Property="Stroke" Value="White"></Setter>
                    <Setter Property="Fill" Value="#4EFFFFFF"></Setter>
                    <Setter Property="PointGeometrySize" Value="0"></Setter>
                    <Setter Property="LineSmoothness" Value="0"></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="Auto"></RowDefinition>
                <RowDefinition Height=".50*"></RowDefinition>
                <RowDefinition Height=".5*"></RowDefinition>
            </Grid.RowDefinitions>
            <Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />
            <Border Grid.Row="0" Grid.RowSpan="3" Background="#A61EE4" ></Border>
            <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
                    The Current Chart
            </TextBlock>
            <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2019.01.13</TextBlock>
            <lvc:CartesianChart Grid.Row="2" Margin="0, 0, 0, 0" Series="{Binding LastHourSeries, UpdateSourceTrigger=PropertyChanged}" Hoverable="False" DataTooltip="{x:Null}">
                <lvc:CartesianChart.AxisX>
                    <!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
                    <lvc:Axis MinValue="2"></lvc:Axis>
                </lvc:CartesianChart.AxisX>
            </lvc:CartesianChart>
            <StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
                <TextBlock Opacity=".4" FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture, StringFormat={}{0:N1}}" />
                    <TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>

当然还有ViewModel

class ChartControlViewModel : ObservableObject
{
    private SeriesCollection _lasthourSeriesCollection;

    public SeriesCollection LastHourSeries
    {
        get { return _lasthourSeriesCollection; }
        set
        {
            _lasthourSeriesCollection = value; 
            OnPropertyChanged();
        }
    }



    public RelayCommand UpdateCommand { get; set; }

    public ChartControlViewModel()
    {
        UpdateCommand = new RelayCommand(o => { UpdateChart(o); }, o => true);

        LastHourSeries = new SeriesCollection
        {
            new LineSeries
            {
                AreaLimit = -10,
                Values = new ChartValues<ObservableValue>
                {
                    new ObservableValue(3),
                    new ObservableValue(5),
                    new ObservableValue(6),
                    new ObservableValue(7),
                    new ObservableValue(3),
                    new ObservableValue(4),
                    new ObservableValue(2),
                    new ObservableValue(5),
                    new ObservableValue(8),
                    new ObservableValue(3),
                    new ObservableValue(5),
                    new ObservableValue(6),
                    new ObservableValue(7),
                    new ObservableValue(3),
                    new ObservableValue(4),
                    new ObservableValue(2),
                    new ObservableValue(5),
                    new ObservableValue(8)
                }
            }
        };


    }


    public void UpdateChart(object o)
    {
        LastHourSeries[0].Values.Add(new ObservableValue(100));
    }
}

这个问题与图书馆严格相关吗，还是我以不好的方式使用数据绑定？

原始项目https://lvcharts.net/App/examples/v1/wpf/Material%20Design

Answer 1

您正在创建ChartControlViewModel类的两个实例。 UserControl应该继承窗口的DataContext ，而不创建自己的视图模型。 尝试从UserControl的XAML中删除此部分：

<UserControl.DataContext>
    <liveChartExample:ChartControlViewModel/>
</UserControl.DataContext>