How to Display New Item on MvxListView on Button Click in Android Xamarin Visual Studio

Question

I want to display a new line of TextView everytime I click a button. I am using MvvmCross and I know that I should use MvxListView which is assigned to a layout template, but I do not know how to display it on screen on button click.

Can someone give me a simple code example of doing this from ViewModel and very short explanation about which line of code that initiate the display of new TextView?

UPDATE

I provide my code below:

ViewModel.cs

public class FirstViewModel 
    : MvxViewModel
{
    private ObservableCollection<Unit> unitCodes;
    public ObservableCollection<Unit> UnitCodes
    {
        get { return unitCodes; }
        set { unitCodes = value; RaisePropertyChanged(() => UnitCodes); }
    }

    public IMvxCommand ButtonCommand { get; private set; }
    public FirstViewModel()
    {
        unitCodes = new ObservableCollection<Unit>();
        ButtonCommand = new MvxCommand(() =>
        {
            UnitCodes = UnitCodes ?? new ObservableCollection<Unit>();
            UnitCodes.Add(new Unit("123", "Test Name"));
        });
    }

    public class Unit : MvxViewModel
    {
        private string unitCode;
        public string UnitCode
        {
            get { return unitCode; }
            set { unitCode = value; RaisePropertyChanged(() => UnitCode); }
        }
        private string unitName;
        public string UnitName
        {
            get { return unitName; }
            set { unitName = value; RaisePropertyChanged(() => UnitName); }
        }

        public Unit() { }
        public Unit(string unitCode, string unitName)
        {
            UnitCode = unitCode;
            UnitName = unitName;
        }
    }
}

View.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        local:MvxBind="Click ButtonCommand"
        android:text="Click To Add" />
    <Mvx.MvxListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        local:MvxItemTemplate="@layout/unitcodeitemlayout"
        local:MvxBind="ItemSource UnitCodes" />
</LinearLayout>

unitcodeitemlayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        local:MvxBind="Text UnitName" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        local:MvxBind="Text UnitCode" />
</LinearLayout>

My code does not have any compilation or run-time error, however there is nothing happening on button click. What I want is to add "123" and "Test Name" to the display every time I click the button.

Answer 1

Your code is right. However, you misspelled the ItemsSource under MvxListView axml.

It should be:

<Mvx.MvxListView
     ...
     local:MvxBind = "ItemsSource UnitCodes"/>