Category / Section
How to customize the segmented item with custom font
1 min read
Syncfusion SegmentedControl allows users customize the segmented item with custom fonts.
The following steps explain how to set custom fonts to the segmented items.
Step 1: Create a SegmentedControl sample with all the required assemblies.
Step 2: Create the ViewModel class, and add a segmented item collection that needs to be bound with the item source. Set IconText and FontIconFontFamily to each segmented item to be customized.
public class ViewModel : INotifyPropertyChanged
{
private ObservableCollection<SfSegmentItem> imageTextCollection = new ObservableCollection<SfSegmentItem>();
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<SfSegmentItem> ImageTextCollection
{
get { return imageTextCollection; }
set { imageTextCollection = value; }
}
public ViewModel()
{
imageTextCollection = new ObservableCollection<SfSegmentItem>
{
new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.Green, FontColor=Color.Red, Text = "Day", FontIconFontFamily= "segment2.ttf"},
new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.Green, FontColor=Color.Red, Text = "Week", FontIconFontFamily= "segment2.ttf"},
new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.Green, FontColor=Color.Red, Text = "Month", FontIconFontFamily= "segment2.ttf"}
};
}
}
Step 3: Initialize the SegmentdControl in the xaml page in which the ViewModel class is set to BindingContext. Set DisplayMode to ImageWithText for displaying the segmented item with image and text.
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" />
<buttons:SfSegmentedControl x:Name="segmentedControl" Color="#048EAC" Margin="10,0" CornerRadius="15" HeightRequest="50" WidthRequest="50" ItemsSource="{Binding ImageTextCollection}" DisplayMode="ImageWithText" VisibleSegmentsCount="3" FontIconFontFamily="segment2.ttf">
</buttons:SfSegmentedControl>
Output:
|
