Xamarin: Vertical alphabet Indexing (Jump List) for grouped list in Xamarin forms for Android and windows UWP

Question

I have designed a grouped list view in Xamarin forms for ios,android and windows platform. The vertical indexing (Jump List) appears automatically in IOS when I set the Grou

Answer 1

The simplest way is to have XAML hack, if you don't want CustomRenders.

You can wrap your ListView in a RelativeLayout with height and width equal to the parent (content page).

For the list view use height as parent and width 90% of parent. Add a stack layout of width 10% and starting at 90% of the relative layout with height as parent. Make its orientation vertical. Add all the alphabets to the stack layout as Labels and implement its TapGesture to ScrollTo the particular position.

Make the width 90% for Android only for iOS and windows keep it as 100%, stack layout width as 0% and IsVisible=false.

ViewModel :

public class JumpListViewModel : INotifyPropertyChanged
{
    private ObservableCollection _allItems;
    private List _alphabetList;

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    public JumpListViewModel()
    {
        AllItems = new ObservableCollection(new List { new Item { MyText = "1" }, new Item { MyText = "2" }, new Item { MyText = "3" } });

        AlphabetList = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".ToCharArray().Select(x => x.ToString()).ToList();
    }

    public ObservableCollection AllItems
    {
        get { return _allItems; }
        set
        {
            _allItems = value;
            OnPropertyChanged();
        }
    }

    public List AlphabetList
    {
        get { return _alphabetList; }
        set
        {
            _alphabetList = value;
            OnPropertyChanged();
        }
    }
}

View :

Screenshot from Android :