ios.netmaui
How can I fix flyout menu shows more on maui ios app
I am working on a MAUI app. On Android, the menus are working very well as expected but on iOS, starting from the fifth menu to the last, when I click on any of the menus, it takes me to a page "More" which now lists menus starting from the fifth menu.
var flyoutItem = new FlyoutItem()
{
Title = "Dashboard",
Route = nameof(ParentDashboard),
FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
Items =
{
new ShellContent
{
Title = "Dashboard",
FlyoutIcon = "home",
ContentTemplate = new DataTemplate(typeof(ParentDashboard)),
},
new ShellContent
{
Title = "Teachers",
FlyoutIcon = "parents",
ContentTemplate = new DataTemplate(typeof(Teachers))
},
new ShellContent
{
Title = "Messages",
FlyoutIcon = "chat",
ContentTemplate = new DataTemplate(typeof(RecentMessagesPage)),
},
new ShellContent
{
Title = "Events & Notices",
FlyoutIcon = "events",
ContentTemplate = new DataTemplate(typeof(Events))
},
new ShellContent
{
Title = "Pickup/Dropoff",
FlyoutIcon = "car",
ContentTemplate = new DataTemplate(typeof(PickupDropoffRequestsPage)),
},
new ShellContent
{
Title = "Attendance",
FlyoutIcon = "homework",
ContentTemplate = new DataTemplate(typeof(ParentStudentAttendancePage))
},
new ShellContent
{
Title = "Homework",
FlyoutIcon = "homework",
ContentTemplate = new DataTemplate(typeof(StudentHomeworks))
},
new ShellContent
{
Title = "Notifications",
FlyoutIcon = "notifications",
ContentTemplate = new DataTemplate(typeof(NotificationsPage))
},
new ShellContent
{
Title = "My School",
FlyoutIcon = "school",
ContentTemplate = new DataTemplate(typeof(SchoolProfile))
},
new ShellContent
{
Title = "Settings",
FlyoutIcon = "settings",
ContentTemplate = new DataTemplate(typeof(SettingsPage))
},
}
};
Can anybody help with this please?
Starting from the “Pickup/Dropoff” menu down to “Settings”, it takes me to “More” page
See screenshots below
Solution
Yea, so after a long time, I was able to find a way around the problem. What I did was to create a new instance of FlyoutItem with 5 items in each of the FlyoutItem
See my working code below:
if (App.UserInfo.ActiveRole.ToLower() == "parent")
{
var flyoutItem = new FlyoutItem()
{
Title = "Dashboard",
Route = nameof(ParentDashboard),
FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
Items =
{
new ShellContent
{
Title = "Dashboard",
FlyoutIcon = "home",
ContentTemplate = new DataTemplate(typeof(ParentDashboard)),
Route = "ParentDashboard"
},
new ShellContent
{
Title = "Teachers",
FlyoutIcon = "parents",
ContentTemplate = new DataTemplate(typeof(Teachers)),
Route = "Teachers"
},
new ShellContent
{
Title = "Messages",
FlyoutIcon = "chat",
ContentTemplate = new DataTemplate(typeof(RecentMessagesPage)),
Route = "RecentMessagesPage"
},
new ShellContent
{
Title = "Events & Notices",
FlyoutIcon = "events",
ContentTemplate = new DataTemplate(typeof(Events)),
Route = "Events"
},
//new ShellContent
//{
// Title = "Pickup/Dropoff",
// FlyoutIcon = "car",
// ContentTemplate = new DataTemplate(typeof(PickupDropoffRequestsPage)),
// Route = "PickupDropoffRequestsPage"
//},
}
};
var flyoutItem2 = new FlyoutItem()
{
Title = "Dashboard",
Route = nameof(ParentStudentAttendancePage),
FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
Items =
{
new ShellContent
{
Title = "Pickup/Dropoff",
FlyoutIcon = "car",
ContentTemplate = new DataTemplate(typeof(PickupDropoffRequestsPage)),
Route = "PickupDropoffRequestsPage"
},
new ShellContent
{
Title = "Attendance",
FlyoutIcon = "homework",
ContentTemplate = new DataTemplate(typeof(ParentStudentAttendancePage)),
Route = "ParentStudentAttendancePage"
},
new ShellContent
{
Title = "Homework",
FlyoutIcon = "homework",
ContentTemplate = new DataTemplate(typeof(StudentHomeworks)),
Route = "StudentHomeworks"
},
//new ShellContent
//{
// Title = "Exam Results",
// FlyoutIcon = "exam",
// ContentTemplate = new DataTemplate(typeof(ParentStudentResultPage))
//},
new ShellContent
{
Title = "Notifications",
FlyoutIcon = "notifications",
ContentTemplate = new DataTemplate(typeof(NotificationsPage)),
Route = "NotificationsPage"
},
}
};
var flyoutItem3 = new FlyoutItem()
{
Title = "Dashboard",
Route = nameof(SchoolProfile),
FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
Items =
{
new ShellContent
{
Title = "My School",
FlyoutIcon = "school",
ContentTemplate = new DataTemplate(typeof(SchoolProfile)),
Route = "SchoolProfile"
},
new ShellContent
{
Title = "Settings",
FlyoutIcon = "settings",
ContentTemplate = new DataTemplate(typeof(SettingsPage)),
Route = "SettingsPage"
},
}
};
//if (!AppShell.Current.Items.Any(x => x.Route == nameof(PickupDropOff)))
//{
// AppShell.Current.Items.Add(new ShellContent
// {
// Route = nameof(PickupDropOff),
// ContentTemplate = new DataTemplate(typeof(PickupDropOff)),
// FlyoutItemIsVisible = false
// });
//}
if (!AppShell.Current.Items.Contains(flyoutItem) && !AppShell.Current.Items.Contains(flyoutItem2) && !AppShell.Current.Items.Contains(flyoutItem3))
{
AppShell.Current.Items.Add(flyoutItem);
AppShell.Current.Items.Add(flyoutItem2);
AppShell.Current.Items.Add(flyoutItem3);
if (Preferences.ContainsKey("NavigationID"))
{
string id = Preferences.Get("NavigationID", "");
if (id == "notification")
{
await AppShell.Current.GoToAsync(nameof(NotificationsPage));
}
Preferences.Remove("NavigationID");
}
await Shell.Current.GoToAsync($"//{nameof(ParentDashboard)}");
}
//if (!AppShell.Current.Items.Contains(flyoutItem2))
//{
// AppShell.Current.Items.Add(flyoutItem2);
// if (Preferences.ContainsKey("NavigationID"))
// {
// string id = Preferences.Get("NavigationID", "");
// if (id == "notification")
// {
// await AppShell.Current.GoToAsync(nameof(NotificationsPage));
// }
// Preferences.Remove("NavigationID");
// }
// await Shell.Current.GoToAsync($"//{nameof(ParentDashboard)}");
//}
}