Xamarin Expander, Collectionview, and Swipeview

Question

I am struggling with the design of a UI that has three distinct groupings:

Top 3
Friends
All contacts

Subscribed and All contacts are going to be big lists. My first pass at this is as follows:

    <Expander>
    <Expander.Header>
        <Label
            FontAttributes="Bold"
            FontSize="Medium"
            Text="Top 3" />
    </Expander.Header>
    <Expander.Content>
        <CollectionView ItemsSource="{Binding MyContacts}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <SwipeView>
                            <SwipeView.LeftItems>
                                <SwipeItem BackgroundColor="Aquamarine" Text="Un Favorite" />
                            </SwipeView.LeftItems>
                            <SwipeView.Content>
                                <Label Text="{Binding DisplayName}" />
                            </SwipeView.Content>
                        </SwipeView>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Expander.Content>
</Expander>
<Expander>
    <Expander.Header>
        <Label
            FontAttributes="Bold"
            FontSize="Medium"
            Text="Friends" />
    </Expander.Header>
    <Expander.Content>
        <CollectionView ItemsSource="{Binding UppContacts}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <SwipeView>
                            <SwipeView.LeftItems>

                                <SwipeItem BackgroundColor="Brown" Text="Fav" />

                            </SwipeView.LeftItems>
                            <SwipeView.Content>
                                <Label Text="{Binding DisplayName}" />
                            </SwipeView.Content>
                        </SwipeView>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Expander.Content>
</Expander>

But I can't seem to put more than one expander in a page. When I do one at a time - all works as expected.

use a TabbedPage, or use segmented control to create the illusion of a tabbed interface. Cramming too much UI into a mobile screen is usually a bad idea — Jason, Dec 16 '20 at 02:08
Put expander into another layout under [BindableLayout.ItemTemplate](https://stackoverflow.com/questions/62573006/xamarin-forms-how-to-set-a-list-of-items-as-the-expander-child) — Shaw, Dec 16 '20 at 02:15
@Timothy **I can't seem to put more than one expander in a page**, you mean that you just can add one Expander in page? I can add more than one Expander in a page with the latest xamarin.forms version. — Cherry Bu - MSFT, Dec 16 '20 at 05:57
it would help if u can draw it out in paint how u actually planning to show up the ui — Ronak Shetiya, Dec 16 '20 at 11:54
As well as my answer below it is also worth noting that the Expander control has been moved out into the Xamarin Community Toolkit. So you may want to look into using that. It can be found here: https://github.com/xamarin/XamarinCommunityToolkit/ — Gaz Winter, Dec 18 '20 at 14:49

Gaz Winter · Accepted Answer · 2020-12-18T14:41:17.503

When you say you cannot have more than one expander on the page, do you mean that you are getting an error message, saying something along the lines of "The property "Content" has been set more than once"?

If that's the case then you can resolve this simply, by wrapping all of the expanders inside a container.

For example:

<StackLayout>
        <Expander>
            <Expander.Header>
                <Label
                    FontAttributes="Bold"
                    FontSize="Medium"
                    Text="Top 3" />
            </Expander.Header>
            <Expander.Content>
                <CollectionView ItemsSource="{Binding MyContacts}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <SwipeView>
                                    <SwipeView.LeftItems>
                                        <SwipeItem BackgroundColor="Aquamarine" Text="Unfavorite" />
                                    </SwipeView.LeftItems>
                                    <SwipeView.Content>
                                        <Label Text="{Binding DisplayName}" />
                                    </SwipeView.Content>
                                </SwipeView>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Expander.Content>
        </Expander>
        <Expander>
            <Expander.Header>
                <Label
                    FontAttributes="Bold"
                    FontSize="Medium"
                    Text="Friends" />
            </Expander.Header>
            <Expander.Content>
                <CollectionView ItemsSource="{Binding UppContacts}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <SwipeView>
                                    <SwipeView.LeftItems>

                                        <SwipeItem BackgroundColor="Brown" Text="Fav" />

                                    </SwipeView.LeftItems>
                                    <SwipeView.Content>
                                        <Label Text="{Binding DisplayName}" />
                                    </SwipeView.Content>
                                </SwipeView>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Expander.Content>
        </Expander>
    </StackLayout>

Xamarin Expander, Collectionview, and Swipeview

1 Answers1