Wrap mode for segment buttons?

[Madhu Ganesh]

How can I get text to wrap in the segment buttons in SfSegmentedControl?

Thanks,

Madhu

[Anandraj Selvam]

Hi Madhu,  

  

Greetings from the Syncfusion.   

  

We have checked the reported query and currently we don’t have direct support for line break mode in Segmented control. But we can able to achieve your requirement by adding custom views and we have used custom renderer to achieve in android.   

  

[Adding label in collection]  

  

      public class CustomLabel : Label{}   

 

       public ObservableCollection<View> ViewItems { get; set; }  

  

        private CustomLabel MealCombo_1 = new CustomLabel 

        {  

            Text = "Veg (Garlic, taco toppings and ranch)",  

            TextColor = Color.FromHex("#979797"),  

            LineBreakMode = LineBreakMode.WordWrap,  

            HorizontalTextAlignment = TextAlignment.Center,  

            VerticalOptions = LayoutOptions.Center,  

            HeightRequest = 150,  

        };  

  

        private CustomLabel MealCombo_2 = new CustomLabel 

        {  

            Text = "Non Veg (bafbecue sauce and chicken)",  

            TextColor = Color.FromHex("#979797"),  

            LineBreakMode = LineBreakMode.WordWrap,  

            HorizontalTextAlignment = TextAlignment.Center,  

            VerticalOptions = LayoutOptions.Center,  

            HeightRequest = 150,  

        };  

  

        public ViewModel()  

        {  

            ViewItems = new ObservableCollection<View>()  

        {  

            MealCombo_1,  

            MealCombo_2  

        };  

        }  

  

[set view collection as segmented control item source.]  

  

<sfButtons:SfSegmentedControl  

. .   

. .   

        ItemsSource="{Binding ViewItems}"  

        SegmentPadding="10">  

                <sfButtons:SfSegmentedControl.BindingContext>  

                    <local:ViewModel/>  

                </sfButtons:SfSegmentedControl.BindingContext>            </sfButtons:SfSegmentedControl>  

  

[Forms.Android project] - CustomLabelRenderer  

  

[assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))]  

namespace SimpleSample.Droid  

{  

    public class CustomLabelRenderer : LabelRenderer  

    {  

        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)  

        {  

            base.OnElementChanged(e);  

  

            Control.SetSingleLine(false);  

        }  

    }  

}  

  

Screenshot: 

  

 

 

  

We have prepared sample that will be downloaded from below location.   

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SegmentedButton-390276052  

  

Please refer the below like to know more about populating data in segmented control.  

  

https://help.syncfusion.com/xamarin/sfsegmentedcontrol/populating-data-source#custom-views   

  

Please revert us for further investigation. 

  

Regards,     

Anand Raj S.