This is a migrated thread and some comments may be shown as answers.

Formatting Segmented Control to look like switch

1 Answer 43 Views
SegmentedControl
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Veteran
Benjamin asked on 29 Aug 2019, 09:09 AM

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

Refer to image

 

 

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 29 Aug 2019, 08:31 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
SegmentedControl
Asked by
Benjamin
Top achievements
Rank 1
Veteran
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or