Almost a year ago I wrote an article on how to create a segmented tab control, when using this control on a new project I realized that it is very limited since it doesn’t allow much UI customization. That’s the reason why I decided to create a new control, which basically supports any UI and is flexible to use.
Let’s start
There’s a few things I considered when doing this component:
- Support any UI (For that a good option is to use DataTemplate)
- Support any collection type (A good option is to use IEnumerable)
- Handle selection based on a property (Will use a generic property that can be specified on XAML)
The control will have the following bindable properties:
- ItemSource – Indicates the data list mapped to the control
- ItemSelected – Indicates the item that’s currently selected
- SelectionIndicator – Specifies the name of the property that will handle the selection state
- ItemTemplate – Specify the custom DataTemplate UI
- SelectedItemChanged – Event that fires when selection changes
Also will use a simple IEnumerable extension to return the first element or null if no elements.
Now let’s put it all together:
Let’s use the control
To use it on XAML, you just have to add the control, specify the ItemsSource, the property that will indicate when is selected (SelectionIndicator) and the ItemTemplate (Your custom UI).
I’m using DataTriggers to change the UI whether it is selected.
The ViewModel has just a simple list of a random model I created to test. You can check both codes here:
Check the full source code here.
Happy segmenting! 🙂