How can I make a > in a cell with Xamarin.Forms?

Question

I have an application where I can change the order and the way cards appear. For anyone who has iOS I need something very similar to the way the Settings > Contacts > Sort

Answer 1

The sort order settings page you described is implemented using the UIKit's UITableView. In Xamarin.Forms, you can utilize the TableView control to get the same result.

As you will quickly notice, there's no way to set the checkmark icon with Xamarin.Forms so you'll probably need to create a custom cell, that has the text on the left and the checkmark image on the right.

If you really want to do everything by the book, you should probably create a custom renderer that allows you to set the Accessory property of the current ViewCell. However, this will get a bit complex for such a small feature.

Answer 2

EDIT 1: Simplified property changed logic in iOS renderer; now there are no references or handlers to cleanup.

In extension to @hankide's answer:

You can create a bindable property IsChecked while extending a TextCell or ViewCell and bind your VM state to it.

public class MyTextCell : TextCell
{
    public static readonly BindableProperty IsCheckedProperty =
        BindableProperty.Create(
            "IsChecked", typeof(bool), typeof(MyTextCell),
            defaultValue: false);

    public bool IsChecked
    {
        get { return (bool)GetValue(IsCheckedProperty); }
        set { SetValue(IsCheckedProperty, value); }
    }
}

Next step would be to create renderer that listens to this property and shows a check-mark at iOS level.

[assembly: ExportRenderer(typeof(MyTextCell), typeof(SampleApp.iOS.MyTextCellRenderer))]
namespace SampleApp.iOS
{
    public class MyTextCellRenderer : TextCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var nativeCell = base.GetCell(item, reusableCell, tv);

            var formsCell = item as MyTextCell;
            SetCheckmark(nativeCell, formsCell);

            return nativeCell;
        }

        protected override void HandlePropertyChanged(object sender, PropertyChangedEventArgs args)
        {
            base.HandlePropertyChanged(sender, args);

            System.Diagnostics.Debug.WriteLine($"HandlePropertyChanged {args.PropertyName}");
            if (args.PropertyName == MyTextCell.IsCheckedProperty.PropertyName)
            {
                var nativeCell = sender as CellTableViewCell;
                if (nativeCell?.Element is MyTextCell formsCell)
                    SetCheckmark(nativeCell, formsCell);
            }
        }

        void SetCheckmark(UITableViewCell nativeCell, MyTextCell formsCell)
        {
            if (formsCell.IsChecked)
                nativeCell.Accessory = UITableViewCellAccessory.Checkmark;
            else
                nativeCell.Accessory = UITableViewCellAccessory.None;
        }
    }
}

Sample usage 1

And, sample usage would like:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Text="First Last" IsChecked="false" />
        <local:MyTextCell Text="Last, First" IsChecked="true" />
    </TableSection>
</TableView>

Sample usage 2

You can also listen to Tapped event to ensure IsChecked property works as expected.

For example, you bind this property to ViewModel:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [0].Name}" IsChecked="{Binding [0].IsSelected}" />
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [1].Name}" IsChecked="{Binding [1].IsSelected}" />
    </TableSection>
</TableView>

and handle tap event:

public SettingViewModel[] Settings = new []{
    new SettingViewModel { Name = "First Last", IsSelected = false },
    new SettingViewModel { Name = "Last First", IsSelected = true },
};

void Handle_Tapped(object sender, System.EventArgs e)
{
    var cell = sender as TextCell;
    if (cell == null)
        return;

    var selected = cell.Text;
    foreach(var setting in Settings)
    {
        if (setting.Name == selected)
            setting.IsSelected = true;
        else
            setting.IsSelected = false;
    }
}