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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.