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形式的分组列表视图.当我在列表视图中设置GroupShortNameBindingproperty时，垂直索引(跳转列表)将自动在IOS中显示.但是跳转列表没有出现在android中.如何使用自定义渲染在android和Windows中获得垂直索引支持.如果任何人都可以提供支持此功能的自定义渲染源跨平台.

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.

推荐答案

最简单的方法是拥有XAML hack(如果您不需要CustomRenders的话).

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

您可以将ListView包裹在RelativeLayout中，并将其高度和宽度等于父项(内容页面).

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

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

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.

仅将Android的iOS宽度设置为90％，Windows将其设置为100％，堆栈布局宽度设置为0％，IsVisible=false.

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

ViewModel:

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的屏幕截图:

Screenshot from Android :

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