Multiline text in SfButton

[Igor Mitrofanov]

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]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147659/ze/CustomButton549380529.zip  

 

Screenshot: 

 

 

 

Please let us know if you have any other queries.  

      

Regards,      

Muneesh Kumar G. 

 

[Igor Mitrofanov]

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]

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. 

 

Link: https://www.syncfusion.com/feedback/9031/multiline-text-support-for-sfbutton  

 

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. 

 

 

 

[Khanh]

Thanks. It works for me

[Shivani Ramakrishnan]

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