{"id":37543,"date":"2024-11-01T09:58:25","date_gmt":"2024-11-01T09:58:25","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37543"},"modified":"2024-11-01T11:02:18","modified_gmt":"2024-11-01T11:02:18","slug":"uwp-development-modifying-userdetailviewmodel-viewmodel","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37543\/","title":{"rendered":"UWP Development, Modifying UserDetailViewModel ViewModel"},"content":{"rendered":"<p>UWP (Universal Windows Platform) development is an essential element in creating applications that can run on various modern platforms. In this post, we will detail the method of modifying UserDetailViewModel, which is an important part of UWP application development, focusing on the MVVM (Model-View-ViewModel) architecture. Throughout this process, we will explain the significance and usage of the MVVM pattern, and we will practice with specific code examples.<\/p>\n<h2>1. Understanding the MVVM Pattern<\/h2>\n<p>The MVVM pattern is an architectural pattern that separates the application\u2019s configuration to improve maintainability and reusability. MVVM consists of three components:<\/p>\n<ul>\n<li><strong>Model:<\/strong> Manages the application\u2019s data and business logic.<\/li>\n<li><strong>View:<\/strong> Composes the user interface (UI) and allows users to interact with the Model through events.<\/li>\n<li><strong>ViewModel:<\/strong> Mediates the interaction between the View and the Model. It primarily includes logic related to data binding, commands, and event handling.<\/li>\n<\/ul>\n<h2>2. Introduction to UserDetailViewModel in UWP Applications<\/h2>\n<p>UserDetailViewModel is the ViewModel responsible for displaying and editing details of a specific user. It contains properties that can bind user information (e.g., name, email, phone number, etc.) to the UI and commands for modifying that information.<\/p>\n<p>By implementing UserDetailViewModel in UWP applications, users can conveniently manage their information through the UI. This ViewModel should include the following key features:<\/p>\n<ul>\n<li>Loading and saving user information<\/li>\n<li>Detecting and reflecting changes in user information<\/li>\n<li>Supporting data binding with the UI<\/li>\n<\/ul>\n<h2>3. Basic Structure of UserDetailViewModel<\/h2>\n<p>Here, we will look at the basic structure of a simple UserDetailViewModel. Below is the basic code written in C#:<\/p>\n<pre><code class=\"language-csharp\">using System.ComponentModel;\nusing System.Runtime.CompilerServices;\nusing System.Windows.Input;\n\npublic class UserDetailViewModel : INotifyPropertyChanged\n{\n    private string _name;\n    private string _email;\n    private string _phoneNumber;\n\n    public string Name\n    {\n        get { return _name; }\n        set { SetProperty(ref _name, value); }\n    }\n\n    public string Email\n    {\n        get { return _email; }\n        set { SetProperty(ref _email, value); }\n    }\n\n    public string PhoneNumber\n    {\n        get { return _phoneNumber; }\n        set { SetProperty(ref _phoneNumber, value); }\n    }\n\n    public ICommand SaveCommand { get; private set; }\n\n    public UserDetailViewModel()\n    {\n        SaveCommand = new RelayCommand(Save);\n    }\n\n    private void Save()\n    {\n        \/\/ Implement save logic\n        \/\/ e.g., Save user information to database\n    }\n\n    public event PropertyChangedEventHandler PropertyChanged;\n\n    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)\n    {\n        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n    }\n\n    protected bool SetProperty<t>(ref T storage, T value, [CallerMemberName] string propertyName = null)\n    {\n        if (Equals(storage, value)) return false;\n        storage = value;\n        OnPropertyChanged(propertyName);\n        return true;\n    }\n}\n<\/t><\/code><\/pre>\n<h2>4. Implementing Data Binding in ViewModel<\/h2>\n<p>In UWP, binding data in the ViewModel is essential. The above UserDetailViewModel implements the INotifyPropertyChanged interface to automatically reflect property value changes in the UI.<\/p>\n<p>You can set up binding with the View in the XAML file as follows:<\/p>\n<pre><code class=\"language-xml\">&lt;Page.DataContext&gt;\n    &lt;local:UserDetailViewModel \/&gt;\n&lt;\/Page.DataContext&gt;\n\n&lt;StackPanel&gt;\n    &lt;TextBox Text=\"{Binding Name, Mode=TwoWay}\" \/&gt;\n    &lt;TextBox Text=\"{Binding Email, Mode=TwoWay}\" \/&gt;\n    &lt;TextBox Text=\"{Binding PhoneNumber, Mode=TwoWay}\" \/&gt;\n    &lt;Button Content=\"Save\" Command=\"{Binding SaveCommand}\" \/&gt;\n&lt;\/StackPanel&gt;\n<\/code><\/pre>\n<p>In the above code, each TextBox is bound to the properties of the ViewModel, updating the properties automatically whenever the user inputs information. This reduces code duplication and maximizes the separation between UI and business logic.<\/p>\n<h2>5. Expanding UserDetailViewModel Features<\/h2>\n<p>Now, let\u2019s add additional features to UserDetailViewModel. For example, we can implement a feature to validate user information.<\/p>\n<pre><code class=\"language-csharp\">private string _errorMessage;\npublic string ErrorMessage\n{\n    get { return _errorMessage; }\n    set { SetProperty(ref _errorMessage, value); }\n}\n\nprivate bool ValidateInputs()\n{\n    if (string.IsNullOrWhiteSpace(Name))\n    {\n        ErrorMessage = \"Name is required.\";\n        return false;\n    }\n    \/\/ Implement additional validation\n    return true;\n}\n\nprivate void Save()\n{\n    if (!ValidateInputs())\n    {\n        \/\/ Do not save if validation fails\n        return;\n    }\n    \n    \/\/ Implement save logic\n}\n<\/code><\/pre>\n<p>Now, when the user attempts to save their information, the input will be validated first, and if there are issues, an error message will be provided. This helps improve the user experience.<\/p>\n<h2>6. Integrating with Data Storage<\/h2>\n<p>It is also crucial to integrate UserDetailViewModel with the actual data storage. Here, we will demonstrate a simple example using LocalStorage for data storage.<\/p>\n<pre><code class=\"language-csharp\">private async void LoadUserData()\n{\n    \/\/ Asynchronous method to load user data\n    var userData = await LoadDataFromStorageAsync();\n    Name = userData.Name;\n    Email = userData.Email;\n    PhoneNumber = userData.PhoneNumber;\n}\n\nprivate async Task<userdata> LoadDataFromStorageAsync()\n{\n    \/\/ Implement asynchronous data retrieval\n}\n\nprivate async Task SaveDataToStorageAsync()\n{\n    \/\/ Implement asynchronous data saving\n}\n\nprivate void Save()\n{\n    if (!ValidateInputs())\n    {\n        return;\n    }\n\n    await SaveDataToStorageAsync();\n}\n<\/userdata><\/code><\/pre>\n<p>In the code above, the LoadUserData method asynchronously loads user data, and the SaveDataToStorageAsync method saves the modified user information.<\/p>\n<h2>7. Verifying Functionality<\/h2>\n<p>Now that all implementations are complete, we will build and run the UWP application to check if all the written code works as expected. Users can enter information through the UI and use the &#8220;Save&#8221; button to save their information.<\/p>\n<h2>8. Conclusion<\/h2>\n<p>In this post, we learned how to modify UserDetailViewModel in UWP applications. By realizing a clear separation between the view, viewmodel, and model through the MVVM pattern, we were able to enhance maintainability and reusability. Additionally, through validation and integration with the data storage, we confirmed the operation in a real application.<\/p>\n<p>We will continue to cover more information on UWP development, so please stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UWP (Universal Windows Platform) development is an essential element in creating applications that can run on various modern platforms. In this post, we will detail the method of modifying UserDetailViewModel, which is an important part of UWP application development, focusing on the MVVM (Model-View-ViewModel) architecture. Throughout this process, we will explain the significance and usage &hellip; <a href=\"https:\/\/atmokpo.com\/w\/37543\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;UWP Development, Modifying UserDetailViewModel ViewModel&#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-37543","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, Modifying UserDetailViewModel ViewModel - \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\/37543\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UWP Development, Modifying UserDetailViewModel ViewModel - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"UWP (Universal Windows Platform) development is an essential element in creating applications that can run on various modern platforms. In this post, we will detail the method of modifying UserDetailViewModel, which is an important part of UWP application development, focusing on the MVVM (Model-View-ViewModel) architecture. Throughout this process, we will explain the significance and usage &hellip; \ub354 \ubcf4\uae30 &quot;UWP Development, Modifying UserDetailViewModel ViewModel&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37543\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:58:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:02:18+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\/37543\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37543\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"UWP Development, Modifying UserDetailViewModel ViewModel\",\"datePublished\":\"2024-11-01T09:58:25+00:00\",\"dateModified\":\"2024-11-01T11:02:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37543\/\"},\"wordCount\":546,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"UWP Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37543\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37543\/\",\"name\":\"UWP Development, Modifying UserDetailViewModel ViewModel - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:58:25+00:00\",\"dateModified\":\"2024-11-01T11:02:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37543\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37543\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37543\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UWP Development, Modifying UserDetailViewModel ViewModel\"}]},{\"@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, Modifying UserDetailViewModel ViewModel - \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\/37543\/","og_locale":"ko_KR","og_type":"article","og_title":"UWP Development, Modifying UserDetailViewModel ViewModel - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"UWP (Universal Windows Platform) development is an essential element in creating applications that can run on various modern platforms. In this post, we will detail the method of modifying UserDetailViewModel, which is an important part of UWP application development, focusing on the MVVM (Model-View-ViewModel) architecture. Throughout this process, we will explain the significance and usage &hellip; \ub354 \ubcf4\uae30 \"UWP Development, Modifying UserDetailViewModel ViewModel\"","og_url":"https:\/\/atmokpo.com\/w\/37543\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:58:25+00:00","article_modified_time":"2024-11-01T11:02:18+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\/37543\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37543\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"UWP Development, Modifying UserDetailViewModel ViewModel","datePublished":"2024-11-01T09:58:25+00:00","dateModified":"2024-11-01T11:02:18+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37543\/"},"wordCount":546,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["UWP Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37543\/","url":"https:\/\/atmokpo.com\/w\/37543\/","name":"UWP Development, Modifying UserDetailViewModel ViewModel - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:58:25+00:00","dateModified":"2024-11-01T11:02:18+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37543\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37543\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37543\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"UWP Development, Modifying UserDetailViewModel ViewModel"}]},{"@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\/37543","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=37543"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37543\/revisions"}],"predecessor-version":[{"id":37544,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37543\/revisions\/37544"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}