Segmentedcontrol text is not visible in iOS

Question

Segmentedcontrol text is not visible in iOS

Anonymous

HI,

I am working on migrated Xamarin forms application to .net MAUI.

I am using segmented control and having renderer for iOS. the segmented control text is not visible in .net MAUI where as it it working fine in Xamarin application. I have tried in new MAUI app. Same behaviour observed.

Please help me on this. Simulator Screenshot - iPhone 14 Pro Max - 2023-12-05 at 18.45.37

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-12-06T05:38:43.1033333+00:00

Do you reuse custom renderers in your MAUI project? Could you provide some code snippets about the renderer so that I can test?

Anonymous

I am using SegementedControl like below

     <SegmentedControl ValueChanged="Handle_ValueChanged" Margin="16,0,16,5" HeightRequest="40" TintColor="{StaticResource GlobalColorTextBranded}" SelectedSegment="0" FontSize="13" FontFamily="SFUIText-Regular">
                <SegmentedControl.Children>
                    <SegmentedControlOption Text="One" />
                    <SegmentedControlOption Text="Two" />
                </SegmentedControl.Children>
            </SegmentedControl>

Below is the SegementedControl.cs

 public class SegmentedControl : View, IViewContainer<SegmentedControlOption>
    {
        public IList<SegmentedControlOption> Children { get; set; }

        public SegmentedControl()
        {
            Children = new List<SegmentedControlOption>();
        }

        public static readonly BindableProperty TintColorProperty = BindableProperty.Create("TintColor", typeof(Color), typeof(SegmentedControl), Colors.Blue);

        public Color TintColor
        {
            get { return (Color)GetValue(TintColorProperty); }
            set { SetValue(TintColorProperty, value); }
        }

        public static readonly BindableProperty DisabledColorProperty = BindableProperty.Create("DisabledColor", typeof(Color), typeof(SegmentedControl), Colors.Gray);

        public Color DisabledColor
        {
            get { return (Color)GetValue(DisabledColorProperty); }
            set { SetValue(DisabledColorProperty, value); }
        }

        public static readonly BindableProperty SelectedTextColorProperty = BindableProperty.Create("SelectedTextColor", typeof(Color), typeof(SegmentedControl), Colors.White);

        public Color SelectedTextColor
        {
            get { return (Color)GetValue(SelectedTextColorProperty); }
            set { SetValue(SelectedTextColorProperty, value); }
        }

        public static readonly BindableProperty FontFamilyProperty = BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(SegmentedControl), "Helvetica");

        public string FontFamily
        {
            get { return (string)GetValue(FontFamilyProperty); }
            set { SetValue(FontFamilyProperty, value); }
        }

        public static readonly BindableProperty FontSizeProperty = BindableProperty.Create(nameof(FontSize), typeof(float), typeof(SegmentedControl), 15f);

        public float FontSize
        {
            get { return (float)GetValue(FontSizeProperty); }
            set { SetValue(FontSizeProperty, value); }
        }

        public static readonly BindableProperty SelectedSegmentProperty = BindableProperty.Create("SelectedSegment", typeof(int), typeof(SegmentedControl), 0);

        public int SelectedSegment
        {
            get
            {
                return (int)GetValue(SelectedSegmentProperty);
            }
            set
            {
                SetValue(SelectedSegmentProperty, value);
            }
        }

        public event EventHandler<ValueChangedEventArgs> ValueChanged;

        [EditorBrowsable(EditorBrowsableState.Never)]
        public void SendValueChanged()
        {
            ValueChanged?.Invoke(this, new ValueChangedEventArgs { NewValue = this.SelectedSegment });
        }
    }

    public class SegmentedControlOption : View
    {
        public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(SegmentedControlOption), string.Empty);

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
    }

    public class ValueChangedEventArgs : EventArgs
    {
        public int NewValue { get; set; }
    }

Below is the SegmentedControlRenderer

 public class SegmentedControlRenderer : Microsoft.Maui.Controls.Handlers.Compatibility.ViewRenderer<SegmentedControl, UISegmentedControl>
    {
        UISegmentedControl nativeControl;

        protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                // Instantiate the native control and assign it to the Control property with
                // the SetNativeControl method

                nativeControl = new UISegmentedControl();

                for (var i = 0; i < Element.Children.Count; i++)
                {
                    nativeControl.InsertSegment(Element.Children[i].Text, i, false);
                }

                nativeControl.Enabled = Element.IsEnabled;
                SetTintColor();
                SetSelectedTextColor();
                SetFont();

                nativeControl.SelectedSegment = Element.SelectedSegment;

                SetNativeControl(nativeControl);
            }

            if (e.OldElement != null)
            {
                // Unsubscribe from event handlers and cleanup any resources

                if (nativeControl != null)
                    nativeControl.ValueChanged -= NativeControl_ValueChanged;
            }

            if (e.NewElement != null)
            {
                // Configure the control and subscribe to event handlers

                nativeControl.ValueChanged += NativeControl_ValueChanged;
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (nativeControl == null || Element == null) return;

            switch (e.PropertyName)
            {
                case "Renderer":
                    Element?.SendValueChanged();
                    break;
                case nameof(Element.SelectedSegment):
                    nativeControl.SelectedSegment = Element.SelectedSegment;
                    Element.SendValueChanged();
                    break;
                case nameof(Element.TintColor):
                    SetTintColor();
                    break;
                case nameof(Element.IsEnabled):
                    nativeControl.Enabled = Element.IsEnabled;
                    SetTintColor();
                    break;
                case nameof(Element.SelectedTextColor):
                    SetSelectedTextColor();
                    break;
                case nameof(Element.FontFamily):
                case nameof(Element.FontSize):
                    SetFont();
                    break;
            }

        }

        void SetTintColor()
        {
            var tintColor = Element.IsEnabled ? Element.TintColor.ToPlatform() : Element.DisabledColor.ToPlatform();

            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
            {
                nativeControl.SelectedSegmentTintColor = tintColor;
            }
            else
            {
                nativeControl.TintColor = tintColor;
            }
        }

        void SetSelectedTextColor()
        {
            var attr = new UIStringAttributes
            {
                ForegroundColor = Element.SelectedTextColor.ToPlatform()
            };
            nativeControl.SetTitleTextAttributes(attr, UIControlState.Selected);
        }

        void SetFont()
        {
            var font = UIFont.FromName(Element.FontFamily, Element.FontSize);

            if (font != null) // Attempting to set the font to null causes a crash
                nativeControl.SetTitleTextAttributes(new UIStringAttributes { Font = font }, UIControlState.Normal);
        }

        void NativeControl_ValueChanged(object sender, EventArgs e)
        {
            Element.SelectedSegment = (int)nativeControl.SelectedSegment;
        }

        protected override void Dispose(bool disposing)
        {
            if (nativeControl != null)
            {
                nativeControl.ValueChanged -= NativeControl_ValueChanged;
                nativeControl.Dispose();
                nativeControl = null;
            }

            try
            {
                base.Dispose(disposing);
            }
            catch
            {
                return;
            }
        }

        /// <summary>
        /// Used for registration with dependency service
        /// </summary>
        public new static void Init()
        {
            var temp = DateTime.Now;
        }
    }

Anonymous

2023-12-08T06:22:18.03+00:00

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) did you get a chance to look at my code?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-12-08T09:26:29.91+00:00

Sorry for the late response, I didn't receive the comment before.

I tested the renderer with MAUI (both .net7 and .net8), and I can reproduce your issue. And I tried to create a custom control using handler, the title will not disappear, and will be the default black color, please refer to the answer.

(There are many bindable properties, I haven't added the mapper, please refer to the official doc and add them)

If you have any other issues, please feel free to let me know.

1 answer

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-12-06T05:38:43.1033333+00:00

Do you reuse custom renderers in your MAUI project? Could you provide some code snippets about the renderer so that I can test?
Anonymous

2023-12-08T06:22:18.03+00:00

@Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) did you get a chance to look at my code?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-12-08T09:26:29.91+00:00

Sorry for the late response, I didn't receive the comment before.

I tested the renderer with MAUI (both .net7 and .net8), and I can reproduce your issue. And I tried to create a custom control using handler, the title will not disappear, and will be the default black color, please refer to the answer.

(There are many bindable properties, I haven't added the mapper, please refer to the official doc and add them)

If you have any other issues, please feel free to let me know.

Answer 1

Hello,

I can reproduce your issue, reusing renderer doesn't work with the code snippets you provide, please create a custom control using handlers, see Create custom controls with .NET MAUI handlers - .NET MAUI | Microsoft Learn

And you can refer to the following code:

Create a handler:

public partial class SegmentedControlHandler
    {
        public static IPropertyMapper<SegmentedControl, SegmentedControlHandler> PropertyMapper = new PropertyMapper<SegmentedControl, SegmentedControlHandler>(ViewHandler.ViewMapper)
        {
           // Create the command mapper according to your control's bindable properties
        };


       public static CommandMapper<SegmentedControl, SegmentedControlHandler> CommandMapper = new(ViewCommandMapper)
        {
            
        };


       public SegmentedControlHandler() : base(PropertyMapper, CommandMapper)
        {
        }
        
    }


#if IOS
    public partial class SegmentedControlHandler : ViewHandler<SegmentedControl, CustomUISegmentedControl>
    {
        protected override CustomUISegmentedControl CreatePlatformView()
        {
            return new CustomUISegmentedControl();
        }


       protected override void ConnectHandler(CustomUISegmentedControl platformView)
        {
            base.ConnectHandler(platformView);

           // Perform any control setup here
        }


       protected override void DisconnectHandler(CustomUISegmentedControl platformView)
        {
            platformView.Dispose();
            base.DisconnectHandler(platformView);
        }


   }
#endif

Create a native custom control derived from UISegmentedControl

public class CustomUISegmentedControl: UISegmentedControl
{
    public CustomUISegmentedControl()
    {// the following code is to simulate the setting title process
        for (var i = 0; i < 2; i++)
        {
            this.InsertSegment(i.ToString(), i, false);

       }
        var attr = new UIStringAttributes
        {
            ForegroundColor = UIColor.SystemPink// but the title always be black
        };
      this.SetTitleTextAttributes(attr, UIControlState.Selected | UIControlState.Normal | UIControlState.Highlighted);
    }
}

Register the handler in the MauiProgram class

handlers.AddHandler(typeof(SegmentedControl), typeof(SegmentedControlHandler));

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Share via

Segmentedcontrol text is not visible in iOS

1 answer

Your answer