How to customize the Segmented Control with DataTemplate in the .NET MAUI Segmented Control?
In the Syncfusion® .NET MAUI Segmented Control, you can customize the segmented control using a DataTemplate by following the guidelines below.
XAML:
Initialize the SfSegmentedControl and provide the item source using the ItemsSource property.
<buttons:SfSegmentedControl x:Name="segmentedControl">
<buttons:SfSegmentedControl.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Food</x:String>
<x:String>Chats</x:String>
<x:String>Dine-In</x:String>
</x:Array>
</buttons:SfSegmentedControl.ItemsSource>
</buttons:SfSegmentedControl>
XAML:
Create a custom segmented control using the SegmentTemplate property of the SfSegmentedControl. The following code example demonstrates how to create a segmented control using the DataTemplate.
<buttons:SfSegmentedControl x:Name="segmentedControl">
<buttons:SfSegmentedControl.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Food</x:String>
<x:String>Chats</x:String>
<x:String>Dine-In</x:String>
</x:Array>
</buttons:SfSegmentedControl.ItemsSource>
<buttons:SfSegmentedControl.SegmentTemplate>
<DataTemplate>
<Grid Background="CadetBlue">
<Label Text="{Binding Text}"
FontSize="16"
HorizontalOptions="Center"
TextColor="AliceBlue"
Margin="6"/>
</Grid>
</DataTemplate>
</buttons:SfSegmentedControl.SegmentTemplate>
</buttons:SfSegmentedControl>
Download the complete sample from GitHub.
Output:
Conclusion:
I hope you enjoyed learning how to customize the Segmented Control with DataTemplate 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!