Finally, we will need to add a ViewModel for NewEntryPage, as follows:
- Create a new class file in the ViewModels folder and name it NewEntryViewModel.
- Update the NewEntryViewModel class to inherit from BaseViewModel:
public class NewEntryViewModel : BaseViewModel
{
// ...
}
- Add public properties to the NewEntryViewModel class that will be used to bind it to the values entered into the EntryCell elements in NewEntryPage.xaml:
public class NewEntryViewModel : BaseViewModel
{
string _title;
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged();
}
}
double _latitude;
public double Latitude
{
get { return _latitude; }
set
{
_latitude = value;
OnPropertyChanged();
}
}
double _longitude;
public double Longitude
{
get { return _longitude; }
set
{
_longitude = value;
OnPropertyChanged();
}
}
DateTime _date;
public DateTime Date
{
get { return _date; }
set
{
_date = value;
OnPropertyChanged();
}
}
int _rating;
public int Rating
{
get { return _rating; }
set
{
_rating = value;
OnPropertyChanged();
}
}
string _notes;
public string Notes
{
get { return _notes; }
set
{
_notes = value;
OnPropertyChanged();
}
}
// ...
}
- Update the NewEntryViewModel constructor to initialize the Date and Rating properties:
public NewEntryViewModel()
{
Date = DateTime.Today;
Rating = 1;
}
- Add a public Command property to NewEntryViewModel and name it SaveCommand. This property will be used to bind to the Save ToolbarItem in NewEntryPage.xaml. The Xamarin. Forms Command type implements System.Windows.Input.ICommand to provide an Action to run when the command is executed, and a Func to determine whether the command can be executed:
public class NewEntryViewModel : BaseViewModel
{
// ...
Command _saveCommand;
public Command SaveCommand
{
get
{
return _saveCommand ?? (_saveCommand =
new Command(ExecuteSaveCommand, CanSave));
}
}
void ExecuteSaveCommand()
{
var newItem = new TripLogEntry
{
Title = Title,
Latitude = Latitude,
Longitude = Longitude,
Date = Date,
Rating = Rating,
Notes = Notes
};
// TODO: Persist Entry in a later chapter.
}
bool CanSave ()
{
return !string.IsNullOrWhiteSpace (Title);
}
}
- In order to keep the CanExecute function of the SaveCommand up to date, we will need to call the SaveCommand.ChangeCanExecute() method in any property setters that impact the results of that CanExecute function. In our case, this is only the Title property:
public string Title
{
get { return _title; }
set
{
_title = value;
OnPropertyChanged();
SaveCommand.ChangeCanExecute();
}
}
The CanExecute function is not required, but by providing it, you can automatically manipulate the state of the control in the UI that is bound to the Command so that it is disabled until all of the required criteria are met, at which point it becomes enabled.
- Next, set NewEntryViewModel as the BindingContext for NewEntryPage:
public NewEntryPage()
{
InitializeComponent();
BindingContext = new NewEntryViewModel();
// ...
}
- Next, update the EntryCell elements in NewEntryPage.xaml to bind to the NewEntryViewModel properties:
<EntryCell Label="Title" Text="{Binding Title}" />
<EntryCell Label="Latitude" Text="{Binding Latitude}" ... />
<EntryCell Label="Longitude" Text="{Binding Longitude}" ... />
<EntryCell Label="Date"
Text="{Binding Date, StringFormat='{0:d}'}" />
<EntryCell Label="Rating" Text="{Binding Rating}" ... />
<EntryCell Label="Notes" Text="{Binding Notes}" />
- Finally, we will need to update the Save ToolbarItem element in NewEntryPage.xaml to bind to the NewEntryViewModel SaveCommand property:
<ToolbarItem Text="Save" Command="{Binding SaveCommand}" />
Now, when we run the app and navigate to the new entry page, we can see the data binding in action, as shown in the following screenshots. Notice how the Save button is disabled until the title field contains a value:
