[Bug] Unable to style RadioButton icon color

[davidortinau]

Description

The control offers background color, text color, and border color. Those are all button properties. I need to be able to set the color for the radio button itself.

<StackLayout Spacing="12">
                <Label Text="RadioButton" Style="{ DynamicResource TextSubHead }" />
                <RadioButton GroupName="radio" Text="One" IsChecked="True"/>
                <RadioButton GroupName="radio" Text="Two"/>
                <RadioButton GroupName="radio" Text="Three"/>
                <RadioButton GroupName="radio" Text="Four"/>
            </StackLayout>

Styles:

<!-- RadioButton -->
    <Style TargetType="RadioButton">
        <Setter Property="TextColor" Value="{DynamicResource TextPrimaryColor}"/>
    </Style>

Expected Behavior

I can set the color of the radio button graphic.

Actual Behavior

No property is available. I also tried overriding the ImageSource to no avail.

<RadioButton GroupName="radio" Text="One" IsChecked="True">
                    <RadioButton.ImageSource>
                        <FontImageSource
                            FontFamily="FontAwesome"
                            Glyph="{x:Static local:IconFont.GraduationCap}"
                            Color="Black"
                            Size="16"/>
                    </RadioButton.ImageSource>
                </RadioButton>

My preference is to have a simple color property first, then the option to replace the image altogether.

Basic Information

• Version with issue: 4.6-pre4
• Last known good version:
  • Android: 10

[jfversluis]

For the graphic there was ButtonSource which was only implemented for Android, so I removed that for now in #9967 so we can still get this in.

Do we also need a color for checked state and unchecked state? CheckBox has that. Or people can do that with the VSM?

[davidortinau]

I think our default position should be VSM with appropriate states implemented.

[JesseLiberty]

A bit confused: is this fixed with VSM? I need to be able to turn the circle green while leaving the text black. Is that this issue?

[jfversluis]

@JesseLiberty this is not fixed with the VSM. David's remark was about not forgetting the VSM is there and we should take that into account implementing this functionality.

Unassigning myself for now, not sure when and if I will be able to put in the dedicated effort to do this. Feel free to take the PR that is there and iterate on that.

[viktorszekeress]

This issue has been here since April. What happened? I'm on XF 5.0 pre-3 and it's still not there. I don't even understand what author was thinking, when RadioButton was released. Something like, I will provide devs with TextColor, BackgroundColor, BorderColor, but not RadioColor, uhmmm that's okay... no one will want to change that color.

C'mon guys, you should really try to spend couple hours with Flutter. It's impossible you would find such thinking there.

[jfversluis]

@viktorszekeress did you actually try the (new) radiobutton? Or just basing it off this issue? Because looks like me we can style the whole thing, including color nowadays.

[jfversluis]

@hartez can this be closed to that regard?

[viktorszekeress]

@jfversluis I tried RadioButton that is available in XF 5.0 pre-3. It has Content property, which (according to a comment in the code) should accept a string or a View. While string value works OK, there must a bug, because if I put a Label there, it displays "Xamarin.Forms.Label".

Then, there is ControlTemplate property, which I don't want to use, because it will remove all the 'built-in' design and functionality.

All I want is to keep the design, just change the color of the radio indicator. Can you provide me an example of how to do that?

[Cfun1]

@viktorszekeress did you actually try the (new) radiobutton? Or just basing it off this issue? Because looks like me we can style the whole thing, including color nowadays.

@jfversluis I think it is still not possible to do it at Xamarin.Forms level, also it create an issue with the circle not visible under Android >=10 with light theme enabled and a default style. A workaround would be adding <item name="android:colorControlNormal ">#FF4081</item> to Styles.xml.

[jfversluis]

Reading it back it wasn't meant to be snarky, sorry about that :) I just didn't know either. It looks like there are a lot of (new) possibilities now, so I was just wondering. Thanks for the suggestion @Cfun1 !

[Cfun1]

@jfversluis I know you were just wondering, I didn't think/feel you were writing in a snarky way when I have read your message :)

[AdamDiament]

Bump! I also want to be able to style my radio button circle independently of other controls. The workaround adding name="android:colorControlNormal ">#FF4081</item> to styles.xml does indeed work for android, but it also adds this tint color to all editable controls, such as adding an underline to each input element, which I don't want. It's robbing Peter to pay Paul!

[DamienDoumer]

I still have this issue when my app is in dark mode, the radio button's border is white no matter which color I set in the styles.

[TerraNqobile]

I still have this problem when my app is in dark mode, the radio button's are white no matter which color I set in the styles.