Xamarin Forms expandable listview not for all items

Issue

I have a mobile app with a fly-in menu where I want to collapse and expand some items but not all. I tried a bit with the expand function of the listview but was only able to expand and collapse all items in the list.

My model looks like this:

public enum MenuItemType
{
    Home,
    Offers,
    Assortment,
    Cart,
    Wishlists,
    Orders,
    ProductCombinations,
    Cases,
    UserProfile,
    UserNotifications,
    Sustainability,
    OurStores,
    AppOverview
}

public class NavMenuItem 
{
    public MenuItemType Id { get; set; }
    public string Title { get; set; }
    public string IconSource { get; set; }
    public string Group { get; set; }
    public ImageSource Image => ImageSource.FromResource(string.Format("EY365OCMobileApp.Images.{0}", IconSource));
}

My menu items I add here:

 menuItems = new List<NavMenuItem>
        {
            new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png" },
            new NavMenuItem {Id = MenuItemType.Offers, Title="Offerings", IconSource = "offeringsicon.png", Group = "Shopping"},
            new NavMenuItem {Id = MenuItemType.Assortment, Title="Assortment", IconSource = "assortmenticon.png" },
            new NavMenuItem {Id = MenuItemType.Cart, Title="Your Cart", IconSource = "carticon.png", Group = "Shopping" },
            new NavMenuItem {Id = MenuItemType.Orders, Title="Your Orders", IconSource = "yourordericon.png", Group = "Shopping"},
            new NavMenuItem {Id = MenuItemType.Wishlists, Title="Your Wishlists", IconSource = "wishlisticon.png", Group = "Shopping"},
            new NavMenuItem {Id = MenuItemType.ProductCombinations, Title="Product Combinations", IconSource="combinations.png", Group = "Shopping"},
            new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png"},
            new NavMenuItem {Id = MenuItemType.UserProfile, Title="Your Profile", IconSource="yourprofileicon.png" },
            new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png"},
            new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png"},
            new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png"},
            new NavMenuItem {Id = MenuItemType.AppOverview, Title="App Overview", IconSource="appoverview.png"},
        };
        ListViewMenu.ItemsSource = menuItems;

And my listview loks like this:

<ListView x:Name="ListViewMenu"
                      HasUnevenRows="True"
                      HorizontalOptions="Start"
                      GroupDisplayBinding="{Binding Group}"
                      IsGroupingEnabled="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Frame HasShadow="True"
                               CornerRadius="10"
                               BorderColor="#282828"
                                   Padding="1">
                                <StackLayout>
                                    <Grid Padding="10" >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="0.2*"/>
                                            <ColumnDefinition Width="0.8*"/>
                                     </Grid.ColumnDefinitions>
                                    <Image Source="{Binding Image}" Grid.Column="0" WidthRequest="30" HeightRequest="30"/>
                                    <Label Text="{Binding Title}" FontSize="Small" Grid.Column="1" TextColor="black"/>
                                    </Grid>
                                </StackLayout>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>

What I want is that the items which have a group should be groups, but the other items without a group should not be grouped.

Is there a way to do this?

Solution

Found a workaround for this myself: I am asking the Id of the listview line and if it fits the line which should be expanded or collapsed I am reloading the listview with the additional lines. Maybe somebody has the same problem. Here is my code:

public bool IsExpanded { get; set; } = false;
    public bool IsExpanded13 { get; set; } = false;
    public  List<NavMenuItem> menuItems;
    public MenuPage()
    {
        InitializeComponent();

        // Add items to the menu
        menuItems = new List<NavMenuItem>
        {
            new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png", BackgroundColor= Color.DarkGray },
            new NavMenuItem {Id = MenuItemType.Shopping, Title="Shopping", IconSource="carticon.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
            new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png", BackgroundColor= Color.DarkGray},
            new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png", BackgroundColor= Color.DarkGray},
            new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png", BackgroundColor= Color.DarkGray},
            new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png", BackgroundColor= Color.DarkGray},
            new NavMenuItem {Id = MenuItemType.Settings, Title="Settings", IconSource="settings.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
        };
        ListViewMenu.ItemsSource = menuItems;

        // Initialize the selected item
        ListViewMenu.SelectedItem = menuItems[0];

        // Handle the ItemSelected event to navigate to the
        // selected page
        ListViewMenu.ItemSelected += async (sender, e) =>
        {
            if (e.SelectedItem == null)
                return;
            
            var id = (int)((NavMenuItem)e.SelectedItem).Id;
            if(id == 1 && !IsExpanded)
            {

                menuItems = new List<NavMenuItem>
                {
                    new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Shopping, Title="Shopping", IconSource="carticon.png", BackgroundColor= Color.DarkGray, ExColSource="collapse.png"},
                    new NavMenuItem {Id = MenuItemType.Offers, Title="Offerings", IconSource = "offeringsicon.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.Assortment, Title="Assortment", IconSource = "assortmenticon.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.Cart, Title="Your Cart", IconSource = "carticon.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.Orders, Title="Your Orders", IconSource = "yourordericon.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.Wishlists, Title="Your Wishlists", IconSource = "wishlisticon.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.ProductCombinations, Title="Product Combinations", IconSource="combinations.png", BackgroundColor=Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Settings, Title="Settings", IconSource="settings.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                };
                IsExpanded = true;
                ListViewMenu.ItemsSource = menuItems;
                return;
            }
            else if (id == 1 && IsExpanded)
            {
                menuItems = new List<NavMenuItem>
                {
                    new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Shopping, Title="Shopping", IconSource="carticon.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                    new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Settings, Title="Settings", IconSource="settings.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                };
                IsExpanded = false;
                ListViewMenu.ItemsSource = menuItems;
                return;
            }
            else if (id == 14 && !IsExpanded13)
            {
                menuItems = new List<NavMenuItem>
                {
                    new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Shopping, Title="Shopping", IconSource="carticon.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                    new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Settings, Title="Settings", IconSource="settings.png", BackgroundColor= Color.DarkGray, ExColSource="collapse.png"},
                    new NavMenuItem {Id = MenuItemType.UserProfile, Title="Your Profile", IconSource="yourprofileicon.png", BackgroundColor= Color.LightYellow, MarginCode=5},
                    new NavMenuItem {Id = MenuItemType.AppOverview, Title="App Overview", IconSource="appoverview.png", BackgroundColor= Color.LightYellow, MarginCode=5 },
                };
                IsExpanded13 = true;
                ListViewMenu.ItemsSource = menuItems;
                return;
            }
            else if (id == 14 && IsExpanded13)
            {
                menuItems = new List<NavMenuItem>
                {
                    new NavMenuItem {Id = MenuItemType.Home, Title="Home", IconSource="homeicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Shopping, Title="Shopping", IconSource="carticon.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                    new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions", IconSource = "questionsproblemsicon.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.UserNotifications, Title="Your Notifications", IconSource="notification.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Sustainability, Title="Sustainability", IconSource="sustainability.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.OurStores, Title="Our Stores", IconSource="store.png", BackgroundColor= Color.DarkGray},
                    new NavMenuItem {Id = MenuItemType.Settings, Title="Settings", IconSource="settings.png", BackgroundColor= Color.DarkGray, ExColSource="expand.png"},
                };
                IsExpanded13 = false;
                ListViewMenu.ItemsSource = menuItems;
                return;
            }
            else
            {
                await RootPage.NavigateFromMenu(id);
            }

Answered By - Ricardo Jahn