[Question] How to differentiate changes to an ObservableProperty that come from code vs User Input

[mkulisic]

Hello,
I have a boolean ObservableProperty in my application that can be updated either via the UI by the user or the system may update its value automatically. When the property is updated via the UI I need to update the rest of the application about this change. On the other hand, when the system makes the update I only need to update its value in the UI and I don't have to do any processing.

Is there a way to differentiate if the OnPropertyChanged event was triggered by code or by interaction with the UI?

Thanks,
Miguel

[echoix]

I don't think it's something that can be differentiated, as it looks like it's mixing concerns. I think you would be better off by binding the UI to a separate property, doing your extra work/validation, and have the "system-side" property notify the UI one. And keep both of them updated.

Now, since it is a bool...
Depending on how the bool's value is changed by your UI, wouldn't you want to be using a command to change that property's value (doing extra work), and keep the UI do only presentation work, (and maybe bind it one way).

I know I once had to do a "fake" read-only property with getter and a no-op setter in order to keep using a two-way binding on a toggle button's IsChecked property with a Command bound to the toggle button. If it was a one-way binding, the state wasn't getting updated correctly.

I am not a senior professional UI developer though, it's only thoughts from my experience with the mvvm toolkit.

[mkulisic]

Hello @echoix ,
Thanks for the suggestions. The main issue I'm encountering is that I'm using a ToggleSwitch which doesn't have an "OnClick" event or the ability to send a command. It supports the "Toggled" event but this fires every time you change it so there is no difference between a system toggle and a UI toggle.

Seems like this problem can be encountered with many controls and solutions may need to be dependent on the control. Feels like there should be a common solution since it doesn't appear like this is a very uncommon scneario.

[hawkerm]

Assuming you're in some XAML based system, this is where XAML Behaviors can come in handy. You can have the behavior react to the change in state of the control, and then call some other method elsewhere in response (or call a command), etc... There you can perform more specific view logic for the UI layer (or add the 'user' bit to a flag) that gets passed into your ViewModel.

[stephenquan]

You can extend your property to cover more states and you can provide an IValueConverter to map to/from a boolean. The trick is the IValueConverter ConvertBack function will only ever be called from your UI hence the true/false states will be mapped to TrueUser and FalseUser enums respectively. From your code behind, we can use TrueCode and FalseCode enums to create the other states. For further improvement, you can consider using the [Flags] attribute:

// BoolModel.cs
public partial class BoolModel : ObservableObject
{
  public enum MyEnum
  {
    FalseCode, // false set by code behind
    FalseUser, // false set by UI
    TrueCode, // true set by code behind
    TrueUser // true set by UI
  };

  [ObservableProperty]
  MyEnum myValue = MyEnum.FalseCode;
}

// BoolConverter.cs
public class BoolConverter : IValueConverter
{   public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
  {
    if (value is not null && value is BoolModel.MyEnum myEnum)
    {
      return myEnum switch
      {
        BoolModel.MyEnum.FalseCode  => false,
        BoolModel.MyEnum.FalseUser => false,
        BoolModel.MyEnum.TrueCode => true,
        BoolModel.MyEnum.TrueUser => true,
        _ => throw new NotImplementedException(),
      };
    }
    return false;
  }

  public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
  {
    if (value is not null && value is bool boolValue)
    {
      return boolValue ? BoolModel.MyEnum.TrueUser: BoolModel.MyEnum.FalseUser;
    }
    return BoolModel.MyEnum.FalseUser;
  }
}

<!-- UserBoolPage.xaml -->
<ContentPage
    x:Class="Maui.StackOverflow.UserBoolPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Maui.StackOverflow"
    Title="UserBoolPage">
    <VerticalStackLayout x:DataType="local:BoolModel">
        <CheckBox IsChecked="{Binding MyValue, Mode=TwoWay, Converter={local:BoolConverter}}" />
        <Label Text="{Binding MyValue, Converter={local:BoolConverter}}" />
        <Label Text="{Binding MyValue}" />
    </VerticalStackLayout>
</ContentPage>

[ljnober]

public class ToggleSwitchBehavior : Behavior<ToggleSwitch>
{
    public static readonly DependencyProperty IsOnProperty =
        DependencyProperty.Register(nameof(IsOn), typeof(bool), typeof(ToggleSwitchBehavior), new PropertyMetadata(false, OnIsOnChanged));

    private static void OnIsOnChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is ToggleSwitch toggle)
        {
            // do something with the new value
            // toggle.SomeProperty = e.NewValue ;
        }
    }

    public bool IsOn
    {
        get { return (bool)GetValue(IsOnProperty); }
        set { SetValue(IsOnProperty, value); }
    }

    protected override void OnAttached()
    {
        AssociatedObject.Toggled += AssociatedObject_Toggled;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.Toggled += AssociatedObject_Toggled;
    }

    private void AssociatedObject_Toggled(object sender, RoutedEventArgs e)
    {
        // do something with the interaction.
        //IsOn = SomeProperty or SomeFunc();
    }
}

xmlns:b="http://schemas.microsoft.com/xaml/behaviors"

   <ToggleSwitch>
            <b:Interaction.Behaviors>
                <ToggleSwitchBehavior  IsOn="{Binding MvvmProperty}" />
            </b:Interaction.Behaviors>
    </ToggleSwitch >