• Home
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Flyy Tech
  • Home
  • Apple
  • Applications
    • Computers
    • Laptop
    • Microsoft
  • Security
  • Smartphone
  • Gaming
  • Entertainment
    • Literature
    • Cooking
    • Fitness
    • lifestyle
    • Music
    • Nature
    • Podcasts
    • Travel
    • Vlogs
  • Camera
  • Audio
No Result
View All Result
  • Home
  • Apple
  • Applications
    • Computers
    • Laptop
    • Microsoft
  • Security
  • Smartphone
  • Gaming
  • Entertainment
    • Literature
    • Cooking
    • Fitness
    • lifestyle
    • Music
    • Nature
    • Podcasts
    • Travel
    • Vlogs
  • Camera
  • Audio
No Result
View All Result
Flyy Tech
No Result
View All Result

Learning To Use Menu Bar in .NET MAUI

flyytech by flyytech
September 1, 2022
Home Applications
Share on FacebookShare on Twitter


Today in our .NET MAUI explorations, let’s see how to use one of the primary tools for any app—a menu bar!

In your day to day, you usually use desktop applications containing a menu bar that offers a set of options to execute certain actions. This is super useful for you as a user, and that’s why today we will learn how to do it in .NET MAUI in a very
simple and fast way! Let’s see! 🤓

It’s a container that presents a set of menus in a horizontal row, at the top of a desktop application.

Before we learn how to do it in code, let’s look at a general example of what menu bar hierarchies might look like, which I’ll then show you how to build step by step.

First level is MenuBarItem (File, Locations, View). Second level is MenuFlyoutSubItem (Change Location). Third level is MenuFlyoutItem (Redmond USA, London UK, Berlin DE)

In the example above, you can see a complete hierarchy of a menu bar. However, it is important to know that your menu bar does not necessarily have to have these specific items—you can add as many as you need!

⚠ The image of the Menu Bar on which we base our project to explain its structure was obtained from the official documentation.


Lots of .NET MAUI content coming to DevReach


Let’s break it down into steps and learn how to apply each of the levels shown in the previous image!

To start the implementation of a Menu Bar, add the MenuBarItems tags to your Page. In this case, we will use a ContentPage, as shown below:

<ContentPage.MenuBarItems>
  
</ContentPage.MenuBarItems>

⚠ Make sure you open and close the tags correctly.

Now, let’s work with the MenuBarItem, which is an object that represents the top-level menus added to the menu bar. You must add the tags that represent it within the previous step. I’ll show you how to do it below, but first
let’s understand its visual structure more closely and I want to highlight some points to consider for its implementation.

➖ Understand its visual structure.

MenuBarItem shows File, Locations, View. Under Locations are two options, Change Location and Add Location. Under Change Location are Redmond USA, London UK, Berlin DE

Let’s see the points to consider for its implementation:

➖ First of all, you must know the properties you need to use with the MenuBarItem, which are the following:

🔹 Text: Receives a string value and is the title of the menu.

🔹 IsEnabled: Receives a boolean value and is responsible for establishing whether the menu is enabled or not. You just have to send this parameter if you want to disable a menu. Otherwise it’s not necessary because the default
value is True.

➖ Implementation in code:

<MenuBarItem Text="File">
    <!-- Add here the explanation of the next step.-->
</MenuBarItem>
<!-- Add here all the MenuBarItem you need.-->

⚠ Important:

  • Add these same tags for each menu you need.
  • All of these properties are BindableProperty, which means that they can be targets of data bindings and styled.

MenuFlyoutSubItem allows you to nest menu items at a second level of the menu hierarchy. This receives a Text, which, as in the previous step, is the Title of the menu.

To identify its structure, let’s see it in the following image:

The MenuFlyoutSubItem items are Change Location and Add Location under Locations.

➖ Implementation in code:

<MenuFlyoutSubItem Text="Change Location"> <!-- Add here the explanation of the next step.--> </MenuFlyoutSubItem> <!-- Add here all the MenuFlyoutSubItem you need.-->

Finally, we arrive at the MenuFlyoutItem. As we saw in the image of the example main hierarchy, this allows us to add items to our menu bar at a third level (sub-menu), before its implementation. Let’s look at its visual structure!

MenuFlyoutItem items are the cities under Change Location

➖ Learn some of the properties you need to use with the MenuFlyoutItem:

🔹 Text: Receives a string value and is the title of the menu.

🔹 Command: You can send a Command so that once the user clicks on the action it is executed.

🔹 Clicked: Or you can also add an event so that once the user clicks on the action it is executed.

➖ Implementation in code:

<MenuFlyoutItem Text="Redmond, USA"
			    Command="{Binding YourCommand}"
			    CommandParameter="Redmond" />

<!-- Add here all the MenuFlyoutItem you need.-->

⚠ Each MenuFlyoutItem defines a menu item that executes an ICommand when selected.

All Together

And done!! 🎊 From now on, you can create your own menu bar!! 😍

Finally, the set of steps explained above, summarized should look like the following code block:

<ContentPage ...>
  <ContentPage.MenuBarItems>
    <MenuBarItem Text="File">
    	    <MenuFlyoutSubItem Text="Change Location">    
		    <MenuFlyoutItem Text="Redmond, USA"		    
		    Command="{Binding YourCommand}"		    
		    CommandParameter="Redmond" />		    
		    <!-- Add here all the MenuFlyoutItem you need.-->	    
	    </MenuFlyoutSubItem>	    
	    <!-- Add here all the MenuFlyoutSubItem you need.-->    
    </MenuBarItem>
    <!-- Add here all the MenuBarItem you need.-->
  </ContentPage.MenuBarItems>
</ContentPage>

Before We Wrap Up

Let’s learn about some limitations of Mac Catalyst:

.NET MAUI Mac Catalyst applications are limited to 50 menu items, so if you try to add more, your application will throw an exception.

The good news is that by implementing the code block that I will give you below, you can add additional menu items to the initial 50 allowed. For this, you just have to paste the following code in your AppDelegate:

[Export("MenuItem50: ")]
internal void MenuItem50(UICommand uICommand)
{
    uICommand.SendClicked();
}

And that’s all! 😎

Conclusion

We have reached the end of this post, I hope it has been very useful to you and that you liked it! 💚💕

See you later! 🙋‍♀️

References: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/menubar



Source_link

flyytech

flyytech

Next Post
iPhone 14 Price Hike Could Be Lower Than Expected

iPhone 14 Price Hike Could Be Lower Than Expected

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended.

Intel’s CEO Fires Back at 3nm Delay Rumors

Intel’s CEO Fires Back at 3nm Delay Rumors

February 23, 2023
LockBit Hands Ransomware Decryptor to Kids’ Hospital

LockBit Hands Ransomware Decryptor to Kids’ Hospital

January 3, 2023

Trending.

Elden Ring best spells 1.08: Tier lists, sorceries, incantations, and locations

Elden Ring best spells 1.08: Tier lists, sorceries, incantations, and locations

January 14, 2023
Image Creator now live in select countries for Microsoft Bing and coming soon in Microsoft Edge

Image Creator now live in select countries for Microsoft Bing and coming soon in Microsoft Edge

October 23, 2022
How to View Ring Doorbell on a Roku TV

How to View Ring Doorbell on a Roku TV

December 20, 2022
Review: Zoom ZPC-1

Review: Zoom ZPC-1

January 28, 2023
Allen Parr’s false teaching examined. Why you should unfollow him.

Allen Parr’s false teaching examined. Why you should unfollow him.

September 24, 2022

Flyy Tech

Welcome to Flyy Tech The goal of Flyy Tech is to give you the absolute best news sources for any topic! Our topics are carefully curated and constantly updated as we know the web moves fast so we try to as well.

Follow Us

Categories

  • Apple
  • Applications
  • Audio
  • Camera
  • Computers
  • Cooking
  • Entertainment
  • Fitness
  • Gaming
  • Laptop
  • lifestyle
  • Literature
  • Microsoft
  • Music
  • Podcasts
  • Review
  • Security
  • Smartphone
  • Travel
  • Uncategorized
  • Vlogs

Site Links

  • Home
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions

Recent News

DPReview TV: The end of DPReview: Digital Photography Review

DPReview TV: The end of DPReview: Digital Photography Review

March 21, 2023
Developed countries lag emerging markets in cybersecurity readiness

Developed countries lag emerging markets in cybersecurity readiness

March 21, 2023

Copyright © 2022 Flyytech.com | All Rights Reserved.

No Result
View All Result
  • Home
  • Apple
  • Applications
    • Computers
    • Laptop
    • Microsoft
  • Security
  • Smartphone
  • Gaming
  • Entertainment
    • Literature
    • Cooking
    • Fitness
    • lifestyle
    • Music
    • Nature
    • Podcasts
    • Travel
    • Vlogs

Copyright © 2022 Flyytech.com | All Rights Reserved.

What Are Cookies
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT