How to update BindingContext of Grid inside swipe left/right gesture in custom renderer?

Question

I am trying to implement the swipe left and right gesture to my Frame using the FrameRenderer. I have the the following code(minimal) in XAML:

<Frame x:Name="swipeableFrame" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
   <Grid x:Name="favoritesGrid"> <!--Update BindingContext -->
      <Grid.RowDefinitions>
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <Grid Grid.Row="0" Grid.Column="0">
         <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="50*" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <StackLayout Grid.Row="0" Grid.Column="0">
            <Label x:Name="englishLabel" FontSize="40" />
         </StackLayout>
         <StackLayout Grid.Row="1" Grid.Column="0">
            <Label x:Name="romajiLabel" FontSize="40" />
         </StackLayout>
     </Grid>
  </Grid>
</Frame>

In my custom renderer C# code I have the following:

public class FrameCustomRenderer : FrameRenderer
{
    UISwipeGestureRecognizer leftSwipeGestureRecognizer;
    UISwipeGestureRecognizer rightSwipeGestureRecognizer;

    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        Forms.Init();

        leftSwipeGestureRecognizer = new UISwipeGestureRecognizer();
        leftSwipeGestureRecognizer.Direction = UISwipeGestureRecognizerDirection.Left;
        leftSwipeGestureRecognizer.AddTarget((obj) =>
        {
            App.index++;
            Console.WriteLine("Swiped left");
            App.favoriteWords = App.DB.GetFavoritePhrases();
            App.favoriteWord = App.favoriteWords[App.index];
            //I want to update the BindingContext of the favoritesGrid here
        });
        rightSwipeGestureRecognizer = new UISwipeGestureRecognizer();
        rightSwipeGestureRecognizer.Direction = UISwipeGestureRecognizerDirection.Right;
        rightSwipeGestureRecognizer.AddTarget((obj) =>
        {
            App.index--;
            Console.WriteLine("Swiped right");
            App.favoriteWords = App.DB.GetFavoritePhrases();
            App.favoriteWord = favoriteWords[App.index];
            //I want to update the BindingContext  of the favoritesGrid here
        });

        if (e.NewElement == null)
        {
            if (leftSwipeGestureRecognizer != null || rightSwipeGestureRecognizer != null)
            {
                this.RemoveGestureRecognizer(leftSwipeGestureRecognizer);
                this.RemoveGestureRecognizer(rightSwipeGestureRecognizer);
            }
        }

        if (e.OldElement == null)
        {
            this.AddGestureRecognizer(leftSwipeGestureRecognizer);
            this.AddGestureRecognizer(rightSwipeGestureRecognizer);
        }
    }
}

In my target class C# code I have the following:

public partial class FavoritesFrameRendererClass : Frame
{
    public FavoritesFrameRendererClass()
    {
        InitializeComponent();
    }

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        App.favoriteWords = App.DB.GetFavoritePhrases();
        App.favoriteWord = App.favoriteWords[App.index];
        favoritesGrid.BindingContext = App.favoriteWord;

        englishLabel.SetBinding(Label.TextProperty, Lang.English.Text());
        romajiLabel.SetBinding(Label.TextProperty, Lang.Romaji.Text());
    }
}

What this basically do is if I swipe left it would give me the next word in the List and if I swipe right it would give me the previous word. Right now the swipe left and right gestures gives me the right words I wanted to get but my grid isn't updating to display the correct words. Any ideas how can I implement this?

PS: I am very new to custom renderer.

Answer 1

Since the BindingContext is on the Grid inside of your Frame you should be able to get the Grid from the Content of the Frame in your FrameRenderer and set its BindingContext in code by doing something like this:

var grid = Element?.Content as Layout<Xamarin.Forms.View>;
if (grid != null)
{
    grid.BindingContext = newBindingContext;
}