[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\<string>	List of string values for title or image source
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.

[Cfun1]

@pictos This issue needs the Label "in-progress".

[hnabbasi]

Hello world! I finally got back to this. I am making some changes to the API and will close the PR currently open in favor of a new one, when ready. I have added Normal Text Color and Selected Text Color to both iOS and Android. Currently running in to Background Color issue on Android that I am working on.

Stay tuned.

[GUOLDEV]

@hnabbasi very nice! I cannot wait to use it in my next project.

[brminnick]

Thanks! However, we are no longer adding new features to Xamarin Community Toolkit, focusing on the .NET MAUI Community Toolkit.

Please open a New Feature Discussion to implement this feature in the .NET MAUI Community Toolkit.

I've posted more information about the Future Of Xamarin Community Toolkit here: https://devblogs.microsoft.com/xamarin/the-future-of-xamarin-community-toolkit/?WT.mc_id=mobile-0000-bramin

[brminnick]

Reopening because it looks like this was approved and a PR was opened before the new feature deadline

[pictos]

Closing this one. If anyone wants this feature please open a proposal in MCT

[GUOLDEV]

Reopening because it looks like this was approved and a PR was opened before the new feature deadline

Hi @brminnick , @pictos closed this PR again, it would be great to have it in XCT 🙏

[hnabbasi]

I will resume working on this for MAUI. Please leave it open if possible 🙏

Get Outlook for Androidhttps://aka.ms/ghei36

---

From: Gustavo Oliveira @.> Sent: Wednesday, November 10, 2021 8:38:14 PM To: xamarin/XamarinCommunityToolkit @.> Cc: Hussain N. Abbasi @.>; Mention @.> Subject: Re: [xamarin/XamarinCommunityToolkit] [Enhancement] SegmentsView control (#385)

Reopening because it looks like this was approved and a PR was opened before the new feature deadline

Hi @brminnickhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbrminnick&data=04%7C01%7C%7Ce9f716a0f6074a8b099f08d9a4bc5003%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637721950976221121%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=8Z4gNJC6kFky5PJRdz0tuz6pb1BYFXXWmjyHn5o1TxA%3D&reserved=0 , @pictoshttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpictos&data=04%7C01%7C%7Ce9f716a0f6074a8b099f08d9a4bc5003%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637721950976231076%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Kqs5YEq2PL3K93an8UYUjOFwP255txMhBiR9nrrRjjc%3D&reserved=0 closed this PR again, it would be great to have it in XCT 🙏

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fxamarin%2FXamarinCommunityToolkit%2Fissues%2F385%23issuecomment-965937862&data=04%7C01%7C%7Ce9f716a0f6074a8b099f08d9a4bc5003%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637721950976231076%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=YPflpE8ChsgvmRJxQj5Ugp8%2Br1nTluZu%2F%2FcKSe7oOhY%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAC436ZHCNFFYC53O7P2Y7HDULMUBNANCNFSM4SG3B3BA&data=04%7C01%7C%7Ce9f716a0f6074a8b099f08d9a4bc5003%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637721950976241037%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=zFojdl8Nb2kCKJkj03sIKBrVPULevJ%2B2k8vm%2FiH1TFk%3D&reserved=0.

[bijington]

@hnabbasi it would be great if this made it to the MAUI toolkit but if you are planning on implementing this for the MAUI toolkit that will need to be done in another repo as mentioned by @brminnick here:

Thanks! However, we are no longer adding new features to Xamarin Community Toolkit, focusing on the .NET MAUI Community Toolkit.

Please open a New Feature Discussion to implement this feature in the .NET MAUI Community Toolkit.

I've posted more information about the Future Of Xamarin Community Toolkit here: https://devblogs.microsoft.com/xamarin/the-future-of-xamarin-community-toolkit/?WT.mc_id=mobile-0000-bramin