Xamarin：为Android和Windows UWP中的分组列表实现垂直字母索引（跳转列表）

Question

Xamarin：为Android和Windows UWP中的分组列表实现垂直字母索引（跳转列表）

11

我在 Xamarin Forms 中为 iOS、Android 和 Windows 平台设计了一个分组列表视图。当我在我的列表视图中设置 GroupShortNameBinding 属性时，IOS 中会自动显示垂直索引（Jump List），但在 Android 上却没有显示出来。如何使用自定义渲染来获得 Android 和 Windows 中的垂直索引支持，并跨平台提供支持此功能的自定义渲染源代码？下方是截图：

- Himanshu Dwivedi

你是否曾经想出过这个问题的解决方案？ - FreakyAli

1

@FreakyAli 很久以前的事了，自那以后我就再也没有尝试过。 - Himanshu Dwivedi

我猜那就是个拒绝的答案了吧？ - FreakyAli

@FreakyAli 抱歉，我没有任何解决方案或资源可以分享 :( - Himanshu Dwivedi

没问题，当我想到一个解决方案时，我也会在这里分享。 - FreakyAli

我现在有一个解决方案，你可以在以下链接中查看：https://stackoverflow.com/questions/77289954/net-maui-jumplist-like-indexing-for-android-and-ios 和 https://github.com/FreakyAli/Maui.FreakyControls。@HimanshuDwivedi - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohit Vipin Mathews · Accepted Answer

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

您可以将ListView包装在RelativeLayout中，其高度和宽度均等于父级（内容页）。

对于列表视图，请将高度设置为父级，宽度为父级的90％。在相对布局中添加一个宽度为10％且从90％开始的堆叠布局，并将其方向设置为垂直。将所有字母添加到堆叠布局中作为标签，并实现其 TapGesture以 ScrollTo到特定位置。

仅对Android使宽度为90％，对于iOS和Windows保持为100％，堆叠布局宽度为0％且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();
        }
    }
}

查看：

<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>

来自 Android 的截图：