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
close icon

Multiline text in SfButton

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?

5 Replies

MK Muneesh Kumar G Syncfusion Team 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. 
 
Xaml: 
 
<buttons:SfButton x:Name="OrderButton" HeightRequest="50" WidthRequest="130" BackgroundColor="#f02674"> 
                <buttons:SfButton.Content> 
                    <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"/> 
                    </StackLayout> 
                </buttons:SfButton.Content> 
</buttons:SfButton> 
 
 
And we have prepared a sample based on your requirement and you can download the sample from below link. 
 
 
Screenshot: 
 
 
 
Please let us know if you have any other queries.  
      
Regards,      
Muneesh Kumar G. 
 



IM Igor Mitrofanov 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?


SM Saravanan Madheswaran Syncfusion Team 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"> 
                <buttons:SfButton.Content> 
                    <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"/> 
                    </StackLayout> 
                </buttons:SfButton.Content> 
            </buttons:SfButton> 
  
 
  
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. 
 
Regards, 
Saravanan. 
 
 
 



KH Khanh replied to Saravanan Madheswaran January 13, 2023 05:01 AM UTC

Thanks. It works for me



SR Shivani Ramakrishnan Syncfusion Team January 17, 2023 08:17 AM UTC

Hi Khanh,

 

We are glad to hear that the issue as been resolved. Please let us know if you need any other details.

 


Regards,
Shivani


Loader.
Live Chat Icon For mobile
Up arrow icon