'How to set width of image inside button in Xamarin.Forms xaml?

I would like to know if it is possible to set the width and height of the image inside this button:

<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>

Any solution?

xamarin xamarin.forms

Solution 1:^[1]

You could always create an Image control and add a tap gesture recognizer to it. That way you have more control over the image size and placement.

XAML

<Image x:Name="myImage" Source="ic_music_white.png" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center"/>

XAML.CS

TapGestureRecognizer tapEvent = new TapGestureRecognizer();
tapEvent.Tapped += Button_Clicked;
myImage.GestureRecognizers.Add(tapEvent);

Solution 2:^[2]

On an iOS project, padding can adjust the size of the image within the button. If you have a width of 50, padding 10, the resulting image width will be 30.

Solution 3:^[3]

This is not possible from the Xamarin.Forms project but you can create custom renderers which will allow you to modify the properties of the native control.

In the case of the iOS you will be changing the ImageEdgeInsets.

For Android you might want to take a look at the Button renderer so you can get any ideas.

Hope this helps.-

Solution 4:^[4]

No,you can't manage the height/width of image inside button . The better option would be to create a stacklayout and then put text and image inside it. The way i did it:

<StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand"  VerticalOptions="End" HeightRequest="60">

                <Label Text="Review task" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" FontSize="25" FontAttributes="Bold"/>
                <Image Source="nextarrow_white.png" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="32" Margin="20,4,0,0"/>

        </StackLayout>

Solution 5:^[5]

If you just want to place buttons inside a screen without adding text or other content, you could place your buttons inside a Grid layout as following

<Grid RowDefinitions="auto"
              ColumnDefinitions="auto"
              Margin="40 40 40 40">
              
              <ImageButton Grid.Row="1"
                         Grid.Column="1"
                         Source="Resources/Images/installations.png"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"/>
          </Grid>

There, you apply a margin to the grid layout, this case images will automatically adjust their sizes to fit the available space.

Solution 6:^[6]

You can now use scale to change the size of the content. And padding to add the border around the image.

Example

  <Button 
    Image="ic_music_white.png" 
    BorderWidth="1"  
    BorderColor="White" 
    HeightRequest="56"  
    BackgroundColor="PowderBlue" 
    HorizontalOptions="Center" 
    Clicked="Button_Clicked"
    Scale = "0.7",
    Padding = "10"
    >
  </Button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	WMartin
Solution 2	Digital Crayon
Solution 3	pinedax
Solution 4	bhavya joshi
Solution 5	Karim Hesham
Solution 6	Adriano

'How to set width of image inside button in Xamarin.Forms xaml?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]