ViewModel<\/strong>: Mediator between View and Model.<\/li>\n<\/ul>\n\n In this course, we will create a simple product information application while applying the MVVM pattern.\n<\/p>\n
3. Creating Data Model<\/h2>\n
\n First, let’s create a Product<\/code> class to hold product information. This class will have properties for the product’s name, price, and description.\n<\/p>\n\nusing System.ComponentModel;\n\npublic class Product : INotifyPropertyChanged\n{\n private string _name;\n private decimal _price;\n private string _description;\n\n public string Name\n {\n get => _name;\n set\n {\n _name = value;\n OnPropertyChanged(nameof(Name));\n }\n }\n\n public decimal Price\n {\n get => _price;\n set\n {\n _price = value;\n OnPropertyChanged(nameof(Price));\n }\n }\n\n public string Description\n {\n get => _description;\n set\n {\n _description = value;\n OnPropertyChanged(nameof(Description));\n }\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n protected virtual void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n}\n<\/code>\n<\/pre>\n\n The above code implements the INotifyPropertyChanged<\/code> interface to allow notifications when properties change. This is useful for data binding.\n<\/p>\n4. Creating ViewModel<\/h2>\n
\n Next, we will create a ProductViewModel<\/code> class to implement the logic that manages the product list. This ViewModel includes a list of products and displays the details of the selected product.\n<\/p>\n\nusing System.Collections.ObjectModel;\nusing System.Windows.Input;\n\npublic class ProductViewModel : INotifyPropertyChanged\n{\n private Product _selectedProduct;\n\n public ObservableCollection<Product> Products { get; }\n\n public Product SelectedProduct\n {\n get => _selectedProduct;\n set\n {\n _selectedProduct = value;\n OnPropertyChanged(nameof(SelectedProduct));\n }\n }\n\n public ProductViewModel()\n {\n Products = new ObservableCollection<Product>\n {\n new Product { Name = \"Laptop\", Price = 1200000, Description = \"High-performance laptop.\" },\n new Product { Name = \"Smartphone\", Price = 800000, Description = \"Latest smartphone.\" },\n new Product { Name = \"Tablet\", Price = 500000, Description = \"Portable tablet.\" }\n };\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n protected virtual void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n}\n<\/code>\n<\/pre>\n\n Here, we use ObservableCollection<Product><\/code> to manage the product list. ObservableCollection automatically reflects changes in the collection in the UI.\n<\/p>\n5. UI Design Using XAML<\/h2>\n
\n Now, let’s design the user interface using XAML. We will bind the UI with the ProductViewModel<\/code> created earlier.\n<\/p>\n\n<Window x:Class=\"ProductApp.MainWindow\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n Title=\"Product List\" Height=\"350\" Width=\"525\">\n <Window.DataContext>\n <local:ProductViewModel \/>\n <\/Window.DataContext>\n\n <Grid>\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width=\"2*\"\/>\n <ColumnDefinition Width=\"3*\"\/>\n <\/Grid.ColumnDefinitions>\n\n <ListBox ItemsSource=\"{Binding Products}\" \n SelectedItem=\"{Binding SelectedProduct}\" \n DisplayMemberPath=\"Name\" \n Margin=\"10\" \/>\n\n <StackPanel Grid.Column=\"1\" Margin=\"10\">\n <TextBlock Text=\"Product Name:\" FontWeight=\"Bold\"\/>\n <TextBlock Text=\"{Binding SelectedProduct.Name}\" \/>\n\n <TextBlock Text=\"Price:\" FontWeight=\"Bold\"\/>\n <TextBlock Text=\"{Binding SelectedProduct.Price, StringFormat={}{0:C}}\" \/>\n\n <TextBlock Text=\"Description:\" FontWeight=\"Bold\"\/>\n <TextBlock Text=\"{Binding SelectedProduct.Description}\" TextWrapping=\"Wrap\" \/>\n <\/StackPanel>\n\n <\/Grid>\n<\/Window>\n<\/code>\n<\/pre>\n\n The above XAML code sets up a basic layout and uses a ListBox to display the product list. When a user selects a product from the ListBox, the details of the selected product are displayed in the right area.\n<\/p>\n
6. Running the Application and Checking Results<\/h2>\n
\n Now that all the code has been written, let’s run the application to check the results. By pressing the F5 key to run it in debug mode, you will see the UI as shown below.\n<\/p>\n
![\"Product](\"example_screenshot.png\"\/)
<\/p>\n
7. Conclusion<\/h2>\n
\n In this course, we created a simple product list and details application using WPF. By applying the MVVM pattern, we separated Model, View, and ViewModel, enhancing code readability and maintainability. We were able to easily implement the connection between the user interface and business logic by utilizing WPF’s data binding capabilities.
\n I hope this course has enhanced your understanding of fundamental data binding and MVVM in WPF.\n<\/p>\n
\n Moving forward, I encourage you to develop more complex and diverse WPF applications. Utilize the various features of WPF to create even more appealing user interfaces!\n<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
WPF (Windows Presentation Foundation) is a powerful UI framework based on the .NET Framework. It is particularly well-suited for developing desktop applications. In this course, we will learn how to display product lists and information details using WPF. Topics covered in this course include product data binding, implementing the MVVM (Model-View-ViewModel) pattern, and UI design … \ub354 \ubcf4\uae30 “WPF Development, Practice Display Products and Details”<\/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-37729","post","type-post","status-publish","format-standard","hentry","category-wpf-programming"],"yoast_head":"\nWPF Development, Practice Display Products and Details - \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\/37729\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WPF Development, Practice Display Products and Details - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"WPF (Windows Presentation Foundation) is a powerful UI framework based on the .NET Framework. It is particularly well-suited for developing desktop applications. In this course, we will learn how to display product lists and information details using WPF. Topics covered in this course include product data binding, implementing the MVVM (Model-View-ViewModel) pattern, and UI design … \ub354 \ubcf4\uae30 "WPF Development, Practice Display Products and Details"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/37729\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:59:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:03:57+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\/37729\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37729\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"WPF Development, Practice Display Products and Details\",\"datePublished\":\"2024-11-01T09:59:57+00:00\",\"dateModified\":\"2024-11-01T11:03:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37729\/\"},\"wordCount\":479,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"WPF Programming\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/37729\/\",\"url\":\"https:\/\/atmokpo.com\/w\/37729\/\",\"name\":\"WPF Development, Practice Display Products and Details - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:59:57+00:00\",\"dateModified\":\"2024-11-01T11:03:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/37729\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/37729\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/37729\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPF Development, Practice Display Products and Details\"}]},{\"@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, Practice Display Products and Details - \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\/37729\/","og_locale":"ko_KR","og_type":"article","og_title":"WPF Development, Practice Display Products and Details - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"WPF (Windows Presentation Foundation) is a powerful UI framework based on the .NET Framework. It is particularly well-suited for developing desktop applications. In this course, we will learn how to display product lists and information details using WPF. Topics covered in this course include product data binding, implementing the MVVM (Model-View-ViewModel) pattern, and UI design … \ub354 \ubcf4\uae30 \"WPF Development, Practice Display Products and Details\"","og_url":"https:\/\/atmokpo.com\/w\/37729\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:59:57+00:00","article_modified_time":"2024-11-01T11:03:57+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\/37729\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/37729\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"WPF Development, Practice Display Products and Details","datePublished":"2024-11-01T09:59:57+00:00","dateModified":"2024-11-01T11:03:57+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/37729\/"},"wordCount":479,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["WPF Programming"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/37729\/","url":"https:\/\/atmokpo.com\/w\/37729\/","name":"WPF Development, Practice Display Products and Details - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:59:57+00:00","dateModified":"2024-11-01T11:03:57+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/37729\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/37729\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/37729\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"WPF Development, Practice Display Products and Details"}]},{"@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\/37729","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=37729"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37729\/revisions"}],"predecessor-version":[{"id":37730,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/37729\/revisions\/37730"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=37729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=37729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=37729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}