{"id":37681,"date":"2024-11-01T09:59:32","date_gmt":"2024-11-01T09:59:32","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37681"},"modified":"2024-11-01T11:04:10","modified_gmt":"2024-11-01T11:04:10","slug":"wpf-development-mvvm","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37681\/","title":{"rendered":"WPF Development, MVVM"},"content":{"rendered":"<p>\n    Windows Presentation Foundation (WPF) is a platform for creating graphical user interface (GUI) applications in Microsoft&#8217;s .NET framework. WPF provides powerful data binding, excellent graphic capabilities, and a variety of flexible UI components that enable developers to easily create attractive UI applications.\n<\/p>\n<h2>1. Features of WPF<\/h2>\n<p>\n    WPF has the following features:\n<\/p>\n<ul>\n<li><strong>XAML (Extensible Application Markup Language)<\/strong>: WPF uses a markup language called XAML to build the UI. This allows for declarative definition of layouts and UI elements.<\/li>\n<li><strong>Data Binding<\/strong>: WPF provides powerful data binding capabilities, making it easy to connect UI elements with data models.<\/li>\n<li><strong>Styles and Templates<\/strong>: You can define the styles of UI elements and modify the visual aspects of the UI through templates.<\/li>\n<li><strong>3D Graphics<\/strong>: WPF supports 3D graphics, providing a richer user experience.<\/li>\n<\/ul>\n<h2>2. What is the MVVM Pattern?<\/h2>\n<p>\n    The MVVM (Model-View-ViewModel) pattern is an architectural pattern that separates the UI and business logic in WPF applications. The MVVM pattern consists of the following three main components:\n<\/p>\n<ul>\n<li><strong>Model<\/strong>: Contains the data and business logic of the application.<\/li>\n<li><strong>View<\/strong>: Composes the user interface, primarily defined in XAML files.<\/li>\n<li><strong>ViewModel<\/strong>: Acts as a mediator between the model and the view, preparing data for the UI and handling commands.<\/li>\n<\/ul>\n<h3>2.1 Advantages of MVVM<\/h3>\n<ul>\n<li>Increases code reusability.<\/li>\n<li>Improves testability.<\/li>\n<li>Enhances maintainability.<\/li>\n<li>Separates UI and business logic to minimize interference.<\/li>\n<\/ul>\n<h2>3. WPF Example Using the MVVM Pattern<\/h2>\n<p>\n    Now, let&#8217;s look at a simple example of a WPF application that applies the MVVM pattern. This example will create an application that takes user input and performs a simple calculation.\n<\/p>\n<h3>3.1 Creating the Project<\/h3>\n<p>\n    Create a new WPF application project in Visual Studio. Name the project &#8220;MVVMExample&#8221;.\n<\/p>\n<h3>3.2 Model<\/h3>\n<p>\n    First, create a model class. This class will have properties for the two numbers to be calculated.\n<\/p>\n<pre><code class=\"language-csharp\">\npublic class CalculatorModel\n{\n    public double Number1 { get; set; }\n    public double Number2 { get; set; }\n    public double Result { get; set; }\n    \n    public void Add()\n    {\n        Result = Number1 + Number2;\n    }\n}\n<\/code><\/pre>\n<h3>3.3 ViewModel<\/h3>\n<p>\n    Next, create the ViewModel class. The ViewModel manages access to the model and implements commands using the ICommand interface to interact with the UI.\n<\/p>\n<pre><code class=\"language-csharp\">\nusing System.ComponentModel;\nusing System.Runtime.CompilerServices;\nusing System.Windows.Input;\n\npublic class CalculatorViewModel : INotifyPropertyChanged\n{\n    private CalculatorModel _model;\n\n    public CalculatorViewModel()\n    {\n        _model = new CalculatorModel();\n        CalculateCommand = new RelayCommand(Calculate);\n    }\n\n    public double Number1\n    {\n        get => _model.Number1;\n        set\n        {\n            _model.Number1 = value;\n            OnPropertyChanged();\n        }\n    }\n\n    public double Number2\n    {\n        get => _model.Number2;\n        set\n        {\n            _model.Number2 = value;\n            OnPropertyChanged();\n        }\n    }\n\n    public double Result\n    {\n        get => _model.Result;\n        set\n        {\n            _model.Result = value;\n            OnPropertyChanged();\n        }\n    }\n\n    public ICommand CalculateCommand { get; private set; }\n\n    private void Calculate()\n    {\n        _model.Add();\n        Result = _model.Result;\n    }\n\n    public event PropertyChangedEventHandler PropertyChanged;\n\n    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)\n    {\n        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n    }\n}\n<\/code><\/pre>\n<h3>3.4 Command Class (RelayCommand)<\/h3>\n<p>\n    Add a RelayCommand class that implements ICommand. This class defines the command and includes logic to determine whether it can be executed.\n<\/p>\n<pre><code class=\"language-csharp\">\nusing System;\nusing System.Windows.Input;\n\npublic class RelayCommand : ICommand\n{\n    private readonly Action<object> _execute;\n    private readonly Predicate<object> _canExecute;\n\n    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)\n    {\n        _execute = execute ?? throw new ArgumentNullException(nameof(execute));\n        _canExecute = canExecute;\n    }\n\n    public event EventHandler CanExecuteChanged\n    {\n        add { CommandManager.RequerySuggested += value; }\n        remove { CommandManager.RequerySuggested -= value; }\n    }\n\n    public bool CanExecute(object parameter) => _canExecute == null || _canExecute(parameter);\n\n    public void Execute(object parameter) => _execute(parameter);\n}\n<\/code><\/pre>\n<h3>3.5 View<\/h3>\n<p>\n    Finally, modify the XAML file to compose the UI. Create a UI to accept two numbers from the user and display the result.\n<\/p>\n<pre><code class=\"language-xaml\">\n<window height=\"200\" title=\"MVVM Example\" width=\"300\" x:class=\"MVVMExample.MainWindow\" xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n    <grid>\n        <stackpanel margin=\"10\">\n            <textbox height=\"30\" margin=\"0,0,0,10\" text=\"{Binding Number1, UpdateSourceTrigger=PropertyChanged}\" width=\"200\"><\/textbox>\n            <textbox height=\"30\" margin=\"0,0,0,10\" text=\"{Binding Number2, UpdateSourceTrigger=PropertyChanged}\" width=\"200\"><\/textbox>\n            <button command=\"{Binding CalculateCommand}\" content=\"Calculate\" height=\"30\" width=\"200\"><\/button>\n            <textblock margin=\"0,10,0,0\" text=\"{Binding Result}\"><\/textblock>\n        <\/stackpanel>\n    <\/grid>\n<\/window>\n<\/code><\/pre>\n<h2>4. Importance of Applying the MVVM Pattern<\/h2>\n<p>\n    Applying the MVVM pattern can significantly improve the maintainability, scalability, and testability of an application. By separating the UI and business logic, developers can enhance code reusability and modify business logic without the need to change the UI. Additionally, the ViewModel allows for intuitive code writing by binding data and commands to the UI.\n<\/p>\n<h2>5. Conclusion<\/h2>\n<p>\n    The combination of WPF and the MVVM pattern is a powerful tool in modern GUI application development. WPF&#8217;s rich UI components and the structured approach of MVVM make it an attractive choice for both experts and beginners. The simple example discussed above illustrates how to effectively apply the MVVM pattern to WPF applications.\n<\/p>\n<h2>6. References<\/h2>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/desktop\/wpf\/?view=netdesktop-6.0\">WPF Documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/architecture\/microservices\/mvc-architecture\/mvvm\">MVVM Pattern Overview<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Windows Presentation Foundation (WPF) is a platform for creating graphical user interface (GUI) applications in Microsoft&#8217;s .NET framework. WPF provides powerful data binding, excellent graphic capabilities, and a variety of flexible UI components that enable developers to easily create attractive UI applications. 1. Features of WPF WPF has the following features: XAML (Extensible Application Markup &hellip; <a href=\"https:\/\/atmokpo.com\/w\/37681\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;WPF Development, MVVM&#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":[117],"tags":[],"class_list":["post-37681","post","type-post","status-publish","format-standard","hentry","category-wpf-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WPF Development, MVVM - \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\/37681\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WPF Development, MVVM - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Windows Presentation Foundation (WPF) is a platform for creating graphical user interface (GUI) applications in Microsoft&#8217;s .NET framework. WPF provides powerful data binding, excellent graphic capabilities, and a variety of flexible UI components that enable developers to easily create attractive UI applications. 1. Features of WPF WPF has the following features: XAML (Extensible Application Markup &hellip; \ub354 \ubcf4\uae30 &quot;WPF Development, MVVM&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37681\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:59:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:04:10+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\/37681\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37681\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"WPF Development, MVVM\",\"datePublished\":\"2024-11-01T09:59:32+00:00\",\"dateModified\":\"2024-11-01T11:04:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37681\/\"},\"wordCount\":487,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"WPF Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37681\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37681\/\",\"name\":\"WPF Development, MVVM - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:59:32+00:00\",\"dateModified\":\"2024-11-01T11:04:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37681\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37681\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37681\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPF Development, MVVM\"}]},{\"@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":"WPF Development, MVVM - \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\/37681\/","og_locale":"ko_KR","og_type":"article","og_title":"WPF Development, MVVM - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Windows Presentation Foundation (WPF) is a platform for creating graphical user interface (GUI) applications in Microsoft&#8217;s .NET framework. WPF provides powerful data binding, excellent graphic capabilities, and a variety of flexible UI components that enable developers to easily create attractive UI applications. 1. Features of WPF WPF has the following features: XAML (Extensible Application Markup &hellip; \ub354 \ubcf4\uae30 \"WPF Development, MVVM\"","og_url":"https:\/\/atmokpo.com\/w\/37681\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:59:32+00:00","article_modified_time":"2024-11-01T11:04:10+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\/37681\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37681\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"WPF Development, MVVM","datePublished":"2024-11-01T09:59:32+00:00","dateModified":"2024-11-01T11:04:10+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37681\/"},"wordCount":487,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["WPF Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37681\/","url":"https:\/\/atmokpo.com\/w\/37681\/","name":"WPF Development, MVVM - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:59:32+00:00","dateModified":"2024-11-01T11:04:10+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37681\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37681\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37681\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"WPF Development, MVVM"}]},{"@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\/37681","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=37681"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37681\/revisions"}],"predecessor-version":[{"id":37682,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37681\/revisions\/37682"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}