CODEWITHSUNDEEP
xamarinxamarin.forms
Salvo
Salvo

Reputation: 179

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?

Upvotes: 13

Views: 27426

Answers (8)

Ricardo Ferreira
Ricardo Ferreira

Reputation: 71

Use <ImageButton Source"yourImage" Padding=10 Aspect="AspectFit"/>

You can controle the image size with the padding ;)

Upvotes: 6

Adriano
Adriano

Reputation: 1892

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>

Upvotes: 0

Karim Hesham
Karim Hesham

Reputation: 15

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.

Upvotes: 0

bhavya joshi
bhavya joshi

Reputation: 1136

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>

Upvotes: 3

Digital Crayon
Digital Crayon

Reputation: 61

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.

Upvotes: 6

pinedax
pinedax

Reputation: 9356

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

Upvotes: 2

WMartin
WMartin

Reputation: 619

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);

Upvotes: 10

VenkyDhana
VenkyDhana

Reputation: 905

You have missed to add WidthRequest. Can you add WidthRequest like below

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

Upvotes: -5

Related Questions