Xamarin Formulaires ViewCell Balayer pour afficher les boutons

Question

tl; dr: Comment puis-je utiliser balayez pour afficher les boutons dans Xamarin formes comme l'application de messagerie iOS

Je suis en train de mettre en œuvre balayez pour afficher les boutons pour une Xamarin Forms iOS application similaire à l'interface utilisateur de l'application de messagerie iOS ou cette https://components.xamarin.com/view/swtableviewcell. Ce composant parmi beaucoup d'autres exemples que j'ai trouvés est parfait pour les implémentations natives iOS, mais j'ai besoin de montrer cette interface via les formulaires Xamarin.

Actuellement, j'ai un geste swipe personnalisé reconnaisseur comme ceci:

[assembly: ExportRenderer(typeof(SwipeViewCell), typeof(SwipeIosRenderer))] 

namespace MyApp.iOS.Renderers 
    { 
    public class SwipeIosRenderer : ViewCellRenderer 
     { 


    UISwipeGestureRecognizer swipeRightGestureRecognizer; 
    UISwipeGestureRecognizer swipeLeftGestureRecognizer; 

    protected override void OnElementChanged(ElementChangedEventArgs<Label> e) 
    { 
     base.OnElementChanged(e); 


     swipeRightGestureRecognizer = new UISwipeGestureRecognizer(() => UpdateRight()) { Direction = UISwipeGestureRecognizerDirection.Right }; 
     swipeLeftGestureRecognizer = new UISwipeGestureRecognizer(() => UpdateLeft()) { Direction = UISwipeGestureRecognizerDirection.Left }; 

     if (e.NewElement == null) 
     { 

      if (swipeRightGestureRecognizer != null) 
      { 
       this.RemoveGestureRecognizer(swipeRightGestureRecognizer); 
      } 
      if (swipeLeftGestureRecognizer != null) 
      { 
       this.RemoveGestureRecognizer(swipeLeftGestureRecognizer); 
      } 
     } 

     if (e.OldElement == null) 
     { 

      this.AddGestureRecognizer(swipeRightGestureRecognizer); 
      this.AddGestureRecognizer(swipeLeftGestureRecognizer);     
     } 

    } 

    private void UpdateLeft() 
    { 

     Console.WriteLine("Left swipe"); 

    } 
    private void UpdateRight() 
    { 

     Console.WriteLine("Right swipe"); 

    } 
} 

qui est lié à viewcells dans une liste. Maintenant que je peux reconnaître le geste de "glissement", j'ai besoin d'aide pour déplacer réellement la cellule de vue et montrer un bouton comme les exemples que j'ai donnés plus haut.

Ce serait génial de pouvoir le faire dans les vues XAML mais je suis ouvert à tout. J'ai une fonction UpdateLeft et UpdateRight qui est appelée sur les mouvements de balayage respectifs si cela peut être utilisé?

** EDIT: J'ai besoin de faire cela à la fois pour le balayage à gauche et à droite. ContextActions fournit uniquement la fonctionnalité de balayage à gauche.

Espérons que cela a du sens!

Answer 1

Est-ce que Context Actions fonctionnerait pour vous? Je n'ai pas essayé sur d'autres plates-formes, mais sur iOS, il créera un menu déroulant comme l'application Mail. Vous devriez aussi pouvoir utiliser XAML et lier aux propriétés de la commande.

Edit: Puisque vous éclairci que vous avez besoin des boutons swipe côté gauche et droit qui n'existent pas dans les ContextActions, vous pourriez utiliser le composant SWTableViewCell existant qui a déjà le comportement souhaité et l'adapter à Xamarin.Forms .

iOSRenderer:

public class SwipeIosRenderer : TextCellRenderer 
{ 

static NSString rid = new NSString("SWTableViewCell"); 

public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv) 
{ 
    var forms_cell = (SwipeCell)item; 

    SWTableViewCell native_cell = reusableCell as SWTableViewCell; 
    if (native_cell == null) 
    { 
     native_cell = new SWTableViewCell(UITableViewCellStyle.Default, rid); 

     if (forms_cell != null) 
     { 
      var cellDelegate = new CellDelegate(forms_cell); 
      native_cell.Delegate = cellDelegate; 

      if (forms_cell.LeftContextActions != null) 
      { 
       var left = new NSMutableArray(); 
       foreach (var btn in forms_cell.LeftContextActions) 
       { 
        AddButton(left, btn); 
       } 
       native_cell.LeftUtilityButtons = NSArray.FromArray<UIButton>(left); 
      } 

      if (forms_cell.RightContextActions != null) 
      { 
       var right = new NSMutableArray(); 
       foreach (var btn in forms_cell.RightContextActions) 
       { 
        AddButton(right, btn); 
       } 
       native_cell.RightUtilityButtons = NSArray.FromArray<UIButton>(right); 
       } 
      } 
      native_cell.TextLabel.Text = forms_cell.Text; 
    } 
    var fs = forms_cell.ImageSource as FileImageSource; 
    if (fs != null) 
    { 
     native_cell.ImageView.Image = UIImage.FromBundle(fs.File); 
    } 
    return native_cell; 
} 
void AddButton(NSMutableArray array,Button btn){ 
    if (!String.IsNullOrEmpty(btn.Image?.File)) 
    { 
     array.AddUtilityButton(btn.BorderColor.ToUIColor(), UIImage.FromBundle(btn.Image.File)); 
    } 
    else 
    { 
     array.AddUtilityButton(btn.BorderColor.ToUIColor(), btn.Text); 
    } 
} 

public class CellDelegate : SWTableViewCellDelegate 
{ 
    SwipeCell forms_cell; 

    public CellDelegate(SwipeCell forms_cell) 
    { 
     this.forms_cell = forms_cell; 
    } 

    public override void DidTriggerLeftUtilityButton(SWTableViewCell cell, nint index) 
    { 
     if (forms_cell.LeftContextActions.Count > index) 
     { 
      var c = forms_cell.LeftContextActions[(int)index]; 
      var cmd = c.Command; 
      if (cmd != null) 
      { 
       cmd.Execute(c.CommandParameter); 
      } 
     } 
    } 

    public override void DidTriggerRightUtilityButton(SWTableViewCell cell, nint index) 
    { 
     if (forms_cell.RightContextActions.Count > index) 
     { 
      var c = forms_cell.RightContextActions[(int)index]; 
      var cmd = c.Command; 
      if (cmd != null) 
      { 
       cmd.Execute(c.CommandParameter); 
      } 
     } 
    } 
} 

Exemple XAML:

<ListView x:Name="SwipeList"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 

      <test:SwipeCell Text="{Binding Data}" ImageSource="{Binding Image}"> 
        <test:SwipeViewCell.LeftContextActions> 
         <Button Text="L1" Command="{Binding LeftAction}" BorderColor="Aqua"/> 
         <Button Command="{Binding LeftAction2}" BorderColor="Gray" Image="xamarin.png"/> 
        </test:SwipeViewCell.LeftContextActions> 
        <test:SwipeViewCell.RightContextActions> 
         <Button Text="R1" Command="{Binding RightAction}" BorderColor="Blue" /> 
         <Button Text="R2" Command="{Binding RightAction2}" BorderColor="Purple" /> 
        </test:SwipeViewCell.RightContextActions> 
       </test:SwipeViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

Exemple de code Derrière

public class MyListItem 
{ 
    Page page; 
    public MyListItem(Page page) 
    { 
     this.page = page; 
     this.LeftAction= new Command(() => this.page.DisplayAlert("Left 1", this.Data, "OK")); 
     this.LeftAction2= new Command(() => this.page.DisplayAlert("Left 2", this.Data, "OK")); 
     this.RightAction= new Command(() => this.page.DisplayAlert("Right 1", this.Data, "OK")); 
     this.RightAction2= new Command(() => this.page.DisplayAlert("Right 2", this.Data, "OK")); 
    } 
    public string Image{ get; set; } 
    string data; 
    public string Data 
    { 
     get 
     { 
      return data; 
     } 
     set 
     { 
      data = value; 
     } 
    } 
    ICommand leftAction; 
    public ICommand LeftAction 
    { 
     get 
     { 
      return leftAction; 
     } 
     set 
     { 
      leftAction = value; 
     } 
    } 
    ICommand leftAction2; 
    public ICommand LeftAction2 
    { 
     get 
     { 
      return leftAction2; 
     } 
     set 
     { 
      leftAction2 = value; 
     } 
    } 
    ICommand rightAction; 
    public ICommand RightAction 
    { 
     get 
     { 
      return rightAction; 
     } 
     set 
     { 
      rightAction = value; 
     } 
    } 
    ICommand rightAction2; 
    public ICommand RightAction2 
    { 
     get 
     { 
      return rightAction2; 
     } 
     set 
     { 
      rightAction2 = value; 
     } 
    } 
    public override string ToString() 
    { 
     return this.Data; 
    } 
    } 
    public TestPage() 
    { 
     InitializeComponent(); 
     this.SwipeList.ItemsSource = new List<MyListItem>(){ 
      new MyListItem(this){Data="A"}, 
      new MyListItem(this){Data="B", Image="xamarin.png"}, 
      new MyListItem(this){Data="C"}, 
      new MyListItem(this){Data="D"}, 
     }; 
    }