Search code examples
c#androidxamarinmvvmcross

MVVM Cross View to display list in 2 columns


In MVVM Cross what widget/view can be used to display a list of objects in 2 columns? Does a MvxListView suffice?

Ie, instead of just vertically listing each object, display them in 2 vertical columns like the last picture below:

enter image description here enter image description here

I am aware how to bind and display a vertical list of objects, thats easy, but how could I display one list of objects into 2 columns? Maybe I need to create a custom binding?

PS: Is there a reference of MVVM Cross widgets? I've searched and haven't found any documentation. I am looking for a comprehensive list; MvxFrameView, MvxImageView, MvxListView, etc.

ViewModel:

public class FirstViewModel : MvxViewModel
{
    private List<Category> _cats;
    public List<Category> Cats
    {
        get { return _cats; }
        set
        {
            _cats= value;
            RaisePropertyChanged(() => Cats);
        }
    }
}

Android View (simple vertical layout):

<Mvx.MvxListView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    local:MvxBind="ItemsSource Cats"
    local:MvxItemTemplate="@layout/item_category" />

Solution

  • Just use a MvxGridView instead:

    <Mvx.MvxGridView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:numColumns="2"
        android:verticalSpacing="4dp"
        android:horizontalSpacing="4dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        local:MvxBind="ItemsSource Cats"
        local:MvxItemTemplate="@layout/item_category" />