question

88769490 avatar image
0 Votes"
88769490 asked MaximAlexeyev-8012 answered

How to change text color in SwitchCell?

I am using a Xamarin.Forms.SwitchCell with TableVIew on an Android application 's settings page. I decided to use black background for my entire app, but get stuck with setting text color on SwitchCell. I've searched for solution and begin to create custom renderer, because I found how is the problem solved in iOS. I've override the GetCellCore method, but I can't reach text property of the cell, the way it was done in iOS solution I found.
121364-image.png

Could you tell me how to achieve the functionality I want?
Thank you in advance.


dotnet-xamarin
image.png (21.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered 88769490 commented

Hi 88769490,

Welcome to our Microsoft Q&A platform!

If you want to create a custom renderer for SwitchCell, maybe this document: Customizing a ViewCell, which creates custom renderer for ViewCell, can help you.

However, if you want to show a custom SwitchCell in TableView, 'cause SwitchCell is composed of Label and Switch, creating a custom SwitchCell via "ViewCell" will be a much easier way.

First, create a "View Cell" and modify it as follows.
MySwitchCell.xaml

 <ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="CustomSwitchCellDemo.MySwitchCell"
           x:Name="MyViewCell">
     <ViewCell.View>
         <StackLayout Orientation="Horizontal">
             <Label Text="{Binding Source={x:Reference MyViewCell}, Path=Text, StringFormat='    {0}'}" 
                    TextColor="{Binding Source={x:Reference MyViewCell}, Path=TextColor}" 
                    VerticalOptions="Center"/>
    
             <Switch IsToggled="{Binding Source={x:Reference MyViewCell}, Path=IsToggled}"
                     VerticalOptions="Center"
                     HorizontalOptions="EndAndExpand"/>
         </StackLayout>
     </ViewCell.View>
 </ViewCell>

Then create extra custom bindable property for the ViewCell.
MySwitchCell.xaml.cs

 public partial class MySwitchCell : ViewCell
 {
     public MySwitchCell()
     {
         InitializeComponent();
     }
    
     public static readonly BindableProperty TextProperty =
         BindableProperty.Create("Text", typeof(string), typeof(ViewCell), null,
             defaultBindingMode: BindingMode.OneWay);
    
     public string Text
     {
         get => GetValue(TextProperty) as string;
         set => SetValue(TextProperty, value);
     }
    
     public static readonly BindableProperty TextColorProperty =
         BindableProperty.Create("TextColor", typeof(Color), typeof(ViewCell), Color.Black,
             defaultBindingMode: BindingMode.OneWay);
    
     public Color TextColor
     {
         get => (Color)GetValue(TextColorProperty);
         set => SetValue(TextColorProperty, value);
     }
    
     public static readonly BindableProperty IsToggledProperty =
         BindableProperty.Create("IsToggled", typeof(bool), typeof(ViewCell), false,
             defaultBindingMode: BindingMode.TwoWay);
    
     public bool IsToggled
     {
         get => (bool)GetValue(IsToggledProperty);
         set => SetValue(IsToggledProperty, value);
     }
 }

Here is the XAML test page.

 <TableView>
     <TableView.Root>
         <TableSection Title="Settings">
             <local:MySwitchCell Text="Dark Mode" TextColor="Blue" IsToggled="True"/>
             <local:MySwitchCell Text="Dark Mode" TextColor="Green" IsToggled="False"/>
             <SwitchCell Text="Allow Spamming" />
         </TableSection>
         <TableSection Title="Performance">
             <SwitchCell Text="Run Super-Fast" OnColor="Yellow" On="True" />
         </TableSection>
     </TableView.Root>
 </TableView>

Regards,
Kyle


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you for support!

0 Votes 0 ·
MaximAlexeyev-8012 avatar image
0 Votes"
MaximAlexeyev-8012 answered

I implemented custom renderer:

 [assembly: ExportRenderer(typeof(Xamarin.Forms.SwitchCell), typeof(Samle.Droid.CustomRenderers.SwitchCellColorRenderer))]
    
 namespace Samle.Droid.CustomRenderers
 {
     public class SwitchCellColorRenderer : SwitchCellRenderer
     {
         protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
         {
             var result = base.GetCellCore(item, convertView, parent, context);
             if (result is SwitchCellView scv)
             {
 // set custom color
                 var textColor = ThemeHelper.GetThemedColor("textColor");
    
                 scv.SetMainTextColor(textColor);
             }
    
             return result;
         }
     }
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.