Required to Select atleast one Item from Picker in Xamarin

Question

In my Application, there is a Picker and Button. I want two things.

Required to Select atleast one Item from Picker, else won't be able to click a Button. e.g. just like required Attribute in HTML
If the value is Provider 1, then Navigate to this Page, else if Provider 2, then navigate to this Page.

Code for Picker & Button in Views


        
            
                Provider 1
                Provider 2

Code for Button Binding in ViewModel.cs

public async Task NextPage(RegisterViewModel nextpage) => await NavigationService.NavigateToAsync(nextpage, null, NavigationType.Modal);

#region Bindable Command
public ICommand NextPageCommand => new Command(async (nextpage) =>
    {
        await NextPage(nextpage);
    });
#endregion

user_2673029 · Answer

You can use a multi data trigger in your button to enable or disable it depending on the status of your picker selection properties.

Because you are binding to strings, you will need add a converter to test whether they are null or empty, for example:

namespace Osma.Mobile.App.Converters
{
    public class StringNullOrEmptyValueBoolConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is string str && !string.IsNullOrEmpty(str))
            {
                // String is not null or empty
                return false;
            }
            
            // String is null or empty
            return true;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Add the required properties to your ViewModel:

public class ProviderViewModel : ABaseViewModel
{
    public ProviderViewModel(
        IUserDialogs userDialogs,
        INavigationService navigationService
        ) : base(
            nameof(ProviderViewModel),
            userDialogs,
            navigationService)
    {
    }

    public override async Task InitializeAsync(object navigationData)
    {
        await base.InitializeAsync(navigationData);
    }

   private string _selectedProvider;
   public string SelectedProvider {
       get { return _selectedProvider; }
       set 
       { 
            this.RaiseAndSetIfChanged(ref _selectedProvider, value) }
       }
  }

   private string _selectedCountry;
   public string SelectedCountry {
       get { return _selectedCountry; }
       set 
       { 
           this.RaiseAndSetIfChanged(ref _selectedCountry, value) }
       }
  }

    public async Task RegistrationPage(RegisterViewModel registration) => await NavigationService.NavigateToAsync(registration, null, NavigationType.Modal);

    public ICommand RegistrationPageCommand => new Command(async (registration) =>
    {
        await RegistrationPage(registration);
    }, (x) => false);
}

Add the converter namespace and resource to your page and implement the multitrigger and bindings:

As you can see in the code the multrigger conditions are that both properties are not null or empty and when this is the case the button will be enabled.

user_759558 · Answer

In your ViewModel have a property called IsNextButtonEnabled that watches if an item has been selected. Also change your XAML, so that the button is enabled when IsNextButtonEnabled is true:

ViewModel:

public bool IsNextButtonEnabled => SelectedItem!=null;
public string SelectedItem 
{
    get=>_selectedItem;
    set { _selectedItem = value; OnPropertyChanged("SelectedItem");}
}
private string _selectedItem;

Bear in mind the OnPropertyChanged function may be different depending on what (if any) libraries you use for your view models.

Xaml:


            Provider 1
            Provider 2

public ICommand NextPageCommand => new Command(async (nextpage) =>
{
    if(_selectedItem == "Provider 1")  await ThisPage();
    else                               await OtherPage();
});

user_8187800 · Answer

Required to Select atleast one Item from Picker, else won't be able to click a Button. e.g. just like required Attribute in HTML

You could use DataTrigger to determine when to set Button.Enable.


    
        
    




    
        
            
                Provider 1
                Provider 2
            
        
    

    



public class MultiTriggerConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        if ((int)value >= 0) // length > 0 ?
            return true;            // some data has been entered
        else
            return false;            // input is empty
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

If the value is Provider 1, then Navigate to this Page, else if Provider 2, then navigate to this Page

Create binding on Picker.SelectedItem , and navigate to corresponding page according to the value .

public ICommand NextPageCommand => new Command(async (nextpage) =>
{

     // here you could get the value of `Picker.SelectedItem`. 
     
});

user_2673029 · Answer

Add a flag in your view model such as:

private bool _canNavigate;
public bool CanNavigate
{
    get { return _canNavigate; }
    set { this.RaiseAndSetIfChanged(ref _canNavigate, value) }
}

Bind this property to the property "IsEnabled" of your button:

Then add a binding for the selected item as well and enabled the button when :

private string _selectedItem;
public string SelectedItem {
  get { return _selectedItem; }
  set 
  { 
      if (!string.IsNullOrWhiteSpace(value)) 
      {
          this.RaiseAndSetIfChanged(ref _selectedItem, value) }
      }
  }
}

And add the binding in your view:


    
        
            Provider 1
            Provider 2

There are other (perhaps) more elegant ways of doing this, for example using a MultiTrigger (see here) or a behavior to intercept the SelectedIndexChanged event.

Required to Select atleast one Item from Picker in Xamarin

4 Answers