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: