為什么在更新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>