Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

enter image description here

Any help will be appreciated!

like image 385
Mirel Vlad Avatar asked May 18 '16 09:05

Mirel Vlad


2 Answers

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

like image 63
Yksh Avatar answered Oct 17 '22 02:10

Yksh


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

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

like image 2
Ahmad ElMadi Avatar answered Oct 17 '22 02:10

Ahmad ElMadi