Photoshop Question posted in
The official user guide can be found here.

Hoe to make an ImageButton with a label ontop clickable – Photoshop

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?

Tags:

2

Answers


  1. 0

    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. 0

    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