Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to Attach Tapped event to a Custom control?

JassimRahmaJassimRahma USMember ✭✭✭✭

Hi,

I have a custom control with two images and one Label

I am setting the Label text with no issue using BindableProperty

But now how can I have a Tapped event for every image in the custom control?

Let's say MyImageLogo and MyImageClose as names

Here is my custom control XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:SyncfusionBorder="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
    mc:Ignorable="d"
    x:Class="Zeera.Controls.NavigationHeader">
    <Grid x:Name="GridNavigationHeader" ColumnSpacing="0" RowSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <SyncfusionBorder:SfBorder Grid.Column="0" BorderColor="Black" HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="25">
                <Image Source="logo.png" WidthRequest="35" HeightRequest="35">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
            </SyncfusionBorder:SfBorder>

            <Label x:Name="LabelNavigationHeader" Grid.Column="1" Text="Country" TextColor="{DynamicResource NavBarSystemTextColor}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalOptions="Center" />

            <Image Grid.Column="2" Source="Close.png" Margin="10" WidthRequest="35" HeightRequest="35" HorizontalOptions="End" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
            </Image>
        </Grid>
</ContentView>

and this is the custom control CS:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Zeera.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class NavigationHeader : ContentView
    {
        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(NavigationHeader), default(string), Xamarin.Forms.BindingMode.OneWay);
        public static readonly BindableProperty HeaderBackground = BindableProperty.Create(nameof(BackColor), typeof(Color), typeof(NavigationHeader), Color.White, Xamarin.Forms.BindingMode.OneWay);

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        public Color BackColor
        {
            get { return (Color)GetValue(HeaderBackground); }
            set { SetValue(HeaderBackground, value); }
        }

        public NavigationHeader()
        {
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            // LabelNavigationHeader.SetBinding(Label.TextProperty, new Binding())
        }

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == TitleProperty.PropertyName)
            {
                LabelNavigationHeader.Text = Title;
            }

            if (propertyName == HeaderBackground.PropertyName)
            {
                GridNavigationHeader.BackgroundColor = BackColor;
                // GridNavigationHeader.BackgroundColor = Color.Blue;
            }
        }
    }
}

Thanks,
Jassim

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited October 2019

    Assign the Tapped event with the same event name.

    TapGestureRecognizer For every image

           <Image.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
    

    Code behind

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
    
        }
    
  • JassimRahmaJassimRahma USMember ✭✭✭✭

    @ColeX said:
    Assign the Tapped event with the same event name.

    TapGestureRecognizer For every image

           <Image.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
    

    Code behind

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
    
        }
    

    in the custom control codebehind? but the code for the Tapped is not the same for every page

  • pujolsluispujolsluis Member ✭✭

    Hey @JassimRahma ,

    You could create a custom View Tapped behavior for your views, to add Bindable Command Properties that way when they tap one of the images you can trigger a command directly in your viewmodel. I have an article you can check out where I implemented the View Tapped behavior it's called Ficus UI Challenge, I still can't post links on the forum so you will have to go to my blog for it :P pujolsluis dot com

Sign In or Register to comment.