[Windows] Fix for RadioButton BorderColor and BorderWidth not updated at runtime

[SyedAbdulAzeemSF4852]

Issue Details

• The radio button's BorderColor and BorderWidth are not updated at runtime.

Root Cause

• Handling of runtime changes for BorderColor and BorderWidth has not been implemented.

Description of Change

• Implemented the OnPropertyChanged method to check if the changed property is either BorderColor or BorderWidth. If so, then updated the StrokeColor or StrokeThickness of the radio button in the handler accordingly.

Reference :

maui/src/Controls/src/Core/Button/Button.cs

Line 472 in ac01bde

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)

Validated the behaviour in the following platforms

• Windows
• Android
• iOS
• Mac

Issues Fixed

Fixes #15806

Output

Before Fix	After Fix
RadioButtonBorderColorNotChanged.mp4	RadioButtonBorderColorChanged.mp4

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

Could you commit the pending snapshots?

[SyedAbdulAzeemSF4852]

@jsuarezruiz , I have committed the pending snapshots.

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

The default RadioButton border width is -1:

maui/src/Controls/src/Core/BorderElement.cs

Line 17 in 42e2dc1

public static readonly BindableProperty BorderWidthProperty = BindableProperty.Create(nameof(IBorderElement.BorderWidth), typeof(double), typeof(IBorderElement), -1d);

In the sample, set the BorderColor (Normal state) to Red color but, not assign a value to BorderWidth.

The snapshot on any platform not render the border, as expected:

But on Windows:

Could you review it?

[SyedAbdulAzeemSF4852]

@jsuarezruiz , Previously, on Windows, if the BorderWidth was not explicitly specified, it would default to a Thickness object with a value of 3. As a result, the border would appear visible on Windows even though no border width was set, which could lead to inconsistencies in the UI across different platforms. Later it was fixed in this PR.

In addition to setting the BorderColor, I have also included the BorderWidth in the test case to ensure consistent behavior across all platforms. This ensures that the border styling (both color and width) is applied uniformly, making the appearance of the RadioButton consistent regardless of the platform.

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

/rebase

[jsuarezruiz]

/azp run MAUI-UITests-public

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[jsuarezruiz]

I think there are some inconsistencies with how the RadioButton behaves across platforms. In the added sample, the normal and focused states use different colors—Red and DarkCyan, respectively.

• On Android, borders are completely missing, making selection unclear.
• The focus color is applied correctly on Windows, while other platforms do not display it properly.
• Additionally, the RadioButton expands to the full width of its container on most platforms, but Windows does not follow this behavior.

Could you review it? can we align the behavior between platforms?

[SyedAbdulAzeemSF4852]

@jsuarezruiz , The issue of RadioButton focus events not firing on iOS and Android has already been mentioned. Issue - 28163.
However, with my fix, the checked and unchecked states now behave consistently across all platforms by updating the border color and width accordingly.
Regarding the full-width behavior on Windows, this behavior is observed in native radio button also. I have attached a image for reference.