CODEWITHSUNDEEP
androidlistviewxamarinmvvmcross
Avrohom
Avrohom

Reputation: 712

MvvmCross Droid MvxListView with Search EditText?

In MvvmCross is it possible to have a Android MvxListView with a Search EditText on top? And how?

Upvotes: 3

Views: 1740

Answers (2)

chamamo
chamamo

Reputation: 280

+1 for sjk. You can use SearchView and set SearchString property by code, I'am using it like this:

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:visibility="visible"
        android:background="@android:color/darker_gray" />
</LinearLayout>
<Mvx.MvxListView
    android:id="@+id/ItemsList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:MvxBind="ItemsSource FilteredList"/>

Code:

public class MyListFragment : MvxFragment, SearchView.IOnQueryTextListener
{

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        .........
        var searchView = FindViewById<SearchView>(Resources.Id.search_view);
        searchView.SetOnQueryTextListener(this);
        searchView.SetIconifiedByDefault(false);
        searchView.Focusable = false;
        return view;
    }

    public bool OnQueryTextSubmit(String query)
    {
        return false;
    }

    public bool OnQueryTextChange(String newText)
    {
        (MyViewModelType)ViewModel.SearchString = newText;
        return true;
    }
}

I'am using fragment, but you can use it in your activity.

Upvotes: 4

sunghee
sunghee

Reputation: 424

In your View.axml:

<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">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:MvxBind="Text SearchString" />
    <Mvx.MvxListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        local:MvxBind="ItemsSource FilteredList" />
</LinearLayout>

Pretty straight forward, the EditText is your search query box, and the list itself below it will be your filtered list.

In your ViewModel.cs:

public class FirstViewModel 
        : MvxViewModel
    {
        public FirstViewModel()
        {
            _filteredList = _completeList;
        }


        private string _searchString;
        public string SearchString
        {
            get { return _searchString; }
            set
            {
                _searchString = value;
                if (string.IsNullOrEmpty(value))
                {
                    _filteredList = _completeList;
                }
                else
                {
                    _filteredList = _completeList.Where(o => o == value).ToList();
                }
                RaisePropertyChanged(() => SearchString);
                RaisePropertyChanged(() => FilteredList);
            }
        }


        private List<string> _completeList = new List<string>() { "a", "b", "c", "d", "e" };
        private List<string> _filteredList;
        public List<string> FilteredList
        {
            get { return _filteredList; }
        }
    }

The ViewModel here is receiving a SearchString from the EditText, and then using Linq to filter the complete list. It then takes the filtered list and RaisesPropertyChanged for the filtered List.

Upvotes: 6

Related Questions