.net Maui app in infinite loop due to [ObservableProperty]

Question

I am not sure if I am in the right place to ask this question.

In my app I convert Celsius to Fahrenheit and vice versa. Because I am using [ObservableProperty] when I update the one property, the other wants to update as well, and the program goes into an infinite loop. Is there a way to fix this??

[ObservableProperty]
 private string _fahrenheit;

 [ObservableProperty]
 private string _celsius;

partial void OnFahrenheitChanged (string value)
 { 
         var result = (double.Parse(value) / 1.8) - 32;
         Celsius = result.ToString(); //
         Console.WriteLine("Celsius = " + result); 
 } 
 partial void OnCelsiusChanged(string value)
 {     
         var result = (double.Parse(value) * 1.8) + 32;
         Fahrenheit = result.ToString();
         Console.WriteLine("Fahrenheit = " + result);  
 }

}

<VerticalStackLayout Margin="10,30,20,10">
  <Grid Background="Azure">
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="20" />
          <ColumnDefinition Width="150" />
          <ColumnDefinition Width="200" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="1200" >                    
        </ColumnDefinition>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
          <RowDefinition Height="50" />
      </Grid.RowDefinitions>
      <Label Grid.Row="1"
             Grid.Column="1"
             Text="Celcius" 
             VerticalTextAlignment="Center"
             HorizontalTextAlignment="Start">
      </Label>

      <Entry Grid.Row="2"
             Grid.Column="1"
             Text ="{Binding Celsius}"                 
             VerticalTextAlignment="Center"
             HorizontalTextAlignment="Start">                
      </Entry>
      <Label Grid.Row="3"
             Grid.Column="1"
             Text="Fahrenheit" VerticalTextAlignment="Center"
             HorizontalTextAlignment="Start">    
      </Label>

      <Entry Grid.Row="4"
             Grid.Column="1"
             Text ="{Binding Fahrenheit}"  
             VerticalTextAlignment="Center"
             HorizontalTextAlignment="Start">
      </Entry>      
  </Grid>

Answer 1

Hi @Heinz Deubler ,

Thanks for reaching out.

I created a project locally to reproduce your setup. Below is the full working example you can use.

ViewModels/TemperatureViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System.Globalization;

namespace TempConverter.ViewModels
{
    public partial class TemperatureViewModel : ObservableObject
    {
        [ObservableProperty]
        private string _fahrenheit;
        [ObservableProperty]
        private string _celsius;
        private bool _isProgrammaticUpdate = false;
        partial void OnFahrenheitChanged(string value)
        {
            if (_isProgrammaticUpdate) return;
            _isProgrammaticUpdate = true;
            if (double.TryParse(value, NumberStyles.Float, CultureInfo.InvariantCulture, out var f))
            {
                var c = (f - 32.0) / 1.8;
                Celsius = c.ToString("0.##", CultureInfo.InvariantCulture);
            }
            else
            {
                Celsius = string.Empty;
            }
            _isProgrammaticUpdate = false;
        }
        partial void OnCelsiusChanged(string value)
        {
            if (_isProgrammaticUpdate) return;
            _isProgrammaticUpdate = true;
            if (double.TryParse(value, NumberStyles.Float, CultureInfo.InvariantCulture, out var c))
            {
                var f = (c * 1.8) + 32.0;
                Fahrenheit = f.ToString("0.##", CultureInfo.InvariantCulture);
            }
            else
            {
                Fahrenheit = string.Empty;
            }
            _isProgrammaticUpdate = false;
        }
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TempConverter.MainPage">
    <VerticalStackLayout Margin="10,30,20,10">
        <Grid Background="Azure" Padding="10">
            <!-- Column Definitions -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="1200" />
            </Grid.ColumnDefinitions>
            <!-- Row Definitions -->
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <!-- Celsius Label -->
            <Label Grid.Row="1"
                   Grid.Column="1"
                   Text="Celsius"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start" />
            <!-- Celsius Entry -->
            <Entry Grid.Row="2"
                   Grid.Column="1"
                   Text="{Binding Celsius, Mode=TwoWay}"
                   Keyboard="Numeric"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start"
                   Placeholder="Celsius" />
            <!-- Fahrenheit Label -->
            <Label Grid.Row="3"
                   Grid.Column="1"
                   Text="Fahrenheit"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start" />
            <!-- Fahrenheit Entry -->
            <Entry Grid.Row="4"
                   Grid.Column="1"
                   Text="{Binding Fahrenheit, Mode=TwoWay}"
                   Keyboard="Numeric"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Start"
                   Placeholder="Fahrenheit" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

MainPage.xaml.cs

using TempConverter.ViewModels;

namespace TempConverter
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new TemperatureViewModel();
        }
    }
}

Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well.