How to fill a button with an image in Xamarin Forms?

Question

I am trying to fill a Button with an Image. The button resides within a Grid. The problem is that the image is not fully filling the button. I have also tried to use the ImageButton control.

Here is how I am building my U.I:

<Grid Grid.Row="1" Grid.Column="1" x:Name="VotingGrid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="45*" />
    <ColumnDefinition Width="10*" />
    <ColumnDefinition Width="45*" />
  </Grid.ColumnDefinitions>

  <Button Grid.Row="0" Grid.Column="0" Image="yay.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
  <Button Grid.Row="0" Grid.Column="2" Image="meh.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Grid>

It currently looks like the image attached below, but I'd like to image to fill my button.

Any help will be appreciated!

Solution 1

Try to place an image instead of button.

You can make use of Tap Gesture Gesture Recognizer to take click events.

Try something like this :

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Tapped="OnTapGestureRecognizerTapped"  />
  </Image.GestureRecognizers>
</Image>

The code for the event handler

void OnTapGestureRecognizerTapped(object sender, EventArgs args) {
    var imageSender = (Image)sender;
    // Do something
    DisplayAlert ("Alert", "Tap gesture recoganised", "OK");
}

---

Refer : Adding a Tap Gesture Gesture Recognizer

Solution 2

I have not used it myself but maybe you can use this one from XLab

https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ImageButton