{"id":37481,"date":"2024-11-01T09:57:55","date_gmt":"2024-11-01T09:57:55","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37481"},"modified":"2024-11-01T11:02:33","modified_gmt":"2024-11-01T11:02:33","slug":"uwp-development-mvvm-program-pattern","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37481\/","title":{"rendered":"UWP Development, MVVM Program Pattern"},"content":{"rendered":"<p>UWP (Universal Windows Platform) is a platform for developing powerful applications that can run on various Windows 10 devices. The MVVM (Model-View-ViewModel) pattern is widely used to systematically organize the structure of applications. MVVM is a structural pattern that enhances code maintainability, improves testability, and promotes the separation of UI and business logic.<\/p>\n<h2>Overview of MVVM<\/h2>\n<p>MVVM consists of three main components:<\/p>\n<ul>\n<li><strong>Model<\/strong>: Defines data and business logic. Deals with interactions with databases or web APIs.<\/li>\n<li><strong>View<\/strong>: Defines the user interface (UI). This is the part where users visually see and interact with data.<\/li>\n<li><strong>ViewModel<\/strong>: Acts as an intermediary between the View and Model. It handles events or commands that occur in the View and notifies the View of data received from the Model.<\/li>\n<\/ul>\n<h2>Advantages of the MVVM Pattern<\/h2>\n<ul>\n<li><strong>Maintainability<\/strong>: The separation of UI and business logic allows each component to be modified and tested independently.<\/li>\n<li><strong>Testability<\/strong>: The ViewModel can be tested independently, making unit testing easier.<\/li>\n<li><strong>Data Binding<\/strong>: In UWP, data binding between the View and ViewModel can be easily set up using XAML.<\/li>\n<\/ul>\n<h2>Implementing MVVM<\/h2>\n<p>Now, let&#8217;s implement the MVVM pattern in a UWP application. In the following example, we will create a simple To-Do list application.<\/p>\n<h3>1. Model<\/h3>\n<p>First, we define a model class representing a To-Do item.<\/p>\n<pre>\n<code>\npublic class TodoItem\n{\n    public string Title { get; set; }\n    public bool IsCompleted { get; set; }\n}\n<\/code>\n<\/pre>\n<h3>2. ViewModel<\/h3>\n<p>The ViewModel handles interactions between the UI and the Model.<\/p>\n<pre>\n<code>\nusing System.Collections.ObjectModel;\nusing System.ComponentModel;\n\npublic class TodoViewModel : INotifyPropertyChanged\n{\n    private string newTodoTitle;\n    private ObservableCollection&lt;TodoItem&gt; todos;\n\n    public event PropertyChangedEventHandler PropertyChanged;\n\n    public TodoViewModel()\n    {\n        Todos = new ObservableCollection&lt;TodoItem&gt;();\n    }\n\n    public ObservableCollection&lt;TodoItem&gt; Todos\n    {\n        get { return todos; }\n        set\n        {\n            todos = value;\n            OnPropertyChanged(\"Todos\");\n        }\n    }\n\n    public string NewTodoTitle\n    {\n        get { return newTodoTitle; }\n        set\n        {\n            newTodoTitle = value;\n            OnPropertyChanged(\"NewTodoTitle\");\n        }\n    }\n\n    public void AddTodo()\n    {\n        if (!string.IsNullOrWhiteSpace(NewTodoTitle))\n        {\n            Todos.Add(new TodoItem { Title = NewTodoTitle, IsCompleted = false });\n            NewTodoTitle = string.Empty; \/\/ Clear the input field\n        }\n    }\n\n    protected void OnPropertyChanged(string propertyName)\n    {\n        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n    }\n}\n<\/code>\n<\/pre>\n<h3>3. View<\/h3>\n<p>Define the View in XAML and set up data binding with the ViewModel.<\/p>\n<pre>\n<code>\n&lt;Page\n    x:Class=\"YourApp.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n    xmlns:local=\"using:YourApp\"&gt;\n\n    &lt;Page.DataContext&gt;\n        &lt;local:TodoViewModel \/&gt;\n    &lt;\/Page.DataContext&gt;\n\n    &lt;StackPanel&gt;\n        &lt;TextBox\n            Text=\"{Binding NewTodoTitle, Mode=TwoWay}\"\n            PlaceholderText=\"Enter a new to-do item\" \/&gt;\n        &lt;Button\n            Content=\"Add\"\n            Command=\"{Binding AddTodo}\" \/&gt;\n\n        &lt;ListView ItemsSource=\"{Binding Todos}\"&gt;\n            &lt;ListView.ItemTemplate&gt;\n                &lt;DataTemplate&gt;\n                    &lt;StackPanel Orientation=\"Horizontal\"&gt;\n                        &lt;CheckBox\n                            IsChecked=\"{Binding IsCompleted}\" \/&gt;\n                        &lt;TextBlock Text=\"{Binding Title}\" \/&gt;\n                    &lt;\/StackPanel&gt;\n                &lt;\/DataTemplate&gt;\n            &lt;\/ListView.ItemTemplate&gt;\n        &lt;\/ListView&gt;\n    &lt;\/StackPanel&gt;\n&lt;\/Page&gt;\n<\/code>\n<\/pre>\n<h2>MVVM and Data Binding<\/h2>\n<p>In UWP, data binding can be easily implemented using XAML. By directly binding properties of the ViewModel to UI elements in the View, the UI automatically reflects the state of the model. This allows for synchronization between the Model and View without additional code.<\/p>\n<h2>Conclusion<\/h2>\n<p>Using the MVVM pattern in UWP makes applications more structured and easier to maintain. In this article, we have looked at how to implement the MVVM pattern through a simple To-Do list application. Proper utilization of the MVVM pattern can reduce the complexity of applications, increase code reusability, and allow for more effective testing.<\/p>\n<p>As you develop more complex UWP applications in the future, make sure to effectively utilize the MVVM pattern to write stable and maintainable code!<\/p>\n<h2>References<\/h2>\n<ul>\n<li>Microsoft Docs: <a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/apps\/design\/mvvm\" target=\"_blank\" rel=\"noopener\">MVVM Design Pattern<\/a><\/li>\n<li>MVVM Light Toolkit: <a href=\"https:\/\/www.mvvmlight.net\/\" target=\"_blank\" rel=\"noopener\">MVVM Light<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>UWP (Universal Windows Platform) is a platform for developing powerful applications that can run on various Windows 10 devices. The MVVM (Model-View-ViewModel) pattern is widely used to systematically organize the structure of applications. MVVM is a structural pattern that enhances code maintainability, improves testability, and promotes the separation of UI and business logic. Overview of &hellip; <a href=\"https:\/\/atmokpo.com\/w\/37481\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;UWP Development, MVVM Program Pattern&#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-37481","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, MVVM Program Pattern - \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\/37481\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, MVVM Program Pattern - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"UWP (Universal Windows Platform) is a platform for developing powerful applications that can run on various Windows 10 devices. The MVVM (Model-View-ViewModel) pattern is widely used to systematically organize the structure of applications. MVVM is a structural pattern that enhances code maintainability, improves testability, and promotes the separation of UI and business logic. Overview of &hellip; \ub354 \ubcf4\uae30 &quot;UWP Development, MVVM Program Pattern&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37481\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:57:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:33+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\/37481\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37481\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, MVVM Program Pattern\",\"datePublished\":\"2024-11-01T09:57:55+00:00\",\"dateModified\":\"2024-11-01T11:02:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37481\/\"},\"wordCount\":378,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37481\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37481\/\",\"name\":\"UWP Development, MVVM Program Pattern - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:57:55+00:00\",\"dateModified\":\"2024-11-01T11:02:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37481\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37481\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37481\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, MVVM Program Pattern\"}]},{\"@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, MVVM Program Pattern - \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\/37481\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, MVVM Program Pattern - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"UWP (Universal Windows Platform) is a platform for developing powerful applications that can run on various Windows 10 devices. The MVVM (Model-View-ViewModel) pattern is widely used to systematically organize the structure of applications. MVVM is a structural pattern that enhances code maintainability, improves testability, and promotes the separation of UI and business logic. Overview of &hellip; \ub354 \ubcf4\uae30 \"UWP Development, MVVM Program Pattern\"","og_url":"https:\/\/atmokpo.com\/w\/37481\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:57:55+00:00","article_modified_time":"2024-11-01T11:02:33+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\/37481\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37481\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, MVVM Program Pattern","datePublished":"2024-11-01T09:57:55+00:00","dateModified":"2024-11-01T11:02:33+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37481\/"},"wordCount":378,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37481\/","url":"https:\/\/atmokpo.com\/w\/37481\/","name":"UWP Development, MVVM Program Pattern - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:57:55+00:00","dateModified":"2024-11-01T11:02:33+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37481\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37481\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37481\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, MVVM Program Pattern"}]},{"@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\/37481","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=37481"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37481\/revisions"}],"predecessor-version":[{"id":37482,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37481\/revisions\/37482"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}