CODEWITHSUNDEEP
xamlxamarin.formsimagebutton
Peri Hartman
Peri Hartman

Reputation: 19484

Xamarin Forms: ImageButton border ignored on Android

I have a StackLayout containing some ImageButtons, the buttons have a BorderWidth of 5.

On UWP, the border appears with the image scaled to fit inside. On Android, the border doesn't appear at all, and the image flows into it space.

UWP (correct):

UWP

Android (no border): Android

My XAML looks like this

  <StackLayout 
    x:Name="titlebar"
    Orientation="Horizontal"
    BackgroundColor="{x:DynamicResource TitleBarColor}">

    ...

    <ImageButton
      x:Name="menu"
      HeightRequest="25" WidthRequest="25"
      HorizontalOptions="End"
      BorderWidth="5"
      BackgroundColor="{x:DynamicResource TitleBarColor}"
      Source="{local:ImageResource CloudTest.Assets.icons.more_menu_white.png}"
      Clicked="OnMenuClicked" />
  </StackLayout>

Upvotes: 0

Views: 308

Answers (1)

Leo Zhu
Leo Zhu

Reputation: 14956

In Android, I've found that it only works if you set both BorderWidth and BorderColor(could not Transparent).

and you also could set the Padding or Marginto the ImageButton to achieve to the effect.

<ImageButton
  x:Name="menu"
  HeightRequest="25" WidthRequest="25"
  HorizontalOptions="End"
  Padding ="5"  //or Margin ="5"
  BackgroundColor="{x:DynamicResource TitleBarColor}"
  Source="{local:ImageResource CloudTest.Assets.icons.more_menu_white.png}"
  Clicked="OnMenuClicked" />

Update (The yellow area is your ImageButton):

When using Margin,refers to the distance between the control and a sibling control :

enter image description here

Padding ,refers to the internal content of the control, such as the margin of the text/image distance from the control

enter image description here

so when you use the padding,you will see the space inside the image and when you use the margin,the space outside the image .

Upvotes: 1

Related Questions