Xamarincommunitytoolkit: [Enhancement] SegmentsView control

[hnabbasi]

Summary

Note: Migrating from Xamarin.Forms Issue 6904

Have a segmented control for Xamarin.Forms. iOS has UISegmentedControl, but Android does not. This control will provide native looking segments for Android platform.

iOS | Android
--|--
|
|
||

API

The SegmentsView implements IList<string> with DisplayMode of Text or Image.

SegmentsView:

class SegmentsView : View {}

Properties

SegmentsView

Name | Type | Description
---|---|---
Display Mode | Enum | Display mode is SegmentMode.Text by default and can be set to SegmentMode.Image as an alternative.
Color | Xamarin.Forms.Color | Main color for the control
Items | IList\ ItemsSource | IList | Items source for the values
SelectedItem | object | Selected item
SelectedIndexChanged | Event | Event handler for when a segment is selected. Raises SelectedItemChangedEventArgs with segment and selected index
SelectedIndex | System.Int32 | Index of selected segment

Platform Specific - Android

Name | Type | Description
---|---|---
CornerRadius | double | Corner radius on Android ONLY

Usage

XAML

<SegmentsView SelectedIndexChanged="OnSegmentSelected">
    <SegmentsView.Items>
        <x:String>View A</x:String>
        <x:String>View B</x:String>
    </SegmentsView.Items>
</SegmentsView>

<!-- Using ItemsSource -->

<SegmentsView 
    SelectedIndexChanged="OnSegmentSelected"
    ItemsSource="{Binding values}">
</SegmentsView>

C#

var segments = new SegmentView
    {
        Children = new List<string>
        {
            "View A",
            "View B",
            "View C"
        }
    };
segments.SelectedIndexChanged += OnSegmentSelected;

// handler
void OnSegmentSelected(object sender, SelectedItemChangedEventArgs e){ }

Platforms

iOS

On iOS, this is simply a UISegmentedControl.

Android

On Android, this is be a RadioGroup with a custom RadioButton that renders a simple text or bitmap drawable in image mode.

class FormsSegmentsView : Android.Widget.RadioGroup

UWP

👀 TBD

Who Will Do The Work?

• [x] I have already worked on this and migrating from Xamarin.Forms core per Xamarin team's request
• [ ] Just putting this out there for someone to pick up

Enjoy! 👍

[jBijsterboschNL]

This would be a great addition to the XCT! @hnabbasi , could you also add something like a DisplayValueConverter? So we could potentially provide any kind of object in the ItemsSource and let this converter define the text value or image source value for each segment? If I could be of any assistance, please let me know 😊👌

[hnabbasi]

This would be a great addition to the XCT! @hnabbasi , could you also add something like a DisplayValueConverter? So we could potentially provide any kind of object in the ItemsSource and let this converter define the text value or image source value for each segment? If I could be of any assistance, please let me know 😊👌

Good one. I have a private Display property that I can expose and use for that purpose. Just like the Picker does.

[jBijsterboschNL]

Exactly! That would be awesome! Thanks

[hnabbasi]

Hey @jfversluis @PureWeen,

So, in Xamarin.Forms we had GetNativeImageAsync() extension to ImageSource. And GetNativeImageAsync() calls up the IImageSourceHandler's LoadImageAsync() on all possible sources.

https://github.com/xamarin/Xamarin.Forms/blob/f35ae07a0a8471d255f7a1ebdd51499e10e0a4cb/Xamarin.Forms.Platform.iOS/Renderers/ImageElementManager.cs#L264

I have a need for that handy extension for this control and I am wondering if I should recreate that whole suite of classes so future controls can also use the GetNativeImageAsync() or is there a way we can expose that in Xamarin.Forms.Internals so I can just reuse that? Thoughts

[haavamoa]

This would be awesome! 👌Only thing I don't like with the android version is that it misses animations when you change items :(

[hnabbasi]

This would be awesome! 👌Only thing I don't like with the android version is that it misses animations when you change items :(

Good point 🤔. Maybe I can work on it after I am done migrating over the Android version.