binding View from VM variable

Question

I want to display the data from my TelemetryDataPoint inside the VM to the View, just for extra information, the TelemetryDataPoint received the data from my Helper clas. I already tried with my code below, but somehow the data won't displayed to my View but if I debug TelemetryDataPoint it has the value on it.

TelemetryDataPointVM.cs

public class TelemetryDataPointVM : INotifyPropertyChanged
{       
    private TelemetryDataPoint? telemetryDataPoint;
   
    public TelemetryDataPoint? TelemetryDataPoint
    {
        get => telemetryDataPoint;
        set
        {
            // when I checked the value below it has the value
            telemetryDataPoint = value;
            OnPropertyChanged(nameof(TelemetryDataPoint));
        }
    }
    public TelemetryDataPointVM()
    {
        
    }
    public event PropertyChangedEventHandler? PropertyChanged;
    private void OnPropertyChanged(string propertyName) 
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

HelperClass.cs

public class GetPortHelper
    { 
        TelemetryDataPointVM TelemetryDataPointVM { get; set; }

        public GetPortHelper()
        {
            TelemetryDataPointVM = new();
        }

        private void DataReceivedHandler(object sender, SerialDataReceivedEventArgs e)
        {
            SerialPort sp = (SerialPort)sender;

            if(sp.IsOpen)
            {
                string DataString = sp.ReadLine();
                string[] arrayDataString = DataString.Split(",");

                if(arrayDataString[3] == "C")
                {
                   TelemetryDataPointVM.TelemetryDataPoint = ParseToTelemetryData(arrayDataString);
                }
                else if(arrayDataString[3] == "Y")
                {
                    //ParseToTetheredData(arrayDataString);
                }
             }
         }

    }

Altitude.xaml

<UserControl x:Class="GUI_Cansat.View.Altitude"
        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:local="clr-namespace:GUI_Cansat.View"
        xmlns:vm="clr-namespace:GUI_Cansat.ViewModel"
        mc:Ignorable="d" 
        d:DesignHeight="450" d:DesignWidth="800">
<UserControl.DataContext>
    <vm:TelemetryDataPointVM/>
</UserControl.DataContext>
<Grid>
    <Label  Content="{Binding TelemetryDataPoint.Altitude, Mode=TwoWay}"
            ContentStringFormat="Altitude:      {0} M"
            Style="{StaticResource fontMain}"
            VerticalAlignment="Center" FontSize="14"/>
</Grid>

Update 1:

I assembled my Altitude in my MainWindows like this:

<Border Style="{StaticResource borderMain}"
                Grid.Row="8">
            <view:Altitude  x:Name="Altitude" />
        </Border>

Should I put the DataContext inside this <view:Altitude/>? If I put the code like this and {Binding TelemetryDataPointVM}, my VS told me "No Data context found for binding"

Answer 1

The problem here is that you have two instances of the view model class, one created by

<UserControl.DataContext>
    <vm:TelemetryDataPointVM/>
</UserControl.DataContext>

and one by

TelemetryDataPointVM = new();

in the GetPortHelper constructor.

A UserControl, like any other control, should never explicitly set its own DataContext (and thus have its own "private" view model). It should instead inherit the DataContext from the main view in which it lives, e.g. a MainWindow.

Remove the DataContext assignment from the UserControl's XAML, and assign a GetPortHelper instance to the DataContext of the MainWindow, e.g. like

private readonly GetPortHelper portHelper = new GetPortHelper();

public MainWindow()
{
    InitializeComponent();
    DataContext = portHelper;
}

Now you would declare the UserControl in the MainWindow's XAML like

<local:Altitude DataContext="{Binding TelemetryDataPointVM}" />

---

A typical use case of control like this - which operates on a specific view model - would be a DataTemplate like

<DataTemplate DataType="{x:Type vm:TelemetryDataPointVM}">
    <local:Altitude />
</DataTemplate>

where the DataContext is inherited from a ContentControl or ContentPresenter that has a TelemetryDataPointVM instance as its Content, and that automatically applies the above DataTemplate according to its DataType, e.g.

<ContentControl Content="{Binding TelemetryDataPointVM}" />

---

You could however improve your control by making it independent of a specific view model. The control would expose a set of bindable properties, e.g. an AltitudeValue property and you would then use it like this:

<local:Altitude AltitudeValue="{Binding TelemetryDataPointVM.Altitude}" />

In order to accomplish this, the AltitudeValue property would have to be declared as dependency property, and a UI element in the UserControl's XAML would bind to it via a RelativeSource Binding like this:

<TextBlock Text="{Binding AltitudeValue,
    RelativeSource={RelativeSource AncestorType=UserControl}}" />