xamarin.formsexpanderswipeview

Xamarin Expander, Collectionview, and Swipeview


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

  1. Top 3
  2. Friends
  3. 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.


Solution

  • 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>