We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SfSegmentedControl with icons - no sample

Hi,
Your docs in section "Display mode" for SfSegmentCOntrol doesn't make any sense. You wrote that we can populate ItemSource with items to make SfSegmentControl  display Icons and text. There is one problem: there is no way to do that. Even in your sample code in docs you just populate SfSegmentItem with only text, but how ca you add icon? There is no property for icon or something similar.
Please, provide a sample with custom icon and text in Segmented Control.

Regards

3 Replies

MK Muneesh Kumar G Syncfusion Team March 29, 2019 10:03 AM UTC

Hi Przemyslaw,  
 
Greetings from Syncfusion. 
 
We have created a sample for SfSegmentedControl as per your requirement. When DisplayMode is ImageWithText, items populated in control will be displayed as icons with text.  
 
We have IconFont and Text property in SfSegmentItem to set icon and text in SfSegmentedControl. Please check the code snippet for your reference. 
 
Code Snippet: 
 
new SfSegmentItem(){ IconFont = "6", FontIconFontColor = Color.FromHex("#FFFFFF"), FontColor=Color.FromHex("#FFFFFF"), Text = "Day"},  
 
Please use the font.ttf file code on the XAML code as mentioned below. 
  
<buttons:SfSegmentedControl.FontIconFontFamily> 
<OnPlatform x:TypeArguments="x:String"> 
<On Platform="Android" Value="SegmentIcon.ttf" />               
<On Platform="UWP" Value="/Assets/SegmentIcon.ttf#segment2" />                 
<On Platform="iOS" Value="segment2" />          
</OnPlatform>     
</buttons:SfSegmentedControl.FontIconFontFamily> 
 
Please download the sample from the below link: 
 
 
Please refer the following link to know more details about how to set custom font SfSegmentedControl.  
 
 
Please let us know if you have any concern about this. 
 
Regards, 
Muneesh Kumar G. 



PP Paul Parkins January 10, 2023 12:06 PM UTC

Hi,

Using a separate application to create an icon font file and then treating the images as text icons seems an overly complex way of doing things in my opinion.

Surely you must have you considered adding an ImageSource property to SfSegmentItem and associated changes in SfSegmentControl to allow it to use the. This would make it more in line with other buttons, etc that shows an image. I wonder if there were some good technical reasons why you could not do this?

I am currently experimenting with the use of Views within the segment control so I can add images to buttons using the images I already have as resources in my application. I'm still not overly keen on this method either as it means the view model has to define it's own buttons in order to provide an ObservableCollection of them.   In an MVVM application, the view model should not be defining UI elements, which are actually part of the view.


Paul




VV Vijayakumar Viswanathan Syncfusion Team January 11, 2023 02:57 PM UTC

Hi Paul,

We have created new a feature request for ImageSource property support in the SfSegmented control. You can track the progress of the feature implementation using the following feedback link.

 

Feedback link: https://www.syncfusion.com/feedback/40340/provide-imagesource-property-support-for-sfsegmented-control

 

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed to already planned work. So, this feature will be available in any of our upcoming releases.

 

If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. We will share the release details in the feedback itself.


Regards,

Vijayakumar V


Loader.
Live Chat Icon For mobile
Up arrow icon