Want to activate a button only when two inputs of the form are not empty using MAUI

I would like to do the following using C# MAUI.
I want to enable the Save button only if the contents of the email Entry and the phone Entry are both non-null.
The documentation has the following code

<Entry x:Name="email"
       Text="" />
<Entry x:Name="phone"
       Text="" />
<Button Text="Save">
    <Button.Triggers>
        <MultiTrigger TargetType="Button">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding Source={x:Reference email},
                                            Path=Text.Length}"
                                  Value="0" />
                <BindingCondition Binding="{Binding Source={x:Reference phone},
                                            Path=Text.Length}"
                                  Value="0" />
            </MultiTrigger.Conditions>
            <Setter Property="IsEnabled" Value="False" />
            <!-- multiple Setter elements are allowed -->
        </MultiTrigger>
    </Button.Triggers>
</Button>

However, with the above code, the save button will be enabled as long as neither the email nor the phone is null.
How can I change this?

You can add a TextChanged event to the Entry to determine whether the Text is empty. I wrote a simple demo to test it. You can refer to the code:

Xaml:

<Entry x:Name="email" TextChanged="OnTextChanged"/>
<Entry x:Name="phone" TextChanged="OnTextChanged"/>
<Button x:Name="Save" Text="Click Me" Clicked="OnSaveClicked" IsEnabled="False"/>

.cs file:

private void OnTextChanged(object sender, TextChangedEventArgs e) 
{
    if (!string.IsNullOrWhiteSpace(email.Text) && !string.IsNullOrWhiteSpace(phone.Text)) 
    {
        Save.IsEnabled = true;
    }
    else
    {
        Save.IsEnabled = false;
    }
}

Hope it can help you.

There are a couple of ways to achieve this apart from setting the IsEnabled property of the <Button> from the code-behind.

Option 1: Using the MVVM pattern

In your ViewModel, define some properties for E-Mail and Phone, a Command as well as an evaluation function that serves as a predicate for the CanExecute parameter for the Command like follows:

public partial class MyViewModel : ObservableObject
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string email;

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string phone;

    [RelayCommand(CanExecute = nameof(CanSave))]
    private void Save()
    {
        // your logic here
    }

    private bool CanSave() => !string.IsNullOrWhiteSpace(Email) && !string.IsNullOrWhiteSpace(Phone);
}

Then, in the code-behind of your View (the *.xaml.cs file), you need to set the BindingContext to the ViewModel:

public partial class MyPage: ContentPage
{
	public MyPage()
	{
		InitializeComponent();
        BindingContext = new MyViewModel();
    }
}

Finally, in your View, you can bind the Text property of each Entry to the appropriate property in the ViewModel and bind the Button to the Command:

<Entry Text="{Binding Email, Mode=TwoWay}" />
<Entry Text="{Binding Phone, Mode=TwoWay}" />
<Button Text="Save"
        Command="{Binding SaveCommand}">

This way, the Button will only be enabled when both entries contain some text.

You can find more information on the Model-View-ViewModel (MVVM) pattern in the documentation. This example also uses the Source Generators of the MVVM Community Toolkit, which I've also written a blog series about which also covers the topic of enabling and disabling buttons based on property values.

Option 2: Using MultiBinding

Instead of a MultiTrigger, you could use a MultiBinding instead, which allows you evaluate your bindings to either true or false based on both entries.

For this, you first need a converter that implements the IMultiValueConverter interface and checks if all the inputs are of type string and not null, whitespace or empty:

public class AllNotNullOrEmptyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values == null || !targetType.IsAssignableFrom(typeof(bool)))
        {
            return false;
        }

        foreach (var value in values)
        {
            if (value is not string b)
            {
                return false;
            }

            if (string.IsNullOrWhiteSpace(b))
            {
                return false;
            }
        }
        return true;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return default;
    }
}

You can then consume the converter and use a MultiBinding in your XAML:

<ContentPage.Resources>
  <converters:AllNotNullOrEmptyConverter x:Key="AllNotNullOrEmptyConverter" />
</ContentPage.Resources>

<VerticalStackLayout>
  <Entry x:Name="Email"/>
  <Entry x:Name="Phone"/>
  <Button>
    <Button.IsEnabled>
      <MultiBinding Converter="{StaticResource AllNotNullOrEmptyConverter}">
        <Binding Path="Text" Source="{x:Reference Email}" />
        <Binding Path="Text" Source="{x:Reference Phone}" />
      </MultiBinding>
    </Button.IsEnabled>
  </Button>
</VerticalStackLayout>

The beauty of this approach is that you can add more entries and only need to add one extra line to the MultiBinding for each to include them in the evaluation for the IsEnabled property of the button.