CODEWITHSUNDEEP
mvvmxamarin.forms
Rick
Rick

Reputation: 73

Xamarin.Forms Template Command TapGesture Inner Label

guys,

I need help on Xamarin.Forms.

I have a custom template, this template contains two labels. I just need one of the labels to get a TapGesture command. In my code, my entire template receives the TapGesture command.

Can someone help me?

Code ScheduleHeaderTitleTemplate: MyCustomTemplate

public partial class ScheduleHeaderTitleTemplate : ContentView
{
    #region Title
    public static readonly BindableProperty TitleProperty = BindableProperty.Create(
        propertyName: "Title",
        returnType: typeof(string),
        declaringType: typeof(ScheduleHeaderTitleTemplate),
        defaultValue: string.Empty,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: TitlePropertyChanged
    );
    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }
    private static void TitlePropertyChanged(BindableObject bindable, Object oldValue, Object newValue)
    {
        var scheduleHeaderTitleTemplate = (ScheduleHeaderTitleTemplate)bindable;
        scheduleHeaderTitleTemplate.title.Text = (string)newValue;
    }
    #endregion

    #region Command
    public static readonly BindableProperty CommandProperty = BindableProperty.Create(
        propertyName: nameof(Command),
        returnType: typeof(ICommand),
        declaringType: typeof(Label),
        defaultValue: null
    );
    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }
    #endregion

    public ScheduleHeaderTitleTemplate()
    {
        InitializeComponent();

        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.Tapped += (sender, e) =>
        {
            if (Command != null && Command.CanExecute(null))
                Command.Execute(null);
        };

        GestureRecognizers.Add(tapGestureRecognizer);
    }
}

View ScheduleHeaderTitleTemplate: MyCustomTemplate

<ContentView.Content>
    <StackLayout Padding="10, 10" Spacing="0" Orientation="Horizontal" BackgroundColor="{StaticResource Primary}">
        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
            <!--TAPGESTURE FOR THIS LABEL -->
            <Label Text="&#xf060;" Margin="0, 0, 15, 0" Style="{StaticResource IconWithFontAwesome}" />

            <Label x:Name="title" Margin="0, 3, 0, 0" Style="{StaticResource ScheduleSubTitle}"/>
        </StackLayout>
    </StackLayout>
</ContentView.Content>

Upvotes: 0

Views: 389

Answers (1)

Daniel Cunha
Daniel Cunha

Reputation: 676

That's quite simple. Instead of adding a TapGestureRecognizer right in the constructor, add it to the label you want to. There are two ways for doing that:

  1. You add a x:Name property to your label, for example "lblLink", and in your constructor you add the gesture to it, like lblLink.GestureRecognizers.Add(yourGestureRecognizer).

  2. You bind the command to the label in the XAML. You'll exactly the same thing, but in the XAML. You basically have to add a x:Name property to the ContentView and add a TapGestureRecognizer to the label:

<ContentView ...
             x:Name="View">
    <ContentView.Content>
      <StackLayout Padding="10, 10" Spacing="0" Orientation="Horizontal" BackgroundColor="{StaticResource Primary}">
        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
            <!--TAPGESTURE FOR THIS LABEL -->
            <Label Text="&#xf060;" Margin="0, 0, 15, 0" Style="{StaticResource IconWithFontAwesome}">
              <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Command, Source={x:Reference View}}" />
              </Label.GestureRecognizers>
            </Label>

            <Label x:Name="title" Margin="0, 3, 0, 0" Style="{StaticResource ScheduleSubTitle}"/>
        </StackLayout>
      </StackLayout>
  </ContentView.Content>
</ContentView>

Hope it helps!

Upvotes: 1

Related Questions