{"id":37479,"date":"2024-11-01T09:57:54","date_gmt":"2024-11-01T09:57:54","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37479"},"modified":"2024-11-01T11:02:34","modified_gmt":"2024-11-01T11:02:34","slug":"uwp-development-menus-and-toolbars","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37479\/","title":{"rendered":"UWP Development, Menus and Toolbars"},"content":{"rendered":"

The Universal Windows Platform (UWP) development provides various UI elements to help users navigate applications efficiently. Among them, Menu<\/strong> and Toolbar<\/strong> are important components that enhance the user experience of the application. In this article, we will explain in detail how to implement menus and toolbars in UWP and provide related example codes.<\/p>\n

1. Understanding the Concepts<\/h2>\n

Menus and toolbars offer users a quick and easy way to access features of the application. Here, we will look closely at each concept.<\/p>\n

1.1 Menu<\/h3>\n

A menu is a UI element that typically lists specific functions or commands of the application and provides options for the user to select. In Windows, it is often located in the top menu bar, and each menu item can have submenus.<\/p>\n

1.2 Toolbar<\/h3>\n

A toolbar is a collection of buttons and icons that contain frequently used commands. Toolbars are usually placed at the top or side of the application and are designed for quick accessibility. The buttons on the toolbar use icons related to methods to provide functionality intuitively to the user.<\/p>\n

2. Implementing Menus in UWP<\/h2>\n

There are several ways to implement menus in UWP, but the most commonly used method is to use XAML.<\/p>\n

2.1 Creating a Menu Bar<\/h3>\n

In UWP applications, you can easily create menus using the MenuBar<\/code> control. Below is an example of the XAML code for a basic menu bar.<\/p>\n

<Page\n    x:Class=\"MyApp.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n\n    <Grid>\n        <MenuBar>\n            <MenuBarItem Content=\"File\">\n                <MenuFlyout>\n                    <MenuFlyoutItem Header=\"New\" Click=\"New_Click\"\/>\n                    <MenuFlyoutItem Header=\"Open\" Click=\"Open_Click\"\/>\n                    <MenuFlyoutItem Header=\"Save\" Click=\"Save_Click\"\/>\n                <\/MenuFlyout>\n            <\/MenuBarItem>\n            <MenuBarItem Content=\"Edit\">\n                <MenuFlyout>\n                    <MenuFlyoutItem Header=\"Cut\" Click=\"Cut_Click\"\/>\n                    <MenuFlyoutItem Header=\"Copy\" Click=\"Copy_Click\"\/>\n                    <MenuFlyoutItem Header=\"Paste\" Click=\"Paste_Click\"\/>\n                <\/MenuFlyout>\n            <\/MenuBarItem>\n        <\/MenuBar>\n    <\/Grid>\n<\/Page>\n<\/code><\/pre>\n
2.2 Handling Events for Menu Items<\/h3>\n
To handle click events for menu items, you need to add event handlers in the C# code behind. Below is an example of event handlers related to quality control.<\/p>\n
private void New_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to create a new file\n}\n\nprivate void Open_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to open a file\n}\n\nprivate void Save_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to save a file\n}\n\nprivate void Cut_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to cut\n}\n\nprivate void Copy_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to copy\n}\n\nprivate void Paste_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code to paste\n}\n<\/code><\/pre>\n
3. Implementing Toolbars in UWP<\/h2>\n
Next, let’s explore how to implement a toolbar. In UWP, you can easily create toolbars using the CommandBar<\/code> control.<\/p>\n
3.1 Creating a CommandBar<\/h3>\n
Below is an example of the XAML code for a basic CommandBar.<\/p>\n
<CommandBar>\n    <AppBarButton Icon=\"Add\" Label=\"Add\" Click=\"Add_Click\"\/>\n    <AppBarButton Icon=\"Edit\" Label=\"Edit\" Click=\"Edit_Click\"\/>\n    <AppBarButton Icon=\"Delete\" Label=\"Delete\" Click=\"Delete_Click\"\/>\n    <AppBarSeparator \/>\n    <AppBarButton Icon=\"Save\" Label=\"Save\" Click=\"Save_Click\"\/>\n    <AppBarButton Icon=\"Open\" Label=\"Open\" Click=\"Open_Click\"\/>\n<\/CommandBar>\n<\/code><\/pre>\n
3.2 Handling Events for Toolbar Buttons<\/h3>\n
Adding event handlers for button click events is similar to menus. Below is a simple example of event handlers.<\/p>\n
private void Add_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code for add functionality\n}\n\nprivate void Edit_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code for edit functionality\n}\n\nprivate void Delete_Click(object sender, RoutedEventArgs e) {\n    \/\/ Code for delete functionality\n}\n<\/code><\/pre>\n
4. Comparing the Roles of Menus and Toolbars in UWP<\/h2>\n
Menus and toolbars both provide functionalities to users, but their purposes differ. It is advisable to place frequently used features in the toolbar and relatively less used or more complex features in the menu.<\/p>\n
4.1 Accessibility<\/h3>\n
The toolbar provides immediate accessibility, allowing users to utilize desired functionalities with just a button click. In contrast, menus may have a somewhat complex structure but can include more options and features.<\/p>\n
4.2 Space Utilization<\/h3>\n
Toolbars can take up a significant amount of screen space, so care needs to be taken when designing the user interface. On the other hand, menus can list multiple functions in a folder-like structure, making better use of space.<\/p>\n
5. Best Practices<\/h2>\n
Here are some best practices to improve user experience.<\/p>\n
5.1 Maintain Consistency<\/h3>\n
The placement and design of menus and toolbars should maintain consistency to provide familiarity to users.<\/p>\n
5.2 Group Functions<\/h3>\n
Related functionalities should be grouped together so that users can easily find them.<\/p>\n
5.3 Provide User Feedback<\/h3>\n
Providing appropriate feedback upon button clicks enables users to know what actions have been performed.<\/p>\n
Conclusion<\/h2>\n
Menus and toolbars in UWP maximize the user experience of the application and assist users in accessing functionalities easily and quickly. Apply the various examples and best practices presented in this article to design a great user interface.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Universal Windows Platform (UWP) development provides various UI elements to help users navigate applications efficiently. Among them, Menu and Toolbar are important components that enhance the user experience of the application. In this article, we will explain in detail how to implement menus and toolbars in UWP and provide related example codes. 1. Understanding … \ub354 \ubcf4\uae30 “UWP Development, Menus and Toolbars”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-37479","post","type-post","status-publish","format-standard","hentry","category-uwp-programming"],"yoast_head":"\nUWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/37479\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"The Universal Windows Platform (UWP) development provides various UI elements to help users navigate applications efficiently. Among them, Menu and Toolbar are important components that enhance the user experience of the application. In this article, we will explain in detail how to implement menus and toolbars in UWP and provide related example codes. 1. Understanding … \ub354 \ubcf4\uae30 "UWP Development, Menus and Toolbars"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37479\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:57:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:34+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Menus and Toolbars\",\"datePublished\":\"2024-11-01T09:57:54+00:00\",\"dateModified\":\"2024-11-01T11:02:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/\"},\"wordCount\":543,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37479\/\",\"name\":\"UWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:57:54+00:00\",\"dateModified\":\"2024-11-01T11:02:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37479\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37479\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Menus and Toolbars\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/37479\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"The Universal Windows Platform (UWP) development provides various UI elements to help users navigate applications efficiently. Among them, Menu and Toolbar are important components that enhance the user experience of the application. In this article, we will explain in detail how to implement menus and toolbars in UWP and provide related example codes. 1. Understanding … \ub354 \ubcf4\uae30 \"UWP Development, Menus and Toolbars\"","og_url":"https:\/\/atmokpo.com\/w\/37479\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:57:54+00:00","article_modified_time":"2024-11-01T11:02:34+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/37479\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37479\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Menus and Toolbars","datePublished":"2024-11-01T09:57:54+00:00","dateModified":"2024-11-01T11:02:34+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37479\/"},"wordCount":543,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37479\/","url":"https:\/\/atmokpo.com\/w\/37479\/","name":"UWP Development, Menus and Toolbars - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:57:54+00:00","dateModified":"2024-11-01T11:02:34+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37479\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37479\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37479\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Menus and Toolbars"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=37479"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37479\/revisions"}],"predecessor-version":[{"id":37480,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37479\/revisions\/37480"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}