1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfRadioButton theme doesn't seem complete

SfRadioButton theme doesn't seem complete

The SfRadioButton control doesn't seem to have great theme support. The rest of the Syncfusion controls seem to "just work" but I need to make an application theme to make SfRadioButton visually fit in.

I created the following theme to make it fit in with the default Syncfusion controls. In other words, I don't have to do anything like this for any of the other controls (like SfTextInputLayout, SfListView, SfTabView, etc.)


Here is the style I use:

```

<Style TargetType="buttons:SfRadioButton" x:Key="SfRadioButtonStyle">

    <Setter Property="BackgroundColor" Value="Transparent" />

    <Setter Property="TextColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}"/>

    <Setter Property="UncheckedColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}" />

</Style>

```


Here is a summary of the main issues:

  1. The background is opaque.
  2. The TextColor does not update with dark/light mode on iOS.
  3. The UncheckedColor does not update with dark/light mode on iOS.

10 Replies
YP Yuvaraj Palanisamy Syncfusion Team March 31, 2022 09:23 AM UTC

Hi Trevor Balcom,


We have checked the reported problem “SfRadioButton with theme does not work in iOS” and it was working fine at our end for both Dark and Light theme. Please find the code example below.


CodeSnippet:

<ContentPage.Resources>

    <ResourceDictionary>

      

        <Style TargetType="buttons:SfRadioButton" x:Key="SfRadioButtonStyle">

            <Setter Property="BackgroundColor" Value="Transparent" />

            <Setter Property="TextColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}"/>

            <Setter Property="UncheckedColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}" />

        </Style>

    </ResourceDictionary>

</ContentPage.Resources>

 

<Grid Margin="50">

. . .

   

    <buttons:SfRadioButton Text="SfRadioButton" Grid.Row="1" Style="{StaticResource SfRadioButtonStyle}"/>

 

</Grid>


We have attached the sample for your reference. Please find the sample from the below attachment.


Output:


If still you are facing the problem kindly revert us the modified sample with issue reproduced state, video representation along with the following details which will be helpful to provide the better solution at the earliest

* Xamarin.Forms version

* Syncfusion package version

* Target deployment device details


Regards,

Yuvaraj.


Attachment: RadioButtonTheme_94561239.zip

TB Trevor Balcom March 31, 2022 01:18 PM UTC

The SfRadioButton default style is inconsistent with the rest of the Syncfusion controls. The workaround "SfRadioButtonStyle" I posted should be handled internally by Syncfusion. In other words: the SfRadioButton should automatically switch to light/dark mode while using the Syncfusion provided dark theme on iOS. Why is SfRadioButton the only control I have to manually style for it to appear correctly (on iOS)?


If you put a plain SfRadioButton on a page, start the iOS simulator, then switch to system dark mode you will not see the text of the SfRadioButton, and the SfRadioButton background will be solid white against a black page. The check mark is the only part of the SfRadioButton that remains visible.


Xamarin.Forms 5.0.0.2337

Syncfusion 19.4.0.56

iPhone 13 mini iOS 15.2 simulator from Windows running Visual Studio 2022


YP Yuvaraj Palanisamy Syncfusion Team April 1, 2022 01:01 PM UTC

Hi Trevor Balcom,


We will validate and update the complete details on 5th April, 2022.


Regards,

Yuvaraj.


TB Trevor Balcom April 4, 2022 02:19 PM UTC

Does SfRadioButton inherit from the default Xamarin.Forms RadioButton? The problems I'm describing here are also present in the default Xamarin.Forms RadioButton on Android.


YP Yuvaraj Palanisamy Syncfusion Team April 5, 2022 05:39 PM UTC

Hi Trevor Belcam,


We have used the native RadioButton on Android. We would like to suggest that use Style for dark mode and light mode theme using the common style for SfRadioButton. Please find the code example below.


CodeSnippet:

<Style TargetType="buttons:SfRadioButton">

 

      <Setter Property="BackgroundColor" Value="Transparent" />

 

      <Setter Property="TextColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}"/>

 

      <Setter Property="UncheckedColor" Value="{x:AppThemeBinding Dark=WhiteSmoke, Light=DimGray}" />

 

</Style>

 

. . .

 

<buttons:SfRadioButton Text="SfRadioButton" />


Meanwhile we are validating this, and we will update you with complete details on or before 7th April 2022.


Regards,

Yuvaraj.


YP Yuvaraj Palanisamy Syncfusion Team April 8, 2022 12:50 PM UTC

Hi Trevor Belcam,


We need some more time to validate this and we will update you with complete details on or before 12th April 2022. We appreciate your patience until then.


Regards,

Yuvaraj.


YP Yuvaraj Palanisamy Syncfusion Team April 18, 2022 01:08 AM UTC

Hi Trevor Belcam,

Our development still working on this and we will update you with complete details on or before 19th April 2022.


Regards,

Yuvaraj.


YP Yuvaraj Palanisamy Syncfusion Team April 19, 2022 03:49 PM UTC

Hi Trevor Balcom,


We have confirmed this as a bug. Please find the feedback link from the below.


Feedback: https://www.syncfusion.com/feedback/34276/sfradiobutton-textcolor-and-uncheckedcolor-are-not-visible-in-dark-theme


We will fix the issue and the fix will be included in our weekly nuGet release which is expected to be roll out on 3rd May 2022. We appreciate your patience until then. We will let you know once it gets rolled out.        


Regards,

Yuvaraj.


YP Yuvaraj Palanisamy Syncfusion Team May 8, 2022 07:37 AM UTC

Hi Trevor Balcom,


Sorry for the delay.


Due to some test cases pending, we are not including the fix for this issue in the May 3rd, 2022 weekly NuGet release. We will include the fix for the issue in our upcoming Volume 1 SP release, which is scheduled to be published on May 11, 2022. We will let you know when it gets rolled out.


Regards,

Yuvaraj.


YP Yuvaraj Palanisamy Syncfusion Team May 16, 2022 04:53 AM UTC

Hi Trevor Balcom,


We are glad to announce that our Essential Studio 2022 Volume 1 Service Pack Release V20.1.0.55 is rolled out and is available for download under the following link.


https://www.syncfusion.com/forums/174993/essential-studio-2022-volume-1-service-pack-release-v20-1-0-55-is-available-for-download


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Yuvaraj.


Loader.
Up arrow icon