Xamarin iOS display image and text in a UIButton - ios

Question

I am relatively new to iOS so go easy on me! In my app I need to have a button which contains an image a title. The image needs to go above the title. The image is defined dynamically from a base64 string.
My problem is I can’t work out how to display the title and the image in the button at the same time. I can display them individually but not together. I have tried following the approach in the below link but I have been unable to get it to work:
Display Button With Text & Image In Xamarin IOS
This is how the button needs to look:
In Xamarin iOS I am using the below code to set the image and lay out the controls in the button:
DeviceMenuItems m_menuItem = HHMenuContainer.Instance.GetMenuItems().DeviceMenuItems.SingleOrDefault(l => l.LineNo.ToString() == m_lineNo);
if (m_menuItem != null && m_menuItem.Base64Picture != null)
{
byte[] bytes = Convert.FromBase64String(m_menuItem.Base64Picture);
NSData data = NSData.FromArray(bytes);
UIImage uiimage = UIImage.LoadFromData(data);
//this line is not relevant to the problem
uiimage = ChangeImageBackground(uiimage);
if (uiimage != null)
{
//m_control is the UIButton
//commenting this out removes the image and shows the text
m_control.SetImage(uiimage, UIControlState.Normal);
float titleLabelHeight = (float)(m_control.TitleLabel.Frame.Size.Height + 10);
m_control.ImageEdgeInsets = new UIEdgeInsets(-(titleLabelHeight), 0, titleLabelHeight, 0 );
float imageHeight = (float)(m_control.ImageView.Frame.Size.Height * 0.5);
imageHeight -= titleLabelHeight;
m_control.TitleEdgeInsets = new UIEdgeInsets(imageHeight, 0, -(imageHeight), 0);
}
}
With the above code I get the following button (without the required text):
If I comment the ‘SetImage’ line out I get the following button:
Does anyone have any ideas why the above approach isn’t working?

Answer 1

From the shared link , it show left title and right image.If want up and down layout, you can try this:
button.TitleEdgeInsets = new UIEdgeInsets(0, -button.ImageView.Frame.Size.Width, -button.ImageView.Frame.Size.Height - 5，0);
button.ImageEdgeInsets = new UIEdgeInsets( -button.TitleLabel.Frame.Size.Height - 5, 0 , 0, -button.TitleLabel.Frame.Size.Width);
Note: If the button's frame is set and the width of the button is not enough to display the size of the image and text at the same time, the size of the titleLabel will get an error. So if you need to set the frame, it is recommended to set the width of the button to frame.size.width * 2, and then set the frame after the titleEdgeInsets and imageEdgeInsets are all set.