Why isn't my view updating when I update the source property?

Question

So I just started working with a library called LiveCharts and I am experimenting with one of the example projects and I've run into a issue.

I'm updating the source property LastHourSeries but the UI is not updating when I click the button which fires the UpdateChart function.

My MainWindow.xaml looks like this

<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>

And the userControl itself looks like this

<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>

And ofcourse the 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));
    }
}

Is this problem strictly related to the library or is it me who is using databinding in a bad way?

Original project https://lvcharts.net/App/examples/v1/wpf/Material%20Design

Answer 1

You are creating two instances of the ChartControlViewModel class. The UserControl should inherit the window's DataContext and not create its own view model. Try to remove this part from your UserControl 's XAML:

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