{"id":37553,"date":"2024-11-01T09:58:29","date_gmt":"2024-11-01T09:58:29","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37553"},"modified":"2024-11-01T11:02:16","modified_gmt":"2024-11-01T11:02:16","slug":"uwp-development-developing-uwp-mvvm-apps","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37553\/","title":{"rendered":"UWP Development, Developing UWP MVVM Apps"},"content":{"rendered":"<p><body><\/p>\n<p>In recent years, cross-platform development has become increasingly important alongside various platforms, and UWP (Universal Windows Platform) development is gaining attention. UWP is a platform for developing apps that run on Windows 10 and later versions, providing advanced APIs and tools to help developers deliver better user experiences. In this article, we will detail how to develop apps using the UWP MVVM pattern and clarify concepts through example code.<\/p>\n<h2>UWP and MVVM Pattern<\/h2>\n<p>The MVVM (Model-View-ViewModel) pattern is a design pattern used to separate the UI and business logic, making it very useful in UWP app development. Let\u2019s look at each component of the MVVM pattern:<\/p>\n<ul>\n<li><strong>Model<\/strong>: Includes data and business logic. This is where interactions with the database and API calls usually take place.<\/li>\n<li><strong>View<\/strong>: Refers to the UI that is displayed to the user. The UI is defined using XAML.<\/li>\n<li><strong>ViewModel<\/strong>: Acts as a mediator between the view and the model. It communicates the model&#8217;s data to the view through data binding and passes user input from the view to the model.<\/li>\n<\/ul>\n<h3>Advantages of UWP MVVM Architecture<\/h3>\n<ul>\n<li>Maintainability: The separation of UI and logic makes it easier to maintain the code.<\/li>\n<li>Testability: The ViewModel can be tested, making unit testing easier.<\/li>\n<li>Reusability: Components of ViewModel and Model can be reused.<\/li>\n<\/ul>\n<h2>Preparing to Develop UWP MVVM Apps<\/h2>\n<p>To develop UWP MVVM apps, you need to install Visual Studio. It is also recommended to use the latest version of Visual Studio that includes the SDK for UWP development.<\/p>\n<p>Once Visual Studio installation is complete, follow these steps to create a new UWP project:<\/p>\n<ol>\n<li>Launch Visual Studio.<\/li>\n<li>From the File menu, select &#8216;New&#8217; &gt; &#8216;Project&#8217;.<\/li>\n<li>Select UWP and choose &#8216;Blank App (UWP)&#8217;, then specify the project name.<\/li>\n<\/ol>\n<h2>Creating the MVVM Structure<\/h2>\n<p>After the project is created, you will set up the MVVM structure. First, create the following folder structure:<\/p>\n<pre>\n\/MyUwpApp\n|--- \/Models\n|--- \/ViewModels\n|--- \/Views\n<\/pre>\n<h3>Defining the Model<\/h3>\n<p>The model contains the data structures and business logic that the app will use. Let\u2019s create a simple &#8216;Person&#8217; model.<\/p>\n<pre>\nnamespace MyUwpApp.Models\n{\n    public class Person\n    {\n        public string Name { get; set; }\n        public int Age { get; set; }\n    }\n}\n<\/pre>\n<h3>Defining the ViewModel<\/h3>\n<p>The ViewModel acts as a connector between the model and the view. Create a &#8216;MainViewModel&#8217; to manage the list of people to be displayed in the user interface.<\/p>\n<pre>\nusing System.Collections.ObjectModel;\nusing System.ComponentModel;\nusing MyUwpApp.Models;\n\nnamespace MyUwpApp.ViewModels\n{\n    public class MainViewModel : INotifyPropertyChanged\n    {\n        private ObservableCollection&lt;Person&gt; _people;\n        public ObservableCollection&lt;Person&gt; People\n        {\n            get { return _people; }\n            set \n            {\n                _people = value;\n                OnPropertyChanged(nameof(People));\n            }\n        }\n\n        public MainViewModel()\n        {\n            People = new ObservableCollection&lt;Person&gt;\n            {\n                new Person { Name = \"John Doe\", Age = 30 },\n                new Person { Name = \"Admiral Yi Sun-sin\", Age = 40 }\n            };\n        }\n\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        protected void OnPropertyChanged(string propertyName)\n        {\n            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n    }\n}\n<\/pre>\n<h3>Defining the View<\/h3>\n<p>In UWP, XAML is primarily used to define the user interface. Modify MainPage.xaml to connect it to the ViewModel.<\/p>\n<pre>\n<page mc:ignorable=\"d\" x:class=\"MyUwpApp.Views.MainPage\" xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\" xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\" xmlns:local=\"using:MyUwpApp.ViewModels\" xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n\n    <page.datacontext>\n        <local:mainviewmodel><\/local:mainviewmodel>\n    <\/page.datacontext>\n\n    <grid background=\"{ThemeResource ApplicationPageBackgroundThemeBrush}\">\n        <listview itemssource=\"{Binding People}\">\n            <listview.itemtemplate>\n                <datatemplate>\n                    <stackpanel>\n                        <textblock fontsize=\"24\" text=\"{Binding Name}\"><\/textblock>\n                        <textblock fontsize=\"18\" text=\"{Binding Age}\"><\/textblock>\n                    <\/stackpanel>\n                <\/datatemplate>\n            <\/listview.itemtemplate>\n        <\/listview>\n    <\/grid>\n<\/page>\n<\/pre>\n<h2>Running the App<\/h2>\n<p>Now that everything is ready, let&#8217;s run the app. Click the run button in Visual Studio to execute the app locally. A list of people should be displayed, along with each person&#8217;s name and age.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, we explored the basics of UWP app development and how to use the MVVM design pattern, along with a simple example code to build a real application. Using the MVVM pattern enables easier code maintenance and increases testability. There are many features that can be implemented with UWP, so continue to learn and evolve.<\/p>\n<h2>Additional Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/uwp\/\">UWP Official Documentation<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/dotnet\/desktop\/wpf\/getting-started\/?view=netdesktop-6.0\">WPF MVVM Example<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dotnet\/WindowsCommunityToolkit\">Windows Community Toolkit<\/a><\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In recent years, cross-platform development has become increasingly important alongside various platforms, and UWP (Universal Windows Platform) development is gaining attention. UWP is a platform for developing apps that run on Windows 10 and later versions, providing advanced APIs and tools to help developers deliver better user experiences. In this article, we will detail how &hellip; <a href=\"https:\/\/atmokpo.com\/w\/37553\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;UWP Development, Developing UWP MVVM Apps&#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-37553","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, Developing UWP MVVM Apps - \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\/37553\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Developing UWP MVVM Apps - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In recent years, cross-platform development has become increasingly important alongside various platforms, and UWP (Universal Windows Platform) development is gaining attention. UWP is a platform for developing apps that run on Windows 10 and later versions, providing advanced APIs and tools to help developers deliver better user experiences. In this article, we will detail how &hellip; \ub354 \ubcf4\uae30 &quot;UWP Development, Developing UWP MVVM Apps&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37553\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:58:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:16+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=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Developing UWP MVVM Apps\",\"datePublished\":\"2024-11-01T09:58:29+00:00\",\"dateModified\":\"2024-11-01T11:02:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/\"},\"wordCount\":502,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37553\/\",\"name\":\"UWP Development, Developing UWP MVVM Apps - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:58:29+00:00\",\"dateModified\":\"2024-11-01T11:02:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37553\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37553\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Developing UWP MVVM Apps\"}]},{\"@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, Developing UWP MVVM Apps - \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\/37553\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Developing UWP MVVM Apps - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In recent years, cross-platform development has become increasingly important alongside various platforms, and UWP (Universal Windows Platform) development is gaining attention. UWP is a platform for developing apps that run on Windows 10 and later versions, providing advanced APIs and tools to help developers deliver better user experiences. In this article, we will detail how &hellip; \ub354 \ubcf4\uae30 \"UWP Development, Developing UWP MVVM Apps\"","og_url":"https:\/\/atmokpo.com\/w\/37553\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:58:29+00:00","article_modified_time":"2024-11-01T11:02:16+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":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/37553\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37553\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Developing UWP MVVM Apps","datePublished":"2024-11-01T09:58:29+00:00","dateModified":"2024-11-01T11:02:16+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37553\/"},"wordCount":502,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37553\/","url":"https:\/\/atmokpo.com\/w\/37553\/","name":"UWP Development, Developing UWP MVVM Apps - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:58:29+00:00","dateModified":"2024-11-01T11:02:16+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37553\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37553\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37553\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Developing UWP MVVM Apps"}]},{"@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\/37553","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=37553"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37553\/revisions"}],"predecessor-version":[{"id":37554,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37553\/revisions\/37554"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}