How to customize the Segmented Item with custom font in the .NET MAUI Segmented Control?

In the Syncfusion® .NET MAUI Segmented Control, you can customize the segmented item with a custom font by following the steps below.

XAML:

Initialize the SfSegmentedControl with the required assemblies.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourNamespace"
            xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
            x:Class="YourNamespace.MainPage">

   <ContentPage.BindingContext>
       <local:CustomFontViewModel x:Name="viewModel" />
   </ContentPage.BindingContext>

   <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
       <buttons:SfSegmentedControl x:Name="segmentedControl"
                                   ItemsSource="{Binding SegmentItems}">
       </buttons:SfSegmentedControl>
   </StackLayout>
</ContentPage>

C#:

Create a ViewModel class to define a collection of segmented items and configure the Text, Color, and FontFamily for each item:

public class CustomFontViewModel
{
   private List<SfSegmentItem> segmentItems;

   public CustomFontViewModel()
   {
       segmentItems = new List<SfSegmentItem>
       {
           new SfSegmentItem { ImageSource = new FontImageSource { Glyph = "\ue700", Size = 20, FontFamily = "SegmentIcon", Color = Colors.CadetBlue }, Text = "Day" },
           new SfSegmentItem { ImageSource = new FontImageSource { Glyph = "\ue701", Size = 20, FontFamily = "SegmentIcon", Color = Colors.CadetBlue }, Text = "Week" },
           new SfSegmentItem { ImageSource = new FontImageSource { Glyph = "\ue701", Size = 20, FontFamily = "SegmentIcon", Color = Colors.CadetBlue }, Text = "Month" },
           new SfSegmentItem { ImageSource = new FontImageSource { Glyph = "\ue703", Size = 20, FontFamily = "SegmentIcon", Color = Colors.CadetBlue }, Text = "Year" },
       };
   }

   public List<SfSegmentItem> SegmentItems
   {
       get { return segmentItems; }
       set { segmentItems = value; }
   }
}

XAML:

Set the BindingContext to the ViewModel class and bind the SegmentItems collection to it.

<ContentPage.BindingContext>
   <local:CustomFontViewModel />
</ContentPage.BindingContext>

<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
   <buttons:SfSegmentedControl x:Name="segmentedControl" 
                               ItemsSource="{Binding SegmentItems}">
   </buttons:SfSegmentedControl>
</StackLayout>

Download the complete sample from GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to customize the segmented item with a custom font in the .NET MAUI Segmented Control.

Refer to our .NET MAUI Segmented Control feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Segmented Control documentation to understand how to present and manipulate data.

Check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Segmented Control and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!