Press "Enter" to skip to content

Segmented Bar Control in Xamarin Forms

I have always wanted to create a section bar similar to the one that Facebook mobile app has for showing different content in Facebook groups (Dicussion,Photos,Events,etc.). So decided to create custom segmented bar control for Xamarin Forms, which can be used to filter elements, as a tabbed bar or just to show multiple options or content depending on the selected one.

How to use the Control:

Let's see the code

As you can see here we have seven main properties:

  • Children: A string list of item names
  • ItemSelected: To set the item selected
  • TextColor: To set the TextColor
  • SelectedLineColor: To set the selected line bottom color
  • SelectedTextColor: To set the selected item text color
  • AutoScroll: To scroll automatically and make item visible or not, by default it's true
  • ValueChanged: Is an event that indicates when item selected changes

Also, for scrolling I'm using internally a custom control called ScrollViewWithNotBar which inherits from ScrollView to hide the scroll bar on each platform by using custom renderers for rendering this control on iOS and Android.

You can find the source for the renderers and control here:

For each children I’m using a Label and a BoxView, adding both to a layout to represent each item and finally adding them to a layout inside a scrollview.

You can find the full source code here:
https://github.com/CrossGeeks/SegmentedControlSample

Happy segmenting!

4 Comments

  1. This is great work! Do you have any plans turning it into a NuGet or anything? I'd love some improvements on this like working with Commands instead with Events 🙂

    • Rendy Rendy

      Just added Command support 🙂 Thanks for suggesting.

      About the NuGet I don't think so for now because is such a small component is easier just to copy the code.

  2. robert robert

    Really nice work!

    • Rendy Rendy

      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *