Multiline Text Button Xamarin.Forms

Question

is theres a way to set multi-line text to a Xamarin.Forms button?

I tried Button.Text = "something \ n xxjjjxx" But it does not work.

Answer 1

There is a great example of how to achieve this on Github. It is very simple. Just create your own control that inherits ContentView and contains a grid.

[ContentProperty("Content")]
public class MultiLineButton : ContentView
{
    public event EventHandler Clicked;

    protected Grid ContentGrid;
    protected ContentView ContentContainer;
    protected Label TextContainer;

    public String Text
    {
        get
        {
            return (String)GetValue(TextProperty);
        }
        set
        {
            SetValue(TextProperty, value);
            OnPropertyChanged();
            RaiseTextChanged();
        }
    }

    public new View Content
    {
        get { return ContentContainer.Content; }
        set
        {
            if (ContentGrid.Children.Contains(value))
                return;

            ContentContainer.Content = value;
        }
    }

    public static BindableProperty TextProperty = BindableProperty.Create(
        propertyName: "Text",
        returnType: typeof(String),
        declaringType: typeof(MultiLineButton),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: TextValueChanged);

    private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((MultiLineButton)bindable).TextContainer.Text = (String)newValue;
    }

    public event EventHandler TextChanged;
    private void RaiseTextChanged()
    {
        if (TextChanged != null)
            TextChanged(this, EventArgs.Empty);
    }

    public MultiLineButton()
    {
        ContentGrid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand
        };

        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

        ContentContainer = new ContentView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };

        TextContainer = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        ContentContainer.Content = TextContainer;

        ContentGrid.Children.Add(ContentContainer);

        var button = new Button
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.FromHex("#01000000")
        };

        button.Clicked += (sender, e) => OnClicked();

        ContentGrid.Children.Add(button);

        base.Content = ContentGrid;

    }

    public void OnClicked()
    {
        if (Clicked != null)
            Clicked(this, new EventArgs());
    }
}

Then it can be used as follows:

<local:MultiLineButton x:Name="AssessmentToolDetailButton" 
    WidthRequest="100" HeightRequest="60" BackgroundColor="Blue">
    <StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
        <Label Text="Hello" TextColor="White" Font="16"/>
        <Label Text="World" TextColor="White" Font="16"/>
    </StackLayout>
</local:MultiLineButton>

You can also put an image in a button by setting its contents.

In my example, I modified the Dans source code to make the text anchored. Just set the value of Text instead of Content as follows:

<local:MultiLineButton Text="{Binding Description}" />

Danvanderboom : ConentButton Danvanderboom

Answer 2

, . , , , :

• , .
• Xamarin.Forms, , StackLayout , , TapGestureRecognizer .

Answer 3

iOS, Android . , Kasper, , .

A simple solution is to use a custom renderer (ButtonRenderer) to install LineBreakMode in WordWrap. If you then set the width of the button in Xaml, you will get words to display on different lines.

IOS

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

        Control.TitleEdgeInsets = new UIEdgeInsets(4, 4, 4, 4);
        Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
        Control.TitleLabel.TextAlignment = UITextAlignment.Center;
    }
}

Android does not require a custom renderer, as it wraps by default.

This is a known issue with Xamarin formats.

Answer 4

A simple solution would use: