Customise headers in Segment control for MAUI

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