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!
8 Comments
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 š
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.
Really nice work!
Thanks!
Hi I really like your posts ,I am looking forward to your articles all the time.
Any suggestions how you would approach a segmented bar where you would have to show a list of customers when you click one button and a totally different screen when you click on the other button. I bit like the tabs but obviously not a tab. Many thanks.
Good day! Thank you for your work, very convenient control. There are several questions:
1. How can the list items be centered on the center of the screen if there are fewer of them, for example, less than four (by default they are aligned to the left, which does not meet the visual requirements of my application)?
2. How to implement attenuation – that is, smoothly hiding list items around the edges of the control when they are scrolling and hiding?
Thanks in advance for the answers. Successes in the development!
Good day! Thank you for your work, very convenient control. There are several questions:
1. How can the list items be centered on the center of the screen if there are fewer of them, for example, less than four (by default they are aligned to the left, which does not meet the visual requirements of my application)?
2. How to implement attenuation – that is, smoothly hiding list items around the edges of the control when they are scrolling and hiding?
Thanks in advance for the answers. Successes in the development!
Hi
Trying to use the SelectedItemChangedCommand but would like an example as I can not get it to work.
tia
Comments are closed.