CODEWITHSUNDEEP
xamlmvvmuitapgesturerecognizerreactiveui
Valerie
Valerie

Reputation: 659

How do I bind XAML Label with TapGestureRecognizer using MVVM?

I am trying to simulate a XAML button with the use of a Frame (for border and background) and a Label (for button text). However, I need to add a TapGestureRecognizer for the simulated button to work when clicked. I am trying to do this within the confines of using ReactiveUI and MVVM, but can't seem to hook up the bindings properly.

I'm following this tutorial, which sets up the bindings in the XAML code behind as follows:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoginPage : ContentPageBase<LoginViewModel>
{
    public LoginPage()
    {
        InitializeComponent();

        NavigationPage.SetHasNavigationBar(this, false);

    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        this.WhenActivated(disposables =>
        {
            this.Bind(ViewModel, vm => vm.Username, c => c.UsernameEntry.Text)
                .DisposeWith(disposables);

            this.Bind(ViewModel, vm => vm.Password, c => c.PasswordEntry.Text)
                .DisposeWith(disposables);

            //this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.LoginButton.LoginCommand)
            //    .DisposeWith(disposables);

            this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.SimulatedLoginButton.TapGestureCommandGoesHere)
                .DisposeWith(disposables);

            this.OneWayBind(ViewModel, x => x.IsLoading, x => x.LoginActivityIndicator.IsRunning)
                .DisposeWith(disposables);
        });
    }

I've commented out the Button binding (above) and inserted the simulated Button code (which doesn't compile of course). The problem is the simulated Button (Frame) doesn't have a button.Command, and I'm not sure how to add the tapgesture command so that it's recognized.

I have seen/tried XAML with Frame.TapGestureRecognizer tag, but wasn't able to get the binding to work with XAML using this method.

Any ideas how I can get this working with an MVVM implementation?

Upvotes: 1

Views: 760

Answers (1)

Adri&#225;n Romero
Adri&#225;n Romero

Reputation: 620

In your XAML you have to have something like this: 

<Frame>
<Frame.GestureRecognizers>
     <TapGestureRecognizer x:Name="Gesture" />
</Frame.GestureRecognizers>
</Frame>

And in your code behind: 

this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.Gesture.Command)
        .DisposeWith(disposables);

I hope this helps you

Upvotes: 4

Related Questions