Jak utworzyć> w komórce z Xamarin.Forms?

Question

Mam aplikację, w której mogę zmienić kolejność i sposób wyświetlania kart. Dla każdego, kto ma iOS, potrzebuję czegoś bardzo podobnego do sposobu, w jaki działa strona Ustawienia> Kontakty> Kolejność sortowania.

To pokazuje dwa wiersze. Jeden z First, Last i drugi z Last, First. Gdy użytkownik kliknie wiersz, działa jak przycisk radiowy, a na końcu wiersza pojawia się znaczek.

Chciałbym spróbować i wdrożyć tę funkcjonalność, ale nie jestem pewien, od czego zacząć. Czy powinienem to zrobić z ViewCell lub TextCell i jak ktoś ma jakieś pomysły na temat tego, w jaki sposób jest on implementowany?

Answer 1

EDIT 1: Uproszczona własność zmieniona logika w rendererze iOS; teraz nie ma żadnych referencji ani procedur obsługi do czyszczenia.

W rozszerzeniu do użytkownika @ hankide odpowiedź:

Można utworzyć właściwość Bindable IsChecked natomiast rozszerzenie TextCell lub ViewCell i związać swój stan VM do niego.

public class MyTextCell : TextCell 
{ 
    public static readonly BindableProperty IsCheckedProperty = 
     BindableProperty.Create(
      "IsChecked", typeof(bool), typeof(MyTextCell), 
      defaultValue: false); 

    public bool IsChecked 
    { 
     get { return (bool)GetValue(IsCheckedProperty); } 
     set { SetValue(IsCheckedProperty, value); } 
    } 
} 

Kolejnym krokiem byłoby utworzenie renderera, który słucha tej właściwości i wyświetla znacznik na poziomie iOS.

[assembly: ExportRenderer(typeof(MyTextCell), typeof(SampleApp.iOS.MyTextCellRenderer))] 
namespace SampleApp.iOS 
{ 
    public class MyTextCellRenderer : TextCellRenderer 
    { 
     public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv) 
     { 
      var nativeCell = base.GetCell(item, reusableCell, tv); 

      var formsCell = item as MyTextCell; 
      SetCheckmark(nativeCell, formsCell); 

      return nativeCell; 
     } 

     protected override void HandlePropertyChanged(object sender, PropertyChangedEventArgs args) 
     { 
      base.HandlePropertyChanged(sender, args); 

      System.Diagnostics.Debug.WriteLine($"HandlePropertyChanged {args.PropertyName}"); 
      if (args.PropertyName == MyTextCell.IsCheckedProperty.PropertyName) 
      { 
       var nativeCell = sender as CellTableViewCell; 
       if (nativeCell?.Element is MyTextCell formsCell) 
        SetCheckmark(nativeCell, formsCell); 
      } 
     } 

     void SetCheckmark(UITableViewCell nativeCell, MyTextCell formsCell) 
     { 
      if (formsCell.IsChecked) 
       nativeCell.Accessory = UITableViewCellAccessory.Checkmark; 
      else 
       nativeCell.Accessory = UITableViewCellAccessory.None; 
     } 
    } 
} 

Wykorzystanie Próbka 1

I, wykorzystanie próbki chciałoby:

<TableView Intent="Settings"> 
    <TableSection Title="Sort Order"> 
     <local:MyTextCell Text="First Last" IsChecked="false" /> 
     <local:MyTextCell Text="Last, First" IsChecked="true" /> 
    </TableSection> 
</TableView> 

Wykorzystanie Próbka 2

Można również słuchać Tapped imprezy w celu zapewnienia IsChecked własność działa zgodnie z oczekiwaniami.

Na przykład, aby powiązać tę właściwość ViewModel:

<TableView Intent="Settings"> 
    <TableSection Title="Sort Order"> 
     <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [0].Name}" IsChecked="{Binding [0].IsSelected}" /> 
     <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [1].Name}" IsChecked="{Binding [1].IsSelected}" /> 
    </TableSection> 
</TableView> 

i obsłużyć zdarzenie kranu:

public SettingViewModel[] Settings = new []{ 
    new SettingViewModel { Name = "First Last", IsSelected = false }, 
    new SettingViewModel { Name = "Last First", IsSelected = true }, 
}; 

void Handle_Tapped(object sender, System.EventArgs e) 
{ 
    var cell = sender as TextCell; 
    if (cell == null) 
     return; 

    var selected = cell.Text; 
    foreach(var setting in Settings) 
    { 
     if (setting.Name == selected) 
      setting.IsSelected = true; 
     else 
      setting.IsSelected = false; 
    } 
} 

Answer 2

Opisana strona ustawień sortowania jest zaimplementowana za pomocą UIKit's UITableView. W Xamarin.Forms można użyć kontrolki TableView, aby uzyskać taki sam wynik.

Jak szybko zauważysz, nie ma sposobu, aby ustawić ikonę znacznika wyboru za pomocą Xamarin.Forms, więc prawdopodobnie będziesz musiał utworzyć custom cell, który ma tekst po lewej stronie i obraz znacznika wyboru po prawej stronie.

Jeśli naprawdę chcesz zrobić wszystko za pomocą książki, prawdopodobnie powinieneś utworzyć niestandardowy mechanizm renderujący, który pozwala ustawić właściwość Accessory bieżącego ViewCell. Jednak będzie to nieco skomplikowane dla tak małej funkcji.