We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiline text in SfButton

Thread ID:





147659 Sep 18,2019 09:50 PM UTC Sep 23,2019 12:41 PM UTC Xamarin.Forms 3
Tags: SfButton
Igor Mitrofanov
Asked On September 18, 2019 09:50 PM UTC

Can SfButton contains multiline text? I tried to insert '\n' and 
 in the text where I need to break line, but I didn't get the desired result. Also I use icon in SfButton and when I create custom content in SfButton with StackLayout that consists of labels, icon disappears. How can I reach multiline text in SfButton?

Muneesh Kumar G [Syncfusion]
Replied On September 19, 2019 06:53 AM UTC

Hi Igor Mitrofanov, 
Greetings from Syncfusion.  
We have validated your query and you can achieve this requirement by using Content property of SfButton and LineBreakMode property of Label. Please refer the below code snippet. 
<buttons:SfButton x:Name="OrderButton" HeightRequest="50" WidthRequest="130" BackgroundColor="#f02674"> 
                    <StackLayout Orientation="Horizontal"> 
                        <Image Source="button_Heart.png" Margin="10,0,0,0"  HeightRequest="40" WidthRequest="40"  HorizontalOptions="Center" VerticalOptions="Center"/> 
                        <Label Text="Text Wrap" LineBreakMode="WordWrap" TextColor="White" WidthRequest="{OnPlatform Android='33',iOS='40',UWP='35'}" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="Center"/> 
And we have prepared a sample based on your requirement and you can download the sample from below link. 
Please let us know if you have any other queries.  
Muneesh Kumar G. 

Igor Mitrofanov
Replied On September 21, 2019 02:25 PM UTC

I don't want to use fixed size of image, because it's a bad practice. Is there ways to reach the goal by other way?

Saravanan Madheswaran [Syncfusion]
Replied On September 23, 2019 12:41 PM UTC

Hi Igor Mitrofanov, 
As we have used stack layout as SfButton`s content, by specifying Horizontal and vertical option for its child elements to render with its desired size. 
    <buttons:SfButton x:Name="OrderButton" WidthRequest="150" VerticalOptions="CenterAndExpand"  BackgroundColor="#f02674"> 
                    <StackLayout Orientation="Horizontal"> 
                        <Image Source="button_Heart.png" Margin="10,0,0,0"  HorizontalOptions="Center" VerticalOptions="Center"/> 
                        <Label Text="Text Wrap will achieved using content template." LineBreakMode="WordWrap" TextColor="White" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Start" VerticalOptions="Center"/> 
We like to let you know that the Content property is used to customise the appearance of the button using custom views. You can add any kind of view inside the content property. 
And we have logged a feature request for “Multiline-text-support-for-sfbutton“and it can be tracked through our feedback portal below. 
Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have immediate plan to implement this feature since we committed with already planned work. So, this feature will be available any of our upcoming release. 
If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon