How to wrap the text of segment in Xamarin.Forms SegmentedControl (SfSegmentedControl)
SfSegmentedControl allows you to display the multi-line text in their segment by using the custom view support. Hence, you can use that and load a label with LineBreakMode property being set to WordWrap. This will wrap the segment text to the next line as follows.
[C#]
public class ViewModel : INotifyPropertyChanged
{
public ObservableCollection<View> ViewItems { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private CustomLabel MealCombo_1 = new CustomLabel
{
Text = "Veg (Garlic, taco toppings and ranch)",
TextColor = Color.Black,
FontSize = 30,
LineBreakMode = Xamarin.Forms.LineBreakMode.WordWrap,
HorizontalTextAlignment = TextAlignment.Center,
VerticalOptions = LayoutOptions.Center,
HeightRequest = 200,
};
private CustomLabel MealCombo_2 = new CustomLabel
{
Text = "Non Veg (bafbecue sauce and chicken)",
TextColor = Color.Black,
FontSize = 30,
LineBreakMode = Xamarin.Forms.LineBreakMode.WordWrap,
HorizontalTextAlignment = TextAlignment.Center,
VerticalOptions = LayoutOptions.Center,
HeightRequest = 200,
};
public class CustomLabel : Label
{
}
public ViewModel()
{
ViewItems = new ObservableCollection<View>()
{
MealCombo_1,
MealCombo_2
};
}
}
[XAML]
…
<sfButtons:SfSegmentedControl
x:Name="segmentedControl"
BorderColor="Transparent"
BackgroundColor="LightBlue"
HorizontalOptions="StartAndExpand"
VerticalOptions="CenterAndExpand"
Color="Transparent"
SegmentHeight="120"
SegmentWidth="200"
ItemsSource="{Binding ViewItems}">
.
</sfButtons:SfSegmentedControl>
…
Output
See Also
How to add images in the Xamarin.Forms SegmentedControl
How to create a SegmentedControl with custom view
How to customize the segmented item with custom font
