How to add images in the Xamarin.Forms SegmentedControl?
Xamarin Segmented Control provides support to add any custom view as its segment item. We can add images by populating the data as a custom view in segmented control.
The following code illustrates how to add images in the segmented control.
C#
public class ViewModel
{
public ObservableCollection<View> ViewCollection { get; set; }
private Image Image1 = new Image { Source = "like.png" };
private Image Image2 = new Image { Source = "love.png" };
private Image Image3 = new Image { Source = "wow.png" };
private Image Image4 = new Image { Source = "laugh.png" };
private Image Image5 = new Image { Source = "angry.png" };
private Image Image6 = new Image { Source = "sad.png" };
public ViewModel()
{
ViewCollection = new ObservableCollection<View>()
{
Image1, Image2, Image3, Image4, Image5, Image6
};
}
}
XAML
<buttons:SfSegmentedControl x:Name="CustomSegments"
ItemsSource="{Binding ViewCollection}"
BorderColor="Transparent" SegmentHeight="40"
SegmentPadding="10" CornerRadius="20"
VisibleSegmentsCount="6">
<buttons:SfSegmentedControl.SelectionIndicatorSettings>
<buttons:SelectionIndicatorSettings
Color="Transparent">
</buttons:SelectionIndicatorSettings>
</buttons:SfSegmentedControl.SelectionIndicatorSettings>
</buttons:SfSegmentedControl>
Output
Conclusion
I hope you enjoyed learning about how to add images in the Xamarin.Forms SegmentedControl.
You can refer to our Xamarin.Forms SegmentedControl feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial
to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
