I want to align my text in the center, but the image on the left. I have tried it with HorizontalAlignment, but it aligns both. How to do it?
I want to align my text in the center, but the image on the left. I have tried it with HorizontalAlignment, but it aligns both. How to do it?
I took the time to actually understand how "insets" work, and wrote my own solution.
[assembly: ExportRenderer(typeof(Button), typeof(RingotanButtonRenderer))]
namespace MyAppNamespace
{
public class MyButtonRenderer : ButtonRenderer
{
public override void LayoutSubviews()
{
base.LayoutSubviews();
// Left-align the image and center the text
// Taken from https://stackoverflow.com/a/71044012/238419
if (Element.ContentLayout.Position == Button.ButtonContentLayout.ImagePosition.Left)
{
const int imageMargin = 20; // This might need to get multiplied by the screen density, not sure yet. I'll update this later if it does.
nfloat imageOffset = Control.ImageView.Frame.Left - imageMargin;
Control.ImageEdgeInsets = new UIEdgeInsets(0, -imageOffset, 0, imageOffset);
nfloat imageWidth = Control.ImageView.Frame.Width + imageMargin;
nfloat textOffset = Control.TitleLabel.Frame.Left - (imageWidth + Control.Frame.Width - Control.TitleLabel.Frame.Width) / 2;
Control.TitleEdgeInsets = new UIEdgeInsets(0, -textOffset, 0, textOffset);
}
}
}
}
Notes:
imageWidth = 0Button and set the ExportRenderer to that new class. Then only use that new class where you want the text centered.ImageSource or Text. I haven't been able to find a workaround to this bug yet.Try to use ButtonContentLayout.ImagePosition property:
do you know how I could set it from Control in ButtonRenderer?
You can change the ImageEdgeInsets and TitleEdgeInsets of the button in the renderer to change the image and title position:
[assembly: ExportRenderer (typeof(Button), typeof(MyButtonRenderer))]
namespace App650.iOS
{
public class MyButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
//Control is UIButton
Control.ImageEdgeInsets = new UIEdgeInsets(0, Control.Frame.Size.Width - (Control.ImageView.Frame.Size.Width), 0, 0);
Control.TitleEdgeInsets = new UIEdgeInsets(0, 0, 0, Control.ImageView.Frame.Size.Width);
}
}
}
}