Xamarin:适用于 Android 和 Windows UWP 的 Xamarin 表单中分组列表的垂直字母索引(跳转列表) [英] Xamarin: Vertical alphabet Indexing (Jump List) for grouped list in Xamarin forms for Android and windows UWP

问题描述

我为 ios、android 和 windows 平台设计了一个 Xamarin 形式的分组列表视图.当我在列表视图中设置 GroupShortNameBinding 属性时，垂直索引(跳转列表)会自动出现在 IOS 中.但是跳转列表没有出现在android中.如何在 android 和 windows 中也使用自定义渲染获得垂直索引的支持.如果有人可以提供跨平台支持此功能的自定义渲染源.

解决方案

如果您不想要 CustomRenders，最简单的方法是使用 XAML hack.

您可以将 ListView 包装在一个高度和宽度等于父级(内容页面)的 RelativeLayout 中.

对于列表视图，使用高度作为父级，宽度为父级的 90%.添加宽度为 10% 的堆栈布局，并从高度为父级的相对布局的 90% 开始.使其方向垂直.将所有字母作为标签添加到堆栈布局中并实现其

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 GroupShortNameBindingproperty in my list view. But the jump list doesn't appear in android. How can I get the support of vertical indexing in android and windows also using custom rendering. If anyone can provide the source of custom rendering supporting this feature cross-platform.

解决方案

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<Item> _allItems;
    private List<string> _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<Item>(new List<Item> { new Item { MyText = "1" }, new Item { MyText = "2" }, new Item { MyText = "3" } });

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

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

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

View :

<RelativeLayout VerticalOptions="FillAndExpand">

    <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}"
              SeparatorColor="Transparent" SeparatorVisibility="None" BackgroundColor="Transparent"
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
      <RelativeLayout.WidthConstraint>
        <OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.9}"
                    iOS="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1}"
          WinPhone="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=1}" />
      </RelativeLayout.WidthConstraint>

      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>

            <StackLayout HorizontalOptions="FillAndExpand" BackgroundColor="Silver">

              <Label Text="{Binding MyText}" />
              <Button Text="button" />
              <BoxView HeightRequest="1" Color="Gray" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />

            </StackLayout>

          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

    <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AlphabetList}"
              SeparatorColor="Transparent" SeparatorVisibility="None" BackgroundColor="Transparent"
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.05}"
      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.9}">
      <RelativeLayout.WidthConstraint>
        <OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.1}"
                    iOS="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0, Constant=0}"
          WinPhone="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0, Constant=0}" />
      </RelativeLayout.WidthConstraint>
      <ListView.IsVisible>
        <OnPlatform x:TypeArguments="x:Boolean" WinPhone="False" iOS="False" Android="True" />
      </ListView.IsVisible>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Label Text="{Binding .}" TextColor="Red" FontSize="Micro" />
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

  </RelativeLayout>

Screenshot from Android :

这篇关于Xamarin:适用于 Android 和 Windows UWP 的 Xamarin 表单中分组列表的垂直字母索引(跳转列表)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！