How to add Images in the .NET MAUI SegmentedControl (SfSegmentedControl)?

In the Syncfusion .NET MAUI SegmentedControl, you can add images to the segmented control as per the following demonstration.

XAML:

Initialize the SfSegmentedControl as per the following code sample.

<buttons:SfSegmentedControl x:Name="segmentsImageInfo"
                           SelectedIndex="3"
                           ItemsSource="{Binding ImagesCollection}">
</buttons:SfSegmentedControl>

C#:

Create a view model to add images, where an observable collection is populated with image objects.

public class AddImageViewModel
{
   public AddImageViewModel()
   {
       this.InitializeImageCollection();
   }
   public List<SfSegmentItem> ImagesCollection { get; set; }

   private void InitializeImageCollection()
   {
       this.ImagesCollection = new List<SfSegmentItem>
       {
           new SfSegmentItem() { ImageSource = "boy1.png" },
           new SfSegmentItem() { ImageSource = "girl1.png" },
           new SfSegmentItem() { ImageSource = "girl2.png" },
           new SfSegmentItem() { ImageSource = "boy2.png" },
           new SfSegmentItem() { ImageSource = "girl3.png" },
       };
   }
}

XAML:

Set up a ContentPage with the BindingContext to an instance of AddImageViewModel class and display images based on the ImageCollection of AddImageViewModel class.

<ContentPage.BindingContext>
   <local:AddImageViewModel/>
</ContentPage.BindingContext>
<buttons:SfSegmentedControl x:Name="segmentsImageInfo"
                           SelectedIndex="3"
                           ItemsSource="{Binding ImagesCollection}">
</buttons:SfSegmentedControl>

View the sample on GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to add images in the .NET MAUI SegmentedControl (SfSegmentedControl).

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

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

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!</buttons:sfsegmentedcontrol.selectionindicatorsettings></buttons:sfsegmentedcontrol>