CODEWITHSUNDEEP
xamlxamarin.forms
user13397492
user13397492

Reputation: 169

Hoe to make an ImageButton with a label ontop clickable

So I've run into a problem with Imagebuttons in XAML. I usually render a background image from photoshop and then use this button everywhere and just add a label ontop that says what it does: enter image description here

This here for isntance comes from this code (partially):

<!--Grid for button-->
<Grid Grid.Row="1" >
      <ImageButton
           x:Name="btn_register_mainpage"
           Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
      <Label
          FontFamily="arial"
          TextColor="#272727"
          Text="Profil erstellen" 
          HorizontalOptions="Center" 
          VerticalOptions="Center"/>
</Grid>

Now, this works just fine, unless you want to click on it. As you can see I gave the button a name, I can now catch that name in code and delegate a click to it:

btn_register_mainpage.Clicked += async delegate
{
      await Navigation.PushAsync(new Screen_EditInformation());
};

However, this only works when the user clicks on the button - but NOT on the label since this is on top and has no click assigned to it.

So, what I could do is just assign the same click event to both objects (the label and the image button) but that seems rather unusual.

What is the best way to have a custom image as a button with a label ontop that is clickable?

Upvotes: 2

Views: 950

Answers (2)

Mouse On Mars
Mouse On Mars

Reputation: 1132

You can add GestureRecognizers to any control in Xamarin.Forms. In your case you could add one to the Grid layout

YourView.xaml

<Grid Grid.Row="1" >
    <Grid.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="OnTapGestureRecognizerTapped"
            NumberOfTapsRequired="1" />
    </Grid.GestureRecognizers>
    <ImageButton
        x:Name="btn_register_mainpage"
        InputTransparent="True"
        Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
    <Label
        FontFamily="arial"
        TextColor="#272727"
        Text="Profil erstellen" 
        HorizontalOptions="Center" 
        VerticalOptions="Center"/>
</Grid>

YourView.xaml.cs

private void OnTapGestureRecognizerTapped(object sender, EventArgs e)
{
    Navigation.PushAsync(new Screen_EditInformation());
}

Upvotes: 2

Lucas Zhang
Lucas Zhang

Reputation: 18861

You could add a TapGestureRecognizer on the label .

<Grid Grid.Row="1" >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>

            <ImageButton
                Clicked="Button_Clicked"
                Grid.Row="0"
                        x:Name="btn_register_mainpage"
                         BackgroundColor="LightBlue"/>
            <Label
                Grid.Row="0"
                        FontFamily="arial"
                        TextColor="#272727"
                        Text="Profil erstellen" 
                        HorizontalOptions="Center" 
                        VerticalOptions="Center">

                <Label.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="Button_Clicked"
            NumberOfTapsRequired="1" />
                </Label.GestureRecognizers>

            </Label>
        </Grid>

Upvotes: 1

Related Questions