CODEWITHSUNDEEP
xamarinxamarin.forms
Scott
Scott

Reputation: 153

Xamarin Forms - Slide out menu to select items

I have a xamarin forms application search screen that allows a user to select an item from a list. Currently I am using a picklist and the user has to scroll and select and click done. This is using the native controls. Howerver I have noticed in iOS in settings menu etc where the have designed it so that when a user want to select from a list a arrow is shown on the right hand side which takes them to another page to select an item (s) from a list. To me this seems like a better UX. Here is an ex:

enter image description here

My question is there something built into this withing xamarin forms? I guess I could create a listview and then on click pass to another page. Any examples are appreciated.

Upvotes: 1

Views: 630

Answers (1)

Paul Kertscher
Paul Kertscher

Reputation: 9723

There is no built-in for that, but it's not too hard to achieve this.

To set the disclosure indicator (the arrow), implement a custom renderer derived from ImageCellRenderer and override GetCell

public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
{
    var viewCell = base.GetCell(item, reusableCell, tv);

    viewCell.Accessory = UITableViewCellAccessory.DisclosureIndicator;

    return viewCell;
}

When the user taps that cell you should navigate modally to the view showing the list of languages.

Adding that Cancel-Button is not really hard either, but needs another step. You'll need to wrap the new language selection page in a NavigationPage and push that NavigationPage modally. Furthermore you'll have to add a toolbar item to the wrapped page (see here).

Within the page there is a SearchBar view and a ListView below it. To add the checkmarks, you'll have to implement a custom cell with a custom renderer (derived from ImageCellRenderer like the one shown above), setting the UITableViewCell.Accessory to Checkmark if the custom cell is selected

if(item is SelectableCell selectableCell)
{
    var selected = selectableCell.IsSelected;
    viewCell.Accessory = selected ? UITableViewCellAccessory.Checkmark : UITableViewCellAccessory.Checkmark;
}

Please note: Selectable cell is no Xamarin.Forms stock cell, but one that you have to implement by yourself, including the bindable property IsSelected.

This should be basically the steps you need to achieve what you want. I've assumed basic Xamarin.Forms knowledge that is needed to fill the gaps.

Upvotes: 1

Related Questions