skip to Main Content

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?

2

Answers


  1. 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());
    }
    
    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search