Customise headers in Segment control for MAUI

[Apoorva]

Hi,
Is it possible to customize the header template for the items in the Segmented control for MAUI?
E.g. I would like to have a button with an optional image in the segment headers along with the text.

 

[Lance | Senior Manager Technical Support]

Hello Aproova,

The SegmentedControl doesn't support custom content inside the segments. It was designed specifically for fast-rendered text segments rather than a horizontal items list.

Achieving Your Goal

I can however show you how to achieve what you want. See my older SegmentedCustomControl Demo on GitHub:

• https://github ... Controls/ButtonSegments.xaml 
• https://github ... Controls/ButtonSegments.xaml.cs 

Note although it's a XF project, the code is the same for .NET MAUI. Let me explain the primary logic:

Extending The Example

You can add image support to this because the RadButton has support for ImageSource and BackgroundImageSource.

To support this, instead of a List<string> for the ItemsSource, you can create a custom model that lets you pass down an ImageSource object to be used for that it's icon

public class SegmentItem : BindableBase
{
    private string text;
    private ImageSource imageSource;
    private ImageSource backgroundImageSource;

    public string Text
    {
        get => text;
        set => SetProperty(ref text, value);
    }

    public ImageSource ImageSource
    {
        get => imageSource;
        set => SetProperty(ref imageSource, value);
    }

    public ImageSource BackgroundImageSource
    {
        get => backgroundImageSource;
        set => SetProperty(ref backgroundImageSource, value);
    }
}

In the ItemsSource iteration method, you can also set the image properties alongside the Text:

Demo

Let's say you've added the following instance of your new custom control to a page in your app:

<input:SegmentView x:Name="MySegmentView"
                   SelectedItemChanged="ButtonSegments_OnSelectedItemChanged"
                   SelectedSegmentTextColor="#036ecb"
                   SelectedSegmentBackgroundColor="#e0edf8"
                   BackgroundColor="White"
                   BorderColor="#e1e1e1"
                   CornerRadius="4"
                   FontSize="12"
                   HeightRequest="30"
                   Margin="5" />

and you've set the following as the ItemsSource

var items = new List<SegmentItem>
{
    new() { Text = "Breakfast", ImageSource = ImageSource.FromFile("breakfast.png") },
    new() { Text = "Lunch", ImageSource = ImageSource.FromFile("lunch.png") },
    new() { Text = "Dinner", ImageSource = ImageSource.FromFile("dinner.png") }
};

MySegmentView.ItemsSource = items;

The result looks like this!

See a video of it in action here => https://www.screencast.com/t/IW69JTRl2b 

Source Code

I was able to commit the above implementation to GitHub so you can use it for guidance while building your control. Find the readme overview, links to source files and example here => https://github.com/LanceMcCarthy/CustomMauiExamples?tab=readme-ov-file#segmentview 

However, please understand that this is not an official Telerik UI for Maui component and isn't covered by technical support. You can play with it more, adding external borders if you like, or add more BindableProperties if you need it.

Regards,
Lance | Senior Manager Technical Support
Progress Telerik

[Apoorva]

Hi Lance

Thanks very much for the response and examples, we will try this out.
However, the reason I asked this question was because in the demo page for the Segmented controls, I saw an example where images were used:
https://docs.telerik.com/devtools/maui/controls/segmentedcontrol/overview?_ga=2.169800097.1238871606.1715934467-1100902376.1715934467

Although this was either image or text, not both, so I wondered if there was an easy way. If not, I will do it as per your example.

Thanks.

[Lance | Senior Manager Technical Support]

Hi Apoorva,

Those aren't images, they're icons from a Font family and is just text. For example, the 🙂 character is part of many font families today, but you can use a special font like Font Awesome has thousands of font icons.

If you do not need an actual image, and the font family supports the icon, you can combine them into the same text, for example:

<telerik:RadSegmentedControl x:Name="segmentControlText"
                                  HeightRequest="60"
                                  VerticalOptions="Start">
    <telerik:RadSegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>🔥 Fire</x:String>
            <x:String>🍕 Pizza</x:String>
            <x:String>⚒️ Minecraft</x:String>
            <x:String>🤷‍♂️ Friends</x:String>
        </x:Array>
    </telerik:RadSegmentedControl.ItemsSource>
</telerik:RadSegmentedControl>