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

Multiline text in SfButton

Can SfButton contains multiline text? I tried to insert '' 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?

3 Replies

MK Muneesh Kumar G Syncfusion Team September 19, 2019 01:53 AM

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 09:25 AM

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 07:41 AM

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. 
 
 
 


Loader.
Live Chat Icon For mobile
Up arrow icon