Xamarin.forms: [F100] RadioButton

Created on 9 Apr 2018  Â·  12Comments  Â·  Source: xamarin/Xamarin.Forms

Implementation

```C#
public class RadioButton : IToggleButtonElement, ToggleButtonElement, ...
{
EventHandler CheckedChanged;
bool IsChecked {get; set; } //BP
string GroupName { get; set; } //BP
Color Color //BP
public Color BorderColor //BP
public int CornerRadius //BP
public double BorderWidth //BP
public ICommand Command //BP
public object CommandParameter //BP
public Font Font //BP
public string Text //BP
public Color TextColor //BP
}

## Rationale

The only way to achieve the `RadioButton` behavior in Xamarin.Forms out the box is by using a drop-down. Otherwise we need to use a set of `Switch`es having to enable and disable them on demand.
The problem gets even more complicated when using MVVM.
We have to generate data items for every element on the list with a bindable/notifiable property indicating state of current item.

The reason a drop-down is not enough, is because in many apps, we need the users to be able to make up their choice with a single sight and action, especially for small quantity list drop-downs (e.g. Male/Female/Unknown). A drop-down requires _a_. clicking the drop-down to open it, _b_. browsing the available options, _c_. selecting the desired item; whereas `RadioButton` is not only achieved with a single click, but the users can conclude what they are gonna select before even approaching the field. Furthermore, for speed-critical app (i.e. medic or customer-service related) when UX is top priority, a `RadioButton` is a must so the users already know where the choice they'll select is located, so they can click its position without even reading its content each time. All that is impossible to achieve with a traditional drop-down. Regarding this point, `Switch` is also not always the preferred option because for most platforms it takes up x3 the space a `RadioButton` does.


#### Android
https://developer.android.com/guide/topics/ui/controls/radiobutton.html

#### iOS
Implementation is fairly simple with setting the background images according the current state.

#### UWP
https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/radio-button

### Implications for CSS
Ensure a new target is created that maps to the new control

```css
radiobutton {
}

Backward Compatibility

This is a new control so there shouldn't be any issues with backwards compatibility

Difficulty : Medium

Not much work for Android and UWP but the iOS implementation still needs to be fleshed out a bit, and there are numerous working samples in XLabs etc. to start from.

F100 in-progress proposal-open roadmap enhancement âž•

Most helpful comment

FYI, I'm working on this... I'm opening a PR very soon

All 12 comments

Hi, I've been working on this.
I have question. in iOS, I need to set image to achieve RadioButton with UIButton as follow:

SetImage(UIImage.FromBundle("checked"), UIControlState.Selected);
SetImage(UIImage.FromBundle("unchecked"), UIControlState.Normal);

On Xamarin.iOS project, I can just add the image in assetscatalog and it's work, but I can't find the pattern of this project on how to add image, maybe you guys can point me out?

Thanks.

I’m on it too, but it will a full .net standart control for xamarin.forms.
Based on stacklayout.
Hope I will release it on week-end on differente librairy for now.
I will keep you in touch

In my opinion there are some implications and decisions to take, it's not just about adding an implementation, there are lots of implementations available already.
And RadioBox is related to the CheckBox too.
Feedback from stake holders (Xamarin) is required.

Why not do this the really easy way and just have an image view with a couple of svgs responding to a touch event. This will minimize new code and give consistency between platforms.

FYI, I'm working on this... I'm opening a PR very soon

Is Xamarin.Forms open for .NET standard controls (XAML-based control), or should be done with renderers?

@mshwf not sure if you noticed, but a PR is already open for this with an implementation. You can see it here #5349. If you have any questions or remarks about it, I think that would be the best place for it.

@jfversluis my question is to Xamarin authors (or Microsoft), if they allow implementing XAML-based controls (custom controls)

Just want to share our implementation of a radiobutton / radiobutton group that is created 100% in XAML: https://github.com/DIPSAS/DIPS.Xamarin.UI/pull/48

@samhouts Super excited for this feature. Can you explain to me as I am still new to this what (In Progress in vNext+1 (master)) means. Thanks!

@CARP-Kaiser Welcome! The feature is still in development in #8910. Our current prerelease is 4.5.0, and that is "vNext" (or "version next"). Anything currently targeting the master branch is eligible to be in the version after vNext, which is why we say "vNext +1". So, if it gets merged soon, it'll be in 4.6.0. We release a new stable version every 6 weeks or so, and 4.5.0 is nearing stable release. I hope that answers your question!

Awesome that clears stuff up nicely. Thanks!

Was this page helpful?
0 / 5 - 0 ratings