Formatting Segmented Control to look like switch

2 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    May 2018

    Posted 29 Aug Link to this post

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

    Refer to image

     

     

  2. Lance | Principal TSE
    Admin
    Lance | Principal TSE avatar
    1043 posts

    Posted 29 Aug Link to this post

    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
Back to Top