{"id":37455,"date":"2024-11-01T09:57:42","date_gmt":"2024-11-01T09:57:42","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37455"},"modified":"2024-11-01T11:02:39","modified_gmt":"2024-11-01T11:02:39","slug":"uwp-development-dialogs-and-flyouts","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37455\/","title":{"rendered":"UWP Development, Dialogs and Flyouts"},"content":{"rendered":"<p>In Windows Universal Platform (UWP) development, Dialogs and Flyouts are very important elements for user interaction. Since UWP applications can provide a consistent experience across various devices, it is essential to learn and effectively utilize these UI components. This article will detail the concepts, architecture, usage, and example code of dialogs and flyouts.<\/p>\n<h2>1. Understanding Dialogs in UWP<\/h2>\n<p>A dialog is typically a modal window that allows the user to make important decisions or enter information. UWP provides various types of dialogs:<\/p>\n<ul>\n<li><strong>Message Dialog:<\/strong> Displays a simple message and allows the user to click either a confirmation or cancellation button.<\/li>\n<li><strong>Input Dialog:<\/strong> A dialog that can receive input from the user.<\/li>\n<li><strong>Content Dialog:<\/strong> A custom dialog that can include a complex user interface.<\/li>\n<\/ul>\n<h3>1.1 Example of Using Message Dialog<\/h3>\n<p>Message Dialog can typically be used with the following code:<\/p>\n<pre><code>using Windows.UI.Popups;\n\nprivate async void ShowMessageDialog()\n{\n    var messageDialog = new MessageDialog(\"Hello, UWP!\", \"Welcome\");\n    messageDialog.Commands.Add(new UICommand(\"OK\", new UICommandInvokedHandler(CommandInvokedHandler)));\n    await messageDialog.ShowAsync();\n}\n\nprivate void CommandInvokedHandler(IUICommand command)\n{\n    \/\/ Logic when the user clicks OK\n}<\/code><\/pre>\n<h3>1.2 Example of Using Input Dialog<\/h3>\n<p>Input Dialog is designed to accept user input. However, since it is not provided by default in UWP, it needs to be implemented on its own:<\/p>\n<pre><code>private async Task<string> ShowInputDialog(string title, string defaultText)\n{\n    TextBox inputTextBox = new TextBox { Text = defaultText };\n    ContentDialog inputDialog = new ContentDialog\n    {\n        Title = title,\n        Content = inputTextBox,\n        PrimaryButtonText = \"OK\",\n        SecondaryButtonText = \"Cancel\"\n    };\n\n    var result = await inputDialog.ShowAsync();\n    return result == ContentDialogResult.Primary ? inputTextBox.Text : null;\n}<\/code><\/pre>\n<h3>1.3 Example of Using Content Dialog<\/h3>\n<p>Content Dialog provides a dialog with more complex UI. Here\u2019s an example of using a Content Dialog:<\/p>\n<pre><code>private async void ShowContentDialog()\n{\n    Grid dialogGrid = new Grid();\n    TextBlock txtHeading = new TextBlock() { Text = \"Do you want to save changes?\", FontSize = 24 };\n    \n    dialogGrid.Children.Add(txtHeading);\n    ContentDialog contentDialog = new ContentDialog\n    {\n        Title = \"Save Changes\",\n        Content = dialogGrid,\n        PrimaryButtonText = \"Yes\",\n        SecondaryButtonText = \"No\"\n    };\n\n    var result = await contentDialog.ShowAsync();\n    if (result == ContentDialogResult.Primary)\n    {\n        \/\/ Logic when the user clicks 'Yes'\n    }\n}<\/code><\/pre>\n<h2>2. Understanding Flyouts in UWP<\/h2>\n<p>A Flyout is a non-modal UI that provides users with available tasks or options. It can be thought of as a popup that appears when the user clicks on a specific element. Flyouts can take various forms and give users the ability to show or hide them.<\/p>\n<h3>2.1 Example of Using Flyouts<\/h3>\n<p>The simplest way to implement a Flyout is to define it in XAML:<\/p>\n<pre><code>&lt;Button Content=\"Show Flyout\"&gt;\n    &lt;Button.Flyout&gt;\n        &lt;FlyoutBase&gt;\n            &lt;TextBlock Text=\"Option 1\" \/&gt;\n            &lt;TextBlock Text=\"Option 2\" \/&gt;\n        &lt;\/FlyoutBase&gt;\n    &lt;\/Button.Flyout&gt;\n&lt;\/Button&gt;<\/code><\/pre>\n<h3>2.2 Controlling Flyout Behavior<\/h3>\n<p>You can also control Flyouts in code. Here\u2019s how to programmatically display a Flyout:<\/p>\n<pre><code>&lt;Button x:Name=\"FlyoutButton\" Content=\"Open Flyout\"\/&gt;\n\nprivate void FlyoutButton_Click(object sender, RoutedEventArgs e)\n{\n    FlyoutBase flyout = new FlyoutBase();\n    flyout.Content = new TextBlock { Text = \"This is a flyout\" };\n    FlyoutBase.ShowAt(FlyoutButton);\n}<\/code><\/pre>\n<h3>2.3 Handling Events in Flyouts<\/h3>\n<p>Here\u2019s how to handle options in a Flyout:<\/p>\n<pre><code>&lt;Button Content=\"Show Flyout\"&gt;\n    &lt;Button.Flyout&gt;\n        &lt;FlyoutBase&gt;\n            &lt;MenuFlyoutItem Text=\"Option 1\" Click=\"Option1_Click\"\/&gt;\n            &lt;MenuFlyoutItem Text=\"Option 2\" Click=\"Option2_Click\"\/&gt;\n        &lt;\/FlyoutBase&gt;\n    &lt;\/Button.Flyout&gt;\n&lt;\/Button&gt;\n\nprivate void Option1_Click(object sender, RoutedEventArgs e)\n{\n    \/\/ Logic when Option 1 is selected\n}\n\nprivate void Option2_Click(object sender, RoutedEventArgs e)\n{\n    \/\/ Logic when Option 2 is selected\n}<\/code><\/pre>\n<h2>3. Differences Between Dialogs and Flyouts<\/h2>\n<p>The main difference between dialogs and flyouts lies in usability. Dialogs are generally used when user input or decisions are required and are modal windows. In contrast, flyouts are non-modal and provide various options for the user to select from. Dialogs interrupt the flow of the UI, while flyouts are designed to function in non-intrusive ways.<\/p>\n<h2>4. Utilization in Real Applications<\/h2>\n<p>When developing UWP applications, properly using dialogs and flyouts can significantly enhance user experience. For example:<\/p>\n<ul>\n<li>After form submission, a Message Dialog can be used to require confirmation before saving information.<\/li>\n<li>In a settings menu, a Flyout can be used to offer various setting options.<\/li>\n<\/ul>\n<h3>4.1 Example Application<\/h3>\n<p>For instance, imagine you are developing a feedback form application. In this case, after the user submits the form, you could display a confirmation dialog, and when they click the settings icon, you could show a flyout with various setting options. Here is the code to implement such an application:<\/p>\n<pre><code>private async void SubmitFeedback()\n{\n    var dialogResult = await ShowMessageDialog();\n    if (dialogResult == \"OK\")\n    {\n        \/\/ Logic to submit feedback\n    }\n}\n\nprivate void ShowSettingsFlyout()\n{\n    FlyoutBase flyout = new FlyoutBase();\n    flyout.Content = new TextBlock { Text = \"Feedback Settings\" };\n    FlyoutBase.ShowAt(settingsButton);\n}<\/code><\/pre>\n<h2>5. Conclusion<\/h2>\n<p>In this article, we have explored the concepts, comparisons, and usage of dialogs and flyouts in UWP in detail. Dialogs and flyouts play a crucial role in improving user experience, and by utilizing them appropriately, you can develop better applications. Through various examples, we\u2019ve demonstrated how dialogs and flyouts can be used in real applications. Using modern UI frameworks will help make your applications more intuitive and user-friendly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Windows Universal Platform (UWP) development, Dialogs and Flyouts are very important elements for user interaction. Since UWP applications can provide a consistent experience across various devices, it is essential to learn and effectively utilize these UI components. This article will detail the concepts, architecture, usage, and example code of dialogs and flyouts. 1. Understanding &hellip; <a href=\"https:\/\/atmokpo.com\/w\/37455\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;UWP Development, Dialogs and Flyouts&#8221;<\/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-37455","post","type-post","status-publish","format-standard","hentry","category-uwp-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UWP Development, Dialogs and Flyouts - \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\/37455\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Dialogs and Flyouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In Windows Universal Platform (UWP) development, Dialogs and Flyouts are very important elements for user interaction. Since UWP applications can provide a consistent experience across various devices, it is essential to learn and effectively utilize these UI components. This article will detail the concepts, architecture, usage, and example code of dialogs and flyouts. 1. Understanding &hellip; \ub354 \ubcf4\uae30 &quot;UWP Development, Dialogs and Flyouts&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37455\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:57:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:39+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\/37455\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37455\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Dialogs and Flyouts\",\"datePublished\":\"2024-11-01T09:57:42+00:00\",\"dateModified\":\"2024-11-01T11:02:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37455\/\"},\"wordCount\":527,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37455\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37455\/\",\"name\":\"UWP Development, Dialogs and Flyouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:57:42+00:00\",\"dateModified\":\"2024-11-01T11:02:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37455\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37455\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37455\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Dialogs and Flyouts\"}]},{\"@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, Dialogs and Flyouts - \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\/37455\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Dialogs and Flyouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In Windows Universal Platform (UWP) development, Dialogs and Flyouts are very important elements for user interaction. Since UWP applications can provide a consistent experience across various devices, it is essential to learn and effectively utilize these UI components. This article will detail the concepts, architecture, usage, and example code of dialogs and flyouts. 1. Understanding &hellip; \ub354 \ubcf4\uae30 \"UWP Development, Dialogs and Flyouts\"","og_url":"https:\/\/atmokpo.com\/w\/37455\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:57:42+00:00","article_modified_time":"2024-11-01T11:02:39+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\/37455\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37455\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Dialogs and Flyouts","datePublished":"2024-11-01T09:57:42+00:00","dateModified":"2024-11-01T11:02:39+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37455\/"},"wordCount":527,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37455\/","url":"https:\/\/atmokpo.com\/w\/37455\/","name":"UWP Development, Dialogs and Flyouts - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:57:42+00:00","dateModified":"2024-11-01T11:02:39+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37455\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37455\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37455\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Dialogs and Flyouts"}]},{"@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\/37455","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=37455"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37455\/revisions"}],"predecessor-version":[{"id":37456,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37455\/revisions\/37456"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}