Category / Section
How to customize the segmented item with custom font
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:
|
