Xamarin iOS button multiline text changing image alignment

Question

When writing an app, I noticed that the Xamarin iOS button does not support text wrapping by default. To overcome this, I created a custom renderer, as shown below:

    class iOSButton : ButtonRenderer 
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;

            }
        }
    }

This works fine, until you add an image to the button. I have placed an image above the text and centered it. However, now the text wraps around after just a few characters and it appears that any characters on the new line move the image to the right of it's centered position (despite the text being below the image).

Essentially multiline text moves the image alignment, and the text starts wrapping around before filling the available space.

I've tried playing with the UIEdgeInsets on the image and text properties (as descried here: Display Button With Text & Image In Xamarin IOS) but I can't get it to work.

Any ideas how I can keep the image aligned and prevent premature text wrapping? Is this a bug in Xamarin forms maybe?

Edit: I tried @llill 's answer - unfortunately it didn't help, just moved the alignment but didn't fix it.

The button should say "Test Text" with the arrow centered above the text, which is also centered.

The Xaml for this is button is:

<Button TextColor="White"
Text="Test Text"
                                
                                Grid.Row="0"
                                Grid.RowSpan="2"
                                Grid.Column="2"
                                BackgroundColor="{StaticResource ButtonColour}"
                                BorderColor="{Binding ButtonSelection[2], Converter={Services:ByteToBorderColourConverter}}"
                                BorderWidth="{StaticResource ButtonBorderWidth}"
                                BorderRadius="{StaticResource ButtonCornerRadius}"

                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                ContentLayout="Top"
                                ImageSource ="left_arrow_back_button.png"
                                    
                                Pressed="Test_Pressed"
                                Released="Test_Released"
                                />

Answer 1

You can achieve the desired effect by using ContentView. First add a picture and a label to the view, and then add a click on the view to do the corresponding logical operation.

Here is my code in xaml below:

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="CardViewCompressed" >
            <Grid>
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"
                        NumberOfTapsRequired="1" />
                </Grid.GestureRecognizers>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Row="0"
                   Grid.Column="0"
                   Source="img.jpg"
                   Aspect="AspectFit"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"/>
                <StackLayout Grid.Row="1" HorizontalOptions="Center"
                         Grid.Column="0">
                    <Label Text="testtesttesttesttesttesttesttesttesttesttesttesttesttesttest" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout HorizontalOptions="Center"  VerticalOptions="Center" WidthRequest="100" HeightRequest="100">
    <controls:View1 ControlTemplate="{StaticResource CardViewCompressed}" x:Name="myClick"/>
</StackLayout>

Here is the running screenshot:

Answer 2

I used Custom Renderers to rewrite the Button. In Xamarin iOS, I tried to use UIEdgeInsets to implement the text wrap operation of the Button, and the picture was above the text. here is my code in Xamarin.IOS below:

[assembly: ExportRenderer(typeof(Button), typeof(MyButtonren))]
namespace mkll.iOS
{
    public class MyButtonren:ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            Control.SetTitle("adasdsadagfcghgvhjvhvhvhvvsdsdszd", UIControlState.Normal);
            Control.SetImage(UIImage.FromFile("didian.png"), UIControlState.Normal);
            Control.ImageEdgeInsets = new UIEdgeInsets(-50 , 60, Control.TitleLabel.Frame.Size.Height , 0);
            Control.TitleEdgeInsets = new UIEdgeInsets(Control.ImageView.Frame.Size.Height / 2, 0, -Control.ImageView.Frame.Size.Height / 2, Control.ImageView.Frame.Size.Width / 2);
            Control.TitleLabel.LineBreakMode = UIKit.UILineBreakMode.WordWrap;
        }
    }
}

Here is the running screenshot: