Xamarin：AndroidとWindows用のXamarinフォームのグループ化されたリストのための垂直アルファベットインデックス（ジャンプリスト）UWP

Question

ios、androidとwindowsプラットフォーム用のXamarinフォームでグループ化リストビューを設計しました。リストビューでGroupShortNameBindingプロパティを設定すると、垂直インデックス（ジャンプリスト）がIOSに自動的に表示されます。しかし、ジャンプリストはアンドロイドには表示されません。カスタムレンダリングを使用して、アンドロイドとウィンドウで垂直インデックスのサポートを得るにはどうすればよいですか。誰でもこの機能をクロスプラットフォームでサポートするカスタムレンダリングのソースを提供できる場合。

Answer 1

最も簡単な方法は、あなたがCustomRendersをしたくない場合は、XAMLのハックを持つことです。

高さと幅が親（コンテンツページ）と等しいRelativeLayoutにListViewをラップできます。

リストビューでは、高さを親として使用し、幅は親の90％を使用します。 高さが親である相対レイアウトの幅10％から90％で始まるスタックレイアウトを追加します。その向きを垂直にします。すべてのアルファベットをラベルとしてスタックレイアウトに追加し、TapGesture〜ScrollToの特定の位置を実装します。

iOSの場合のみAndroidの幅を90％にし、ウィンドウを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> 

スクリーンショット：