Xamarin.Forms How to active a button once the form is filled - xamarin.forms

Question

<Frame HasShadow="False">
<StackLayout Orientation="Vertical" >
<Entry Placeholder="NAME" x:Name="name"></Entry>
<Entry Placeholder="SURNAME" x:Name="surname"></Entry>
<StackLayout Orientation="Horizontal" >
<Label Text="BIRTHDATE" VerticalOptions="Center" HorizontalOptions="Center" ></Label>
<DatePicker x:Name="birdthdate" HorizontalOptions="Center" VerticalOptions="Center"></DatePicker>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="PICK YEARS" HorizontalOptions="Center" VerticalOptions="Center"></Label>
<Picker Title="YEARS" x:Name="years" HorizontalOptions="Center" VerticalOptions="Center"></Picker>
</StackLayout>
<StackLayout Spacing="0">
<Label Text="Number of docs:"></Label>
<Entry Keyboard="Numeric" x:name="docs"></Entry>
</StackLayout>
<Button Text="SAVE" TextColor="White" Padding="0,-20" BackgroundColor="#07987f" IsEnabled="false" >
</Button>
</StackLayout>
</Frame>
My idea is only when user will enter Name Surname Birdthdate Years NumberOfDocs the button will become enable and can save the data. Any suggestion how to do that?

Answer 1

Here is the logic for a simple login with login name + password, where the login button only gets enabled when LoginName and LoginPassword contains text:
private string _loginName;
public string LoginName
{
get { return _loginName; }
set
{
SetProperty(ref _loginName, value);
RaisePropertyChanged("IsLoginButtonEnabled");
}
}
private string _loginPassword;
public string LoginPassword
{
get { return _loginPassword; }
set
{
SetProperty(ref _loginPassword, value);
RaisePropertyChanged("IsLoginButtonEnabled");
}
}
public bool IsLoginButtonEnabled
{
get
{
if (!string.IsNullOrEmpty(LoginName) &&
!string.IsNullOrEmpty(LoginPassword))
{
return true;
}
return false;
}
}
Just extend this to your needs and it should work.

Answer 2

There are multiple ways you can do that. The easiest way is like the answer from Dennis Schröer. But it doesn't look like you are using MVVM so i have another solution using converters.
Change your button to this:
<Button Padding="0,-20"
BackgroundColor="#07987f"
Text="SAVE"
TextColor="White">
<Button.IsEnabled>
<MultiBinding Converter="{StaticResource EnableButtonConverter}">
<Binding Path="Text"
Source="{x:Reference name}" />
<Binding Path="Text"
Source="{x:Reference surname}" />
<Binding Path="Date"
Source="{x:Reference birdthdate}" />
<Binding Path="SelectedItem"
Source="{x:Reference years}" />
</MultiBinding>
</Button.IsEnabled>
</Button>
The property IsEnabled is bound to all the properties you want it to be dependent on.
The converter does the logic:
public class EnableButtonConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
var name = (string)values[0];
var surname = (string)values[1];
//var date = (DateTime)values[2];
//var year = (string)values[3];
return !string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(surname); //&& !year.Equals("YEARS"); //Todo: add a check for the date
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Put the Converter in your pages ResourceDictionary and you are good to go.
PS: It's better for performance to use Grid-layout instead of multiple StackLayouts