[Bug] RadioButton can not be themed, and what can be themed does not work

[Tommigun1980]

Description

1. RadioButton.TextColor does nothing.

Example: TextColor="Red" is ignored in the following:

<RadioButton
    TextColor="Red"
    Content="Some text"
</RadioButton>

2. There is no RadioButton.Color.
   This makes it impossible to theme the radio buttons. I would say this is a bug as it's such an integral feature that surely it missing is not intentional? CheckBox.Color exists so the lack thereof is almost certainly a bug, no?

This is entering blocker territory imho because an unthemeable radio button just isn't usable in production!

Please note that as the radio button color can not be changed and the default is pitch black (at least on iOS), the control doesn't look intractable at all. If you use a radio button next to say a themed checkbox, the radio button looks disabled (or at the very least the colors clash very hard):

Tested on iOS only, don't know if problems happen on Android also.

Steps to Reproduce

See above.

Expected Behavior

RadioButton.TextColor should be honoured.
RadioButton.Color should exist (which should set the color of the actual radio button).

Actual Behavior

Setting RadioButton.TextColor does nothing.
RadioButton.Color doesn't exist.

Basic Information

• Version with issue: XF5.0.0.1931.
• Last known good version: None?
• Platform Target Frameworks:
  • iOS: 14.4

Environment

Show/Hide Visual Studio info

=== Visual Studio Community 2019 for Mac (Preview) ===

Version 8.9 Preview (8.9 build 1451)
Installation UUID: e8ffd2c1-2d62-4985-8519-ce82f983eaf2
	GTK+ 2.24.23 (Raleigh theme)
	Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638)

	Package version: 612000113

=== Mono Framework MDK ===

Runtime:
	Mono 6.12.0.113 (2020-02/4fdfb5b1fd5) (64-bit)
	Package version: 612000113

=== Xamarin Designer ===

Version: 16.9.0.266
Hash: c4842c761
Branch: remotes/origin/c4842c761b9b6a95407f72278ca7fb42f8f7fdf0
Build date: 2021-01-07 06:17:08 UTC

=== Roslyn (Language Service) ===

3.9.0-3.20619.14+df59a33fd9beff9790e01a2a1ab21e4a1e6921b3

=== NuGet ===

Version: 5.8.0.6860

=== .NET Core SDK ===

SDK: /usr/local/share/dotnet/sdk/5.0.102/Sdks
SDK Versions:
	5.0.102
	5.0.101
	5.0.100
	3.1.405
	3.1.404
	3.1.403
MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks

=== .NET Core Runtime ===

Runtime: /usr/local/share/dotnet/dotnet
Runtime Versions:
	5.0.2
	5.0.1
	5.0.0
	3.1.11
	3.1.10
	3.1.9

=== .NET Core 3.1 SDK ===

SDK: 3.1.405

=== Xamarin.Profiler ===

Version: 1.6.15.68
Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler

=== Updater ===

Version: 11

=== Apple Developer Tools ===

Xcode 12.4 (17801)
Build 12D4e

=== Xamarin.Mac ===

Xamarin.Mac not installed. Can't find /Library/Frameworks/Xamarin.Mac.framework/Versions/Current/Version.

=== Xamarin.iOS ===

Version: 14.9.0.27 (Visual Studio Community)
Hash: f4c9327fa
Branch: main
Build date: 2020-11-19 10:57:31-0500

=== Xamarin.Android ===

Version: 11.2.0.0 (Visual Studio Community)
Commit: xamarin-android/d16-9/f908d16
Android SDK: /Users/tommikiviniemi/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		None installed

SDK Tools Version: 26.1.1
SDK Platform Tools Version: 30.0.4
SDK Build Tools Version: 30.0.2

Build Information: 
Mono: 5e9cb6d
Java.Interop: xamarin/java.interop/d16-9@1d382be
ProGuard: Guardsquare/proguard/v7.0.1@912d149
SQLite: xamarin/sqlite/3.32.2@cfe06e0
Xamarin.Android Tools: xamarin/xamarin-android-tools/main@ad80a42

=== Microsoft OpenJDK for Mobile ===

Java SDK: /Users/tommikiviniemi/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.25
1.8.0-25
Android Designer EPL code available here:
https://github.com/xamarin/AndroidDesigner.EPL

=== Android SDK Manager ===

Version: 16.9.0.21
Hash: 57e40ba
Branch: remotes/origin/main
Build date: 2021-01-08 01:57:14 UTC

=== Android Device Manager ===

Version: 16.9.0.14
Hash: 0fdccda
Branch: remotes/origin/main
Build date: 2021-01-08 01:57:36 UTC

=== Build Information ===

Release ID: 809001451
Git revision: cfd15313a6388ef8dada0182e22a058131c46f9d
Build date: 2021-01-15 08:42:21-05
Build branch: release-8.9
Xamarin extensions: cfd15313a6388ef8dada0182e22a058131c46f9d

=== Operating System ===

Mac OS X 10.16.0
Darwin 20.2.0 Darwin Kernel Version 20.2.0
    Wed Dec  2 20:39:59 PST 2020
    root:xnu-7195.60.75~1/RELEASE_X86_64 x86_64

Build Logs

[rachelkang]

Hi, @Tommigun1980 - thanks for submitting this issue.

TextColor appears to be working for me - if you could modify this issue to reflect the behavior you're seeing, however, I can take a closer look Issue13627.zip

As for the proposed RadioButton.Color property, I agree that is an addition worth considering. For now, however, you can refer to these docs for more on customizing the RadioButton appearance! Also relevant to #13578 so feel free to follow there as well

[Tommigun1980]

Hi, @Tommigun1980 - thanks for submitting this issue.

TextColor appears to be working for me - if you could modify this issue to reflect the behavior you're seeing, however, I can take a closer look Issue13627.zip

As for the proposed RadioButton.Color property, I agree that is an addition worth considering. For now, however, you can refer to these docs for more on customizing the RadioButton appearance! Also relevant to #13578 so feel free to follow there as well

Thank you for the reply.

1. Could you test your repro on iOS? I didn't test it on Android at all, maybe it works there.
2. The problem with the current customisation options is that you can't change the color of the actual 'circle' in the radio button at all. It's pitch black on iOS and doesn't look like an intractable component at all.

I would like to use the same color for the radio button as for my check boxes, but it's not possible. So when you use both controls it looks like the black radio button is disabled.

[Tommigun1980]

@rachelkang

This is what

<RadioButton
    TextColor="Red"
    Content="Some text"
</RadioButton>

looks like on iOS:

[Tommigun1980]

@rachelkang

This is a radio button next to a checkbox:

If you mix and match them on a page, the radio buttons look disabled, as you can't edit the circle's color (or at the very least they clash very hard).

[rachelkang]

@Tommigun1980 I had tested it on iOS as well, although I didn't share the screenshot earlier:

Again, if you could modify the sample project I attached above to reflect the behavior you're experiencing, we may be able to take a closer look!

---

As for the radio button color - yes, I understand what you're saying. As I've mentioned, there's a related issue for it already open #13578 and in the meantime, you can use a ControlTemplate to customize the RadioButton appearance as you wish, as per the docs also linked in my last comment. Please take a look, as that seems to be the best solution for now!

[Tommigun1980]

Hi @rachelkang and thanks for the reply!

Please find attached a modified repro project where the issue happens:
Issue13627.zip

I added a global color style for labels, which seems to "leak" into the radio button. It is absolutely essential to support global label styles in conjunction with a check box in a real-life app.

(I have a faint recollection of reporting this exact bug earlier and that it got resolved, but it is very much possible it was some other component and I'm just misremembering.)

[Tommigun1980]

@rachelkang Tbh I still don't think that defining a control template for a radio button is enough, as I want a native control to be used on platforms where one is available. If I defined a control template just to color it, I'd lose the native look and feel on platforms that support radio buttons natively. It also feels like extreme overkill to define the entire radio button's visual hierarchy just to be able to color it. Coloring components is such an absolutely essential feature that I don't see much use for controls that can't be coloured tbh. Radio button is also the only component in XF that can't be coloured (to the best of my knowledge).

So as it stands the options are to go with a pitch black radio button, or go through a complex process that loses the native look and feel on supported platforms. Given the choice I can't decide which is worse so I'd still very much appreciate the ability to just color it. I honestly see it as an absolutely mandatory feature for the control to be usable in a real-world application.

Thank you again.

[BruceHaley]

My problem was on the Android side. The radio buttons were black. They were practically invisible against my nearly black page background. The offered page reference was of no value, as it required radically changing the look and feel of my app. It sure would be nice if one could directly set the button color.

I found a workaround: Changing the theme from "Theme.AppCompat.Light.DarkActionBar" to "Theme.AppCompat.DayNight" caused the buttons to render in a light color that contrasted nicely against my black page. That change was in the Android file styles.xml. The theme "Theme.AppCompat.NoActionBar" also works. Hope this helps someone.

I just saw #10320 which suggests setting values for item name="colorControlNormal" and "colorControlActivated" and "colorControlHighlight" in styles.xml can also address this problem. Apparently all of this carries the side effect of tinting widgets and/or editable controls.

The workaround has the additional side effect of putting an underline in Entry controls. The underline can be removed using Xamarin Community Toolkit and the lines

xmlns:tool="http://xamarin.com/schemas/2020/toolkit"
...
<Entry.Effects>
    <tool:RemoveBorderEffect />
</Entry.Effects>

as described here.