Xamarin.Forms Template Command TapGesture Inner Label - mvvm

Question

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="" Margin="0, 0, 15, 0" Style="{StaticResource IconWithFontAwesome}" />
<Label x:Name="title" Margin="0, 3, 0, 0" Style="{StaticResource ScheduleSubTitle}"/>
</StackLayout>
</StackLayout>
</ContentView.Content>

Answer 1

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:
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).
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="" 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!