Xamarin Forms 可扩展列表视图不适用于所有项目

Question

我有一个带有飞入式菜单的移动应用程序，我想在其中折叠和展开一些项目，但不是全部。我尝试了一些列表视图的展开功能，但只能展开和折叠列表中的所有项目。

我的模型是这样的：

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));
}

我在此处添加的菜单项：

 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;

我的列表视图是这样的：

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

我想要的是有组的item应该组，没有组的item不应该组。

有办法吗？

Answer 1

我自己找到了解决方法：我在询问 listview 行的 Id，如果它适合应该展开或折叠的行，我正在用附加行重新加载 listview。也许有人有同样的问题。这是我的代码：

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);
            }

Xamarin Forms 可扩展列表视图不适用于所有项目

Xamarin Forms expandable listview not for all items

listview

xamarin

collapse

expand