Activities (pages)
The user controls in Android are called fragments. This means that if a user control must be created, it must derive from the Fragment
class. Catel provides a base implementation of this class to ensure full compatibility with the MVVM framework that ships with Catel.
Creating the view model
The view model can be created (or added as a linked file from another project) just like any platform using Catel (they are all equal on all platforms).
Creating the view
Make sure that a Views
folder exists in the project so the views and view models can automatically be hooked together by Catel. Then create a new class to the views folder, in this case MainActivity
:
[Activity(MainLauncher = true)]
public class MainActivity : Catel.Android.App.Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Page_Main);
}
}
Note that the class derives from Catel.Android.App.Activity
Designing the view
To create the actual user interface of the fragment, add a new xaml
file to the Resources/layout
folder, in your case Page\_Main
(but you can name it whatever you want). Then use the following source:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/MyButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/Hello" />
</LinearLayout>
Setting up synchronization
In Android it is required to manually synchronize the values between the view and view model. Below is the fully extended MainActivity
class containing these mapping functionality:
[Activity(MainLauncher = true)]
public class MainActivity : Catel.Android.App.Activity
{
private Button _testButton;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Page_Main);
// Note: at this stage the visual tree is guaranteed in Android
_testButton = FindViewById<Button>(Resource.Id.MyButton);
_testButton.Click += delegate { GetViewModel<MainViewModel>().RunCommand.Execute(); };
}
protected override void SyncViewModel()
{
var vm = GetViewModel<MainViewModel>();
if (vm == null)
{
return;
}
Title = vm.Title;
_testButton.Text = string.Format("{0} clicks!", vm.Counter);
}
}
Contributions
We would like to thank the following contributors:
Want to contribute to the documentation? We have a guide for that!
Questions
Have a question about Catel? Use StackOverflow with the Catel tag!