Search code examples
xamlxamarin.formsimagebutton

Xamarin.Forms ImageButton Image Padding


How to make paddings for the source image inside image button?

UPDATE:

<ImageButton Source="cell_arrow_right.png" IsVisible="{Binding IsNotLeaf}"
                     VerticalOptions="Center" HorizontalOptions="Center" 
                     WidthRequest="40" HeightRequest="40" Aspect="Fill"
                     Clicked="ImageButton_Clicked" Margin="0, 0, 15, 0"
                     BackgroundColor="Transparent" BorderColor="Accent" 
                     BorderWidth="1" Scale="0.9" CornerRadius="5" />

I tried to use Padding, not working.. It just moves the source image. Also I tried to edit margin - still no result. Now I've just edited the image itself, made it with paddings. But that's bad decision..(


Solution

  • I suspect the problem is actually HorizontalOptions and VerticalOptions, both are set to Center, which will position the ImageButton in the center of it's containing element.

    Try removing them completely (they default to HorizontalOptions=Fill, same for vertical). Or you could try:

    <ImageButton VerticalOptions="Start" HorizontalOptions="Start" Margin="10" />
    

    This will give a margin of 10 around the ImageButton and position the image at the start of its containing element (horizontally and vertically, ie Top and Left).

    Padding represents the distance between an element and it's child elements.

    Margin represents the distance between an element and adjacent elements.

    There is a good guide here.