自定義列表視圖組短名稱樣式

Question

如何定製列表視圖右側的分組短名稱？有沒有人有關於列表視圖自定義渲染器的想法？

以下預期輸出

Answer 1

官方文檔here，請參閱添加一個索引

樣品here，請參閱BasicTableIndex

步驟：

• 通過dataSource創建短名稱數組。

  indexedTableItems = new Dictionary<string, List<string>>(); 
  foreach (var t in items) { 
      if (indexedTableItems.ContainsKey (t[0].ToString())) { 
       indexedTableItems[t[0].ToString()].Add(t); 
      } else { 
       indexedTableItems.Add (t[0].ToString(), new List<string>() {t}); 
      } 
  } 
  keys = indexedTableItems.Keys.ToArray(); 
  

• 顯示通過重寫這些方法

  public override nint NumberOfSections (UITableView tableView) 
  { 
  return keys.Length; 
  } 
  public override nint RowsInSection (UITableView tableview, nint section) 
  { 
      return indexedTableItems[keys[section]].Count; 
  } 
  public override string[] SectionIndexTitles (UITableView tableView) 
  { 
      return keys; 
  } 
  

Answer 2

無需創建呈現該

章節請嘗試以下代碼模式

XAML中代碼看起來像

<ListView x:Name ="lstView" IsGroupingEnabled="true" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}"> 
    <ListView.ItemTemplate> 
     <DataTemplate><TextCell Text="{Binding Name}" Detail = "{Binding Comment}" /></DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

你xaml.cs頁面看起來像

private ObservableCollection<GroupedVeggieModel> grouped { get; set; } 
     public GroupedListXaml() 
     { 
      InitializeComponent(); 
      grouped = new ObservableCollection<GroupedVeggieModel>(); 
      var veggieGroup = new GroupedVeggieModel() { LongName = "vegetables", ShortName="v" }; 
      var fruitGroup = new GroupedVeggieModel() { LongName = "fruit", ShortName = "f" }; 
      veggieGroup.Add (new VeggieModel() { Name = "celery", IsReallyAVeggie = true, Comment = "try ants on a log" }); 
      veggieGroup.Add (new VeggieModel() { Name = "tomato", IsReallyAVeggie = false, Comment = "pairs well with basil" }); 
      veggieGroup.Add (new VeggieModel() { Name = "zucchini", IsReallyAVeggie = true, Comment = "zucchini bread > bannana bread" }); 
      veggieGroup.Add (new VeggieModel() { Name = "peas", IsReallyAVeggie = true, Comment = "like peas in a pod" }); 
      fruitGroup.Add (new VeggieModel() {Name = "banana", IsReallyAVeggie = false,Comment = "available in chip form factor"}); 
      fruitGroup.Add (new VeggieModel() {Name = "strawberry", IsReallyAVeggie = false,Comment = "spring plant"}); 
      fruitGroup.Add (new VeggieModel() {Name = "cherry", IsReallyAVeggie = false,Comment = "topper for icecream"}); 
      grouped.Add (veggieGroup); grouped.Add (fruitGroup); 
      lstView.ItemsSource = grouped; 
     } 

模型的樣子

public class VeggieModel 
    { 
     public string Name { get; set; } 
     public string Comment { get; set; } 
     public bool IsReallyAVeggie { get; set; } 
     public string Image { get; set; } 
     public VeggieModel() 
     { 
     } 
    } 

    public class GroupedVeggieModel : ObservableCollection<VeggieModel> 
    { 
     public string LongName { get; set; } 
     public string ShortName { get; set; } 
    } 

的源代碼here