Formatting Segmented Control to look like switch

[Benjamin]

Would like to know is it possible to style segmented control to look like switch?

Refer to image

 

 

[Lance | Senior Manager Technical Support]

Hi Benjamin,

The SegmentedControl's Segments are distinct sections that strictly follow the native platform's expectations for a segmented control. It doesn't have an "ItemTemplate" approach you can use to get that styling (you'd also face a problem with removing the separator).

What you could try instead is use the RadBorder to make your own control like this because it will give you all the styling features I see in that screenshot. Then use a TapGestureRecognizer for the logic (be sure to make all contents InputTransparent).

Demo

Here's an example with just two RadBorder controls inside a Grid with two Labels:

For interaction logic in the MyCustomSwitch_OnTapped event handler, you can change the Label's TextColor.

Then you'd get this result at runtime:

Extra Credit - Animation

If you want the switch to animate left and right, take a look at Xamarin.Forms TranslateTo method. It works on any Xamarin.Forms view, you can replace the HoriztonalOptions value change with TranslateTo:

InnerBorder.TranslateTo(x-offset, y-offset, duration);

I hope this helps.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik