How to change text color in SwitchCell?

Деян Цонев 21 Reputation points
2021-08-07T11:20:06.907+00:00

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.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,303 questions
0 comments No comments
{count} votes

Accepted answer
  1. Kyle Wang 5,531 Reputation points
    2021-08-09T05:55:16.93+00:00

    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 additional answer

Sort by: Most helpful
  1. Max Alexeyev 1 Reputation point
    2021-11-07T03:55:12.737+00:00

    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;
            }
        }
    
    0 comments No comments