Xamarin: Vertikale Alphabet Indexierung (Sprungliste) für gruppierte Liste in Xamarin Formen für Android und Windows UWP

Question

Ich habe eine gruppierte Listenansicht in Xamarin Formen für iOS, Android und Windows-Plattform entwickelt. Die vertikale Indizierung (Sprungliste) wird automatisch in IOS angezeigt, wenn ich die GroupShortNameBinding-Eigenschaft in meiner Listenansicht festlege. Aber die Sprungliste erscheint nicht in Android. Wie bekomme ich die Unterstützung der vertikalen Indizierung in Android und Windows auch mit benutzerdefinierten Rendering. Wenn jemand die Quelle für benutzerdefiniertes Rendering bereitstellen kann, unterstützt diese Funktion plattformübergreifend.

Answer 1

Der einfachste Weg ist XAML-Hack zu haben, wenn Sie CustomRenders nicht wollen.

Sie können Ihr ListView in ein RelativeLayout mit der Höhe und Breite des übergeordneten Elements (Inhaltsseite) einbinden.

Für die Listenansicht verwenden Sie die Höhe als übergeordnetes Element und die Breite 90% des übergeordneten Elements. Fügen Sie ein Stapellayout der Breite 10% hinzu und beginnen Sie bei 90% des relativen Layouts mit der Höhe als Parent. Orientiere dich vertikal. Fügen Sie dem Stapellayout alle Alphabete als Etiketten hinzu und implementieren Sie die entsprechende Position TapGesture bis ScrollTo.

Machen Sie die Breite 90% für Android nur für iOS und Windows behalten Sie es als 100%, Stapellayout Breite als 0% und IsVisible=false.

Ansichtsmodell:

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(); 
     } 
    } 
} 

Ausblick:

<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 von Android: