Following on from my last post about iOS 13, I’ve since had the need to update various apps that have a segmented control. I’ve been using Alexander Reyes cool control Segmented Control Plugin for Xamarin.Forms (I believe there are a few others out there as well) to get keep everything nicely in XAML and working on Android as well, that doesn’t have the same sort of control that iOS does natively.

This has been working extremely nicely for years, until I started targeting iOS 13 and I got the following on all apps:

While the unselected options are legible, the selected one is just a white bar.

Thankfully, with a little bit of work in a custom renderer this can be quite simply solved to make your segmented controls a prettier in iOS 13 with Xamarin.Forms.

Firstly, using a third party library makes things a little trickier with custom renderers. This is very simply solved however by just creating a dumb control that inherits the library one.

Add the library to your projects

Then create a control that inherits from it

C#

From here, we need to set the new iOS 13 properties to style things in the customer renderer to whatever colour palette the app has.

C#

Then it’s as simple as binding the properties (or just setting globally in the renderer from styles as I find is actually more common) on the control and we have a much nicer looking segmented control.

XAML

And that’s it. Without too much fuss things are styled nicely and we can on with the job at hand with segmented controls looking nice again, if not nicer with the new animated effects.

As usual, if you want the entire working example, please have a look here on GitHub.