🕓 5 MIN Hot Design is here, …
WinUI contains classes for menus belonging to a Window and context menus attached to other controls. Users will be familiar with menus in traditional desktop applications and mobile devices. Unlike previous Windows APIs, the WinUI MenuBar and MenuBarItem do not support data binding, so you must build your menu tree from MenuFlyoutItem, MenuFlyoutSubItem, and MenuFlyoutSeparator, either in code or directly in your XAML.
The two types of items cover all the menu scenarios since the MenuFlyoutSubItem can contain additional menu items. A static menu might look something like this:
Sometimes, you may want to populate a menu dynamically from a data source rather than hard-coding them. In this case, there is a little more work to achieve the desired results. There are a couple of ways you could present a grouped collection in a menu – you could choose to display each group using a MenuFlyoutSubItem and have the items nested below this.
While technically, you can continue to nest multiple levels with the MenuFlyoutSubItem, in practice, more than two layers become challenging to navigate, especially on smaller screens. Given a single-level grouped collection, you can write code like the following to populate a top-level MenuBarItem from the groups:
var groupedBirds = Birds.GroupBy(x => x.Family);
foreach (var group in groupedBirds)
{
var menuGroup = new MenuFlyoutSubItem() { Text = group.Key };
GroupedMenu.Items.Add(menuGroup);
foreach (var bird in group)
{
var item = new MenuFlyoutItem() { Text = bird.CommonName };
item.DataContext = bird;
menuGroup.Items.Add(item);
}
}
This produces a menu which looks like this on Android and Windows, respectively:
The code above works but adds some unnecessary noise to the menu (especially when the groups themselves are not actionable and there are not too many items in total). Instead, we can modify this code to display all the items at the same level but with separators between the groups.
var groupedBirds = Birds.GroupBy(x => x.Family);
var template = Resources["MenuItemTemplate"] as DataTemplate;
foreach (var group in groupedBirds)
{
foreach (var bird in group)
{
var item = template.LoadContent() as MenuFlyoutItem;
item.DataContext = bird;
SeparatedMenu.Items.Add(item);
}
// add separator after last item in group
SeparatedMenu.Items.Add(new MenuFlyoutSeparator());
}
if (SeparatedMenu.Items.Count > 0)
{
// remove trailing separator (if items added)
SeparatedMenu.Items.RemoveAt(SeparatedMenu.Items.Count - 1);
}
Adding the original bird item as the DataContext of the menuFlyoutItem allows us to get the items when responding to a menu selection. The other reason is to use a template populated from the data item.
It’s perfectly possible to fully create the menu items from code. However, if you want to make minor changes to the appearance at a later stage, you have to dig into the code. In the example above, we added a custom Icon to the menu items, and we may decide in the future to change this. A solution to provide clearer separation is to create a DataTemplate in XAML, which defines the appearance of the MenuFlyoutItem given the specific data-bound item. For our bird example, we’ve used the following named template, which we can refer to from the code when creating new menu items there are not too many items in total). Instead, we can modify this code to display all the items at the same level but with separators between the groups.
While the MenuFlyoutItem doesn’t contain a lot of visual customization, it may change in the future, and the template could be adapted accordingly. The separated groups rendered with a template defining a custom item look like this on Android and Windows devices:
For those new to Uno Platform – it allows for creation of pixel-perfect, single-source C# and XAML apps which run natively on Windows, iOS, Android, macOS, Linux and Web via WebAssembly. It offers Figma integration for design-development handoff, and a set of extensions to bootstrap your projects. Uno Platform is free and Open Source (Apache 2.0) and available on GitHub.
You can view the full class details of MenuBarItem and related classes in the WinUI documentation. All of the MenuBar/MenuFlyout classes are supported in Uno 4.6.
We’ve made the code sample available here. Explore our samples and discover how you can Get Started with Uno Platform to build your desktop, mobile, and web apps.
🕓 2 MIN Need a last-minute holiday …
Uno Platform
360 rue Saint-Jacques, suite G101,
Montréal, Québec, Canada
H2Y 1P5
USA/CANADA toll free: +1-877-237-0471
International: +1-514-312-6958
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch