Xamarin：用于 Android 和 Windows UWP 的 Xamarin 表单中的分组列表的垂直字母索引（跳转列表）

Posted 2023-04-13

【中文标题】Xamarin：用于 Android 和 Windows UWP 的 Xamarin 表单中的分组列表的垂直字母索引（跳转列表）

【英文标题】：Xamarin: Vertical alphabet Indexing (Jump List) for grouped list in Xamarin forms for Android and windows UWP

【发布时间】：2016-12-08 20:15:06

【问题描述】：

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

【参考方案1】：

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

您可以将 ListView 包装在一个具有与父级（内容页面）相等的高度和宽度的 RelativeLayout 中。

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

将宽度设为 90%，仅适用于 iOS，windows 保持 100%，堆栈布局宽度设为 0%，IsVisible=false。

视图模型：

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 截图：

【讨论】：

你现在有样品吗？

@RohitVipinMathews 你现在可以分享样品吗？

模拟布局并不难，但与 iOS 的最大区别是缺少触摸和滑动，因为在 Android 中，您基本上必须单击小字母，而不仅仅是上下移动拇指.有没有编写自定义渲染器的解决方案？