SfRadioButton, Toggle SfButton or SfSegmentedControl ?

[Paul Parkins]

Hi,

I am using the Syncfusion Xamarin.Forms v20.4.0.38 in my MVVM application. What I am effectively trying to achieve is a number of radio buttons (ideally in a 3 column 2 row layout), with custom images and text. Despite the many Syncfusion controls available to me and the flexibility they offer, I have not yet managed to achieve what I am looking for.

Option 1 - SfRadioButton

This was my first port of call and the documentation shows me that I could use a FlexLayout to achieve the 2 x 3 layout I was looking for,

However it would seem that there is no way to use any image except the default circular radiobutton icon.

As a feature suggestion I offer that SfRadioButton could be extended to offer ImageSourceSelected and ImageSourceUnselected properties. This would have allowed me to achieve my objective easily

Option 2 - Toggle Button via SfButton

So then I looked at using an SfButton as a toggle button by setting IsCheckable to true. However I can't seem to work out how to achieve a mutually exclusive selection so they work like radio buttons. I have identified that SfButton offers RadioButtonGroup.GroupName and RadioButtonGroup.SelectedValue properties but the documentation and the API reference do not appear to mention these properties at all, nor do the sample projects.  Do you have any samples that show how to use these properties?

I've had a look at your Toggle Button sample project, and whilst it does look to be a mutually exclusive selection, in actual fact you are relying on the code behind to re-colour the button to make it look selected. I might be able to make use of this method as a workaround, but it doesn't seem as convenient as any component which would effectively offer me something like SelectedItem property bound to property on my page model.

Option 3 - SfSegmentedControl

My third consideration was to try SfSegmentedControl.

I haven't yet tried it using Segment items, but the offered method of using images by using an external application (Metro Studio) to create a ttf file of "font" images seems a bit overly complex to me.

As a feature suggestion, perhaps SfSegmentItem could be extended to have an ImageSource property so I can reuse the image assets already available to me in my application.

What I have tried is using custom views (SfButtons) to populate my SfSegementedControl. What I am finding is not ideal with this are:

• I don't think I have any control over the layout, and must always be a horizontal scrolling list
  
• It's not obvious to my users that this list has more items than those visible, nor that it is scrollable
• I don't seem to be able to split longer Text properties of my buttons onto 2 lines. I have tried $"First{Environment.NewLine}Second", and also a more html based "First
Second" approach, but neither caused the multi-line effect I was looking for
• The buttons are not behaving in a mutually exclusive fashion, as per radio buttons, or even the SfSegmentedControl seems by default to when I populate the items in other ways (strings or SfSegmentItem)

Are you able to:

• Offer any information on how the SfRadioButtonGroup properties may be used to make a number of SfButtons act like radio buttons in a common group?  If this is possible, then how best for my viewmodel to determine which is the selected button (given the viewmodel knows nothing about the buttons on the view)?
  
• Suggest my best method to implement what I am trying to achieve, whether by improving on what I have been trying already, or offering an alternate solution?
• Suggest how SfSegementedControl may be forced to
• Offer an alternate layout
• Use an SfButton as a view item within it, yet have multi-line text?

I the meantime I guess I'll look into using Metro Studio (never heard of this before) to try to create ttf file, so I can use SfSegmentItem objects to populate my SfSegmentedControl (but this would still not overcome my scrolling list points above).

Thanks for your consideration, and I hope you find my feature suggestions useful.

Paul

[Paul Parkins]

So I have now looked at Metro Studio.   It seems to me that this application allows you to create custom font files, using only the icon offered by Metro Studio itself, and I cannot import my own graphic to use as an icon?

We generally cannot find common icons that represent the features we offer, in any obvious way. As an example, feature might include: Claims, Handpays, Refills, Engineer, Promotional.

We already have our own icons to represent features in our applications and were looking to re-use the same icons in this mobile app for consistency. 

So unless I am wrong and there is actually some way to import images into Metro Studio, it looks to me like using SfSegmentedControl with SfSegementItems and font files, is no longer an option.

Paul

[Paul Parkins]

Hi,

Has anybody at Syncfusion spotted this post? You are usually pretty good at responding with a quick turnaround.

Paul

[Vijayakumar Viswanathan]

Hi Paul,

As previously mentioned, it is not possible to fulfill your current requirement using Syncfusion controls.

Query 1: Offer any information on how the SfRadioButtonGroup properties may be used to make a number of SfButtons act like radio buttons in a common group.  If this is possible, then how best for my ViewModel to determine which is the selected button (given the ViewModel knows nothing about the buttons on the view)?

The SfButton component does not support mutually exclusive selection, making it impossible to use for achieving the behavior of a radio button in a common group. Therefore, it is not suitable for the current requirement.

 

Query 2: Suggest my best method to implement what I am trying to achieve, whether by improving on what I have been trying already, or offering an alternate solution.

 

Unfortunately, as previously mentioned, it is not currently possible to fully customize the appearance of a SfRadioButton. The only customization option available is for the content of the button. For more information on customizing the content, please refer to the following link:  https://www.syncfusion.com/kb/12586/how-to-create-beautiful-custom-radiobutton-with-xamarin-forms

 

Query 3: Suggest how SfSegementedControl may be forced to offer an alternate layout.

We have added the ability to use custom views in the SfSegmentedControl. You can find more information on how to implement this feature in our user guide link below:

https://help.syncfusion.com/xamarin/segmented-control/populating-data-source#custom-views

 

Query 4: Use an SfButton as a view item within it, yet have multi-line text?

The SfButton component does not have the capability for mutually exclusive selection, and also it cannot display multi-line text.

 

Query 5:  SfRadioButton could be extended to offer ImageSourceSelected and ImageSourceUnselected properties.

We consider your feature suggestions such as ImageSourceSelected and ImageSourceUnselected properties in SfRadioButton for improving the control. Below is the feedback link,

Link: https://www.syncfusion.com/feedback/40392/provide-the-imagesourceselected-and-imagesourceunselected-properties-in-the

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.

 

Query 6:  I have now looked at Metro Studio.   It seems to me that this application allows you to create custom font files, using only the icon offered by Metro Studio itself, and I cannot import my own graphic to use as an icon.

We are currently in the process of reviewing this issue with the Metro Studio team and will provide updates on or before January 18th, 2023.

 

Thanks,

Vijayakumar V