Xamarin Forms: ImageButton border ignored on Android - xaml

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):
Android (no border):
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>

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 :
Padding ,refers to the internal content of the control, such as the margin of the text/image distance from the control
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 .

Related

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

Xamarin Child Frame Overflow On Parent Corner Radius

I have a Xamarin Forms project with a card based interface where each card has a Corner Radius of 1 and padding 0. Within the card, the top element is a Heading control, with margin of 0, consisting of a frame with a background colour and a label within that.
The problem is since the Heading control does not have rounded corners, the corners which meet the corners of the Card will overrun and render outside of the Card which doesn't look right.
Is there any way to tell the Xamarin XAML renderer to appropriately cut off the corners of a child when the parent has rounded corners?
Here's a picture to show what I mean. The green pointed corners are rendered outside of the parent card.
To get the same result with Xamarin.Forms version 3.1.583944 for the background and rounded corners on Android, iOS, and UWP, try this XAML:
<OnPlatform x:TypeArguments="View">
<On Platform="UWP">
<Frame CornerRadius="20" OutlineColor="Black" Padding="0" Margin="12,0" HeightRequest="40">
<StackLayout BackgroundColor="Green">
<Label Text="BackgroundColor in StackLayout" Margin="20,0" />
</StackLayout>
</Frame>
</On>
<On Platform="Android, iOS">
<Frame CornerRadius="20" OutlineColor="Black" BackgroundColor="Green" Padding="0" Margin="12,0" HeightRequest="40">
<StackLayout>
<Label Text="BackgroundColor in Frame" Margin="20,0" />
</StackLayout>
</Frame>
</On>
</OnPlatform>
It seems that neither platform seems to produce the same result, possibly by native platform design (i.e. Android produce background inside the rounded corners in both cases above, iOS produce background inside rounded corners when BackgroundColor is set in Frame, UWP produce background inside rounded corners when BackgroundColor is set in StackLayout).
Please note that there are reported some issues with UWP on Frame CornerRadius.

How change icon size in Button.Image Xamarin

How I can change size icon? I want to enlarge because the icon is too small. In the original the icon has a correct size but in the application is too small
<StackLayout>
<local:AnimatedButton BackgroundColor="#ffffff"
BorderColor="#ffffff"
BorderRadius="25"
WidthRequest="50"
HeightRequest="50"
Command="{Binding CenterMyLocationCommand}">
<Button.Image>
<FileImageSource File="googlemap_view_center_button.png" />
</Button.Image>
</local:AnimatedButton>
</StackLayout>
Try to add/change WidthRequest and HeightRequest (also check: Width and Height) attributes

My ImageCircle is resizing itself in xamarin.forms

I am using ImageCircle plugin for xamarin forms
and it works well sometimes, when the picture is a kind of square...
But, when it's a rectangle, my image is resized and it's not that I planned
what Can I do to the image stop resize?
my code
<controls:CircleImage WidthRequest="75" HeightRequest="75" Grid.Row ="0" Grid.Column="1" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
I seted a fix height and width as you can see, but it didn't solve my problem, maybe because this circle image is a child of a grid and its grandfather (lol) is a relative layout but I really don't know if WidthRequest can change because of that...
How it always should be
How it is when the image is a rectangle:
EDIT---------------------------------------------
I put it in a Stach layout and I defined Aspect as fit...it helped but didnt solve...
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<controls:CircleImage Aspect="AspectFit" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<controls:CircleImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</controls:CircleImage.GestureRecognizers>
</controls:CircleImage>
</StackLayout>
I changed the api that I was using.
Now I use ffimage
Setting your HorizontalOptions="EndAndExpand" is what is causing you issues.
Instead, try setting both HorizontalOptions and VerticalOptions to a vaule that doesn't expand (Start, Center, End)
Note: I've noticed that you actually have to explicitly set HorizontalOptions to something that doesn't expand in order to get iOS to avoid stretching your CircleImage. Simply leaving it blank will default to stretching the image.
In the image, instead of HorizontalOptions="EndAndExpand" or VerticalOptions="EndAndExpand", just set it as "Start", "Center" or "End".
By default if you set it as "xxExpand" or do not set it at all, Xamarin iOS expands the image...

Windows Phone 8.1 XAML Image inside ToggleButton adds mystery padding

I'm working with a toggle button and rather than show text I want to show an image so I have this:
<ToggleButton Grid.Column="1" IsChecked="true" MinWidth="50" MinHeight="0" BorderThickness="0" HorizontalAlignment="Center">
<Image Source="ms-appx:///Assets/Icons/phonebutton.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</ToggleButton>
I have the transform to make the image a bit smaller so it's "inside" the button instead of filling it.
However, no matter what I do the button has a large padding around the image, even though the image itself has no margins or padding. I've set margin=0 on everything but the ToggleButton insists on putting space around the image, so the button is larger than it needs to be and cuts off inside the grid row it's in (which has a height="*")
I want the toggle button to "shrink" to fit in the row but still show the full image inside ...
while typing this the autosuggest found this link ToggleButton does not fill the area(windows phone) and by adding the style PhoneTouchTargetOverhang it does look better but then cuts off the image at the bottom unless I add negative padding to the togglebutton.
Anyone have any idea what I'm doing wrong?
Is there any way to disable it?
I have added the following margin to an image of 512x512:
<Image Source="/Assets/award4.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="-100,0,-100,0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
And it fits centered