Skip to end of metadata
Go to start of metadata

In this tutorial, you're going to learn how to execute commands with parameters on buttons and bar items. With Crosslight's solid MVVM data binding, you'll learn how to update a button's state with a flick of a switch, which will update the invalidate the CanExecute state of all commands. At the end of this tutorial, you should have the following result:

Samples:

CrosslightCommands.zip

Follow these steps:

Prerequisite

Before starting the walkthrough, it is recommended that you have followed these walkthroughs in order:

It is also recommended that you have read through these conceptual topics in order to get a better understanding:

Let's get started. 

Preparing the Project

To start off, begin by creating a new Blank project using the Crosslight Project Wizard and give it a name of CrosslightCommands.

Preparing the iOS Version

To begin, we must have a clear idea on how the final result will look like. 

Open up the MainStoryboard.storyboard file inside CrosslightCommands.iOS/Views and edit them to look like the following. Or, you can simply use the following storyboard file and paste it on to your file. What we want to achieve now is in a flick of the switch, all the buttons (BtnBar, BtnExecute and BtnExecuteParameter) should be disabled. When you enter a text into the TxtParameter textbox, the BtnExecuteParameter should take the value and display the value in a message presenter.

Next, open up the MainViewController.cs inside CrosslightCommands.iOS/ViewControllers folder and override the InitializeView method inside the ViewController. Use the following code.

What the above code does is that it will add a new UIBarButtonItem with the ID set to BtnBar.

Preparing the ViewModel

Open up SimpleViewModel.cs inside CrosslightCommands.Core/ViewModels folder and use the following code.

In the above code, the CanExecute methods of all commands depends on the value of the CanExecute property, which will be bound to the switch later via the SimpleBindingProvider, and in the setter of the CanExecute property, we're calling RaiseCanExecuteChanged() to invalidate the state of all buttons. When you click on any of the commands, we simply display a message presenter. 

Preparing the BindingProvider

Open up SimpleBindingProvider.cs inside CrosslightCommands.Core/BindingProviders folder and use the following code:

In the above code, we've done several things:

  • Bound the bar item button's command with id/outlet BtnBar to the DoneCommand property in the ViewModel.
  • Bound the switch's value with id/outlet SwitchCanExecute to the CanExecute property in the ViewModel with two-way binding mode, since the control can set the value back to the ViewModel.
  • Bound the text box's text property with id/outlet TxtParameter to the ParameterText property in the ViewModel with two-way binding mode, triggered on property changed.
  • Bound the button's command with the id/outlet BtnExecute to the ExecuteCommand property in the ViewModel.
  • Bound the button's command with the id/outlet BtnExecuteParameter to the ExecuteCommandParameter property in the ViewModel.

 

Running the iOS Project

Now you're ready to run the iOS project. You should get the following result.

Working on the Android Project

Now that you've got your iOS version working properly, let's begin modifying the Android project to get the same result.

Open main.axml inside CrosslightCommands.Android/Resources/layout folder and use the following code.

What the above layout does is basically produce the same result as the above shot. Next, open up SimpleFragment and modify the Initialize method.

Run the project.

Conclusion

You've just learned how to bind commands to buttons and how to invalidate the button states with Crosslight, all with shared logic in the ViewModel.

Sample

You can also find the resulting sample here: CrosslightCommands.zip. Simply open this sample with Xamarin Studio or Visual Studio and run the project.