Multi-line text on buttons - how to get consistent across platforms?

JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

When the Text property of a Button is set to text that contains more than one line (i.e. has a carriage return/linefeed in the middle), what gets displayed is different on each platform.

On iOS, only the first line is displayed.
On Android, all lines are displayed, but centered.
On Windows Phone, all lines are displayed, but left-justified.

This is easily reproduced, by using the FormsGallery sample and tweaking the code in the ButtonDemoPage as below:

        Button button = new Button
        {
            Text = "This is a short line\r\nThis is a longer second line of text",
            BorderWidth = 1,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

Is there any plan to make these behaviours consistent across platforms? If so, is there a timescale for this?
I know that I could write custom renderers to do this, but it seems such a basic thing that consistent behaviour should be built in, that I would expect this to appear in Xamarin.Forms itself at some point.

Thanks,

John H.

Answers

  • SmathsSmaths USMember ✭✭

    I'm also trying to accomplish a multi-line button using Xamarin.Forms and am interested in a solution across platforms. It's a situation I keep running into.

  • Omer.7911Omer.7911 USMember ✭✭

    Any update on this thread?

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @Omer.7911 - I raised this as a bug a while back (see https://bugzilla.xamarin.com/show_bug.cgi?id=28621 ). It has been confirmed, and given a priority of Normal.

  • srikanth.7702srikanth.7702 USMember

    Is this issue at least now Resolved... checked your bug raised in bugzilla but I don't see any updates for it. Hope it will be answered now.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    No - the last time I checked it was still outstanding. I figure anything that gets marked as an enhancement in Bugzilla is way down the list, regardless of the Normal priority :-(

  • v3yr0nv3yr0n USUniversity ✭✭

    Yeah, it would be very good to have this... I'll contact xamarin forms support

  • Matt_HMatt_H USUniversity

    @AndrGonalves / @KeithRome
    Creating the custom renderer does allow the button to display multiple lines of text, however the bounds of the button aren't updated to account for the new size of the text. For example, I set the text to be five lines, the height of the button is the same as if I set it to one line. Any ideas on how to fix that?

  • @Matt_H hey! I have the same problem... did you solve it?

  • Matt_HMatt_H USUniversity

    @AlejandroForonda - Unfortunately, no. As a workaround, I used HeightRequest to set the height of the button. In my case, that works most of the time. The one area where I still have a problem is on a low resolution screen when the device rotates to landscape. HeightRequest is just that, a request, it doesn't force the button to be that size. So, when there is not much vertical space, the buttons are automatically shrunk to try to fit everything on the screen and I again have the text cut off.

  • Oh Ok :/ that sucks I'll try to use another control then, thank you for your response

  • any solution for the android?

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @SamahSeddeik.6116 - The bug is still outstanding and has been marked as an Enhancement. I haven't spent more time on it yet. However, I have made use of a ContentButton implementation to do all sorts of other things. I plan to try it fairly soon to see if it can be used to solve this as well. The basis of the ContentButton I use can be found at https://mega.nz/#!sd5XiRbT!70f-0VOqlwh_eIhwolktKeswbZPM9pLmRhYiMjkl0Ms with some discussion at https://github.com/XLabs/Xamarin-Forms-Labs/issues/241 . You might want to give that a try.

  • FernandoRochaFernandoRocha USUniversity ✭✭

    That's really amazing. Whenever I want a round label, I have to create a disabled button.

    Now that I need a round label with a large text in it, not even the button can save me.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @FernandoRocha - If you know in advance the size of the circle for the round label, you could create a png file with a transparent circle surrounded by whatever background color you want. Create an Image from the png file, overlay it on top of a normal Label. That should work.

  • FernandoRochaFernandoRocha USUniversity ✭✭

    @JohnHardman I had to do that, in the end. Thanks :)

  • AlexRodAlexRod BRMember ✭✭

    My workaround was binding a text with line break :expressionless: ... for example binding a text with "my text \r\n has one line break"... it worked as well for android

  • DerekHagenDerekHagen USMember ✭✭

    @AlexRod said:
    My workaround was binding a text with line break :expressionless: ... for example binding a text with "my text \r\n has one line break"... it worked as well for android

    I tried binding the TextProperty of a button to a property in my view model in an attempt to display multiple lines but I can't get it to work. It only shows the first line in IOS but Android it works.

    For example:
    mybutton.SetBinding(Button.TextProperty, new Binding("ButtonText"));

    Then my property is defined like:
    private string _ButtonText;
    public string ButtonText { get { return _ButtonText; } set { _ButtonText = value; OnPropertyChanged(); } }

    And then if I set the buttontext:
    ButtonText = "line1 \r\n line2";

    It will only show "line1" on the button in IOS..... Any suggestions?

  • JosecanallaJosecanalla ARMember ✭✭
    edited November 10

    I have buttons with various lines of text. It works OK in Android but in iOS it show only one line of text. Here is my simple solution using Custom Renderers (https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/)

    In PCL project:
    CustomButton.cs:

    public class CustomButton : Button
    {
    
    }
    

    Where you want to use the Button:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="namespace.class" 
        xmlns:local="clr-namespace:<yournamespace>;assembly=<namespace where is CustomButton class>">
    ...
    <local:CustomButton <button props>... />
    

    In iOS project:

    CustomButtoniOS.cs:

    [assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtoniOS))]
    namespace mynamespace.iOS
    {
        public class CustomButtoniOS : ButtonRenderer
        {
            public CustomButtoniOS()
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
                    Control.TitleLabel.Lines = 0;
                    Control.TitleLabel.TextAlignment = UITextAlignment.Center;
                }
            }
        }
    }
    
Sign In or Register to comment.