Expandable ListView

[lucacivale]

Hello guys,

I want to propose an idea for a new control. Currently I miss an expandable ListView control. There are already a lot tutorials how to create it and I think it would be nice to have it in the toolkit.
Just google accordion or expandable ListView and you will see what I mean.

[bijington]

@lucacivale would you be willing to provide some more detail or even an API spec for this new control?

[lucacivale]

Yes, this is kind of what I want to achieve.
Do you need any further information to understand my approach?

[TheCodeTraveler]

Do you need any further information to understand my approach?

Yes. Before we can open a New Feature Proposal we need a fully fleshed out proposal describing a new feature in syntactic and semantic detail.

Here is an example Discussion showing a detailed design: https://github.com/CommunityToolkit/Maui/discussions/209

And here is more information on the process flow in the README:

[lucacivale]

@brminnick @bijington
Finally I had some time to think about an API. Since the Accordion and it's items are derrived from CollectionView and Expander it's pretty small. I think this should do the trick to create an cofigurable expandable CollectionView. This is my first proposal, so please let me know if you need more details.

    public class Accordion : CollectionView
    {
        private AccordionItem previousSelectedAccordionItem;

        public object SelectedAccordionItem { get; set; }
        public AccordionItemSelectionMode AccordionItemSelectionMode { get; set; }
        public IList<object> SelectedAccordionItems { get; set; }
        public ICommand SelectedAccordionItemCommand { get; set; }

        public void SelectAccordionItem(object value);
	public void OnAccordionHeaderTapped(AccordionItem accordionItem);

    }

    public class AccordionItem : Expander
    {
        private Grid headerGrid;

        public ICommand IndicatorExpandCollapse {get; set; }
        public View AccordionItemIndicator { get; set; }
    }

    public enum AccordionItemSelectionMode
    {
        None = 0,
        Single = 1,
        Multiple = 2
    }

        <accordion:Accordion x:Name="accordion" SelectionMode="Single" AccordionItemSelectionMode="Multiple">
            <accordion:Accordion.ItemTemplate>
                <DataTemplate>
                    <accordion:AccordionItem>
                        <accordion:AccordionItem.AccordionItemIndicator>
                            <Label Text="Indicator" />
                        </accordion:AccordionItem.AccordionItemIndicator>
                        <accordion:AccordionItem.Header>
                            <StackLayout>
                                <Label Text="Header"/>
                            </StackLayout>
                        </accordion:AccordionItem.Header>
                        <accordion:AccordionItem.ContentTemplate>
                            <DataTemplate>
                                <StackLayout>
                                    <Label Text="Content"/>
                                </StackLayout>
                            </DataTemplate>
                        </accordion:AccordionItem.ContentTemplate>
                    </accordion:AccordionItem>
                </DataTemplate>
            </accordion:Accordion.ItemTemplate>
        </accordion:Accordion>

[bijington]

Thank you for taking the time to provide something. The general approach makes sense although I'm not sure it would be wise to proceed with that approach until we find our whether Expander controls will behave inside ListView or CollectionView as per this page:

https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/expander

The Expander control is known to show unwanted behavior when used in a ListView or CollectionView. At this time we recommend not using a Expander in one of these controls.

[lucacivale]

Totally reasonable. If you have a look into the other comment from Vladislav, you will see that I mentioned this already. As suggested by @pictos we should try to implement it with the controls we already have.

[VladislavAntonyuk]

Can we achieve the result by using CollectionView with a custom template, with Expander?

[pictos]

I'm 90% sure that we can

[TheCodeTraveler]

Let's first try to implement it natively.

If that is not doable for some reason, we can pivot to trying it with CollectionView + Expander.

Here's a sample I made natively for Xamarin.iOS + Xamarin.Android that we may be able to leverage: https://github.com/brminnick/ExpandableList

[pictos]

I know that we can do it with shared controls... I'm a little bit afraid to implement and support a ListView control. I would suggest trying to use the shared layer first and if that isn't doable we discuss about the natively implementation

[lucacivale]

Should we do this even if it's not recommended to use an expander inside a CollectionView or ListView?
https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/expander

[pictos]

@lucacivale, I can't remember what are the issues using expander on list controls, maybe is better to fix them instead of creating a new control. And maybe that works on maui, with the refactoring they are doing related to the controls and layout stuff.

[CliffAgius]

Closed as per the Community Stand-up discussion here: https://youtu.be/N9wMcBP4jtg?t=2889