Effectively debugging WPF MVVM applications

Published on September 13, 2013 in WPF MVVM · Read time 5 minutes

Being able to effectively debug any application is key to the success of an application. Every developer, no matter how good they are or how long they have been writing code, introduces bugs. Debugging is the process of identifying bugs and removing them. WPF applications can be particularly hard to debug, if you are not using the correct tools. This post attempts to help you utilise various free tools to help simplify the debugging process. Binding Errors Binding errors are very common in all WPF applications. Binding errors are errors that occur when bindings in your view to properties on your view model to not match. Take the following example; The view; And the view model; What is the output of the above code? Are you expecting to see “Hello World” written out to the screen? Is this case, there is no output to the screen. So what went wrong? Well on close inspection of the XAML and C# code, we can see that there is a mistake in our XAML. The binding expression points to a property called , where as our view model does not have this property, it instead has a property called . This mistake was easy to identify because we only have a few lines of code. However, as soon as your…

Using StructureMap setter injection to inject repositories into your View Model

Published on August 09, 2013 in WPF MVVM · Read time 2 minutes

This short post is a follow on from an earlier series of posts that discussed how to achieve MVVM purity in WPF using Structure Map. You may want to check out those posts first before reading this post. However, if you just generally want to know how to do setter injection using Structure Map, you are in the right place! A Scenario It is very common in modern applications to have a repository that does the job of retrieving and saving data from/to your database. Your repository may look like this; In the above sample we are simulating retrieving the number of customers that currently exist in our database. Our view model logic may look something like this; When the view model has finished loading, we want to retrieve the number of customers from the repository and display this number to the user. How do we get an instance of ? Well there are two approaches, this is the first; You can use the static method to get an instance of the repository and set the public property to that value. Don’t get me wrong, this approach works… but it is widely considered to be an anti-pattern. The second approach is to use setter injection, which basically means that StructureMap will inject a…

WPF MVVM IoC containers - Part 2 of 2

Published on August 02, 2013 in WPF MVVM · Read time 9 minutes

The ultimate goal of MVVM is to achieve true separation of concerns, meaning that the various elements of your project know nothing about each other. It’s virtually impossible to achieve this in an elegant way in WPF without some outside help. You are reading the second part of this blog post where we will discuss how to use an IoC container properly in a WPF MVVM application. It is assumed you have either read the first post, or are familiar with the concept of IoC/dependency injection with StructureMap. Part 0 It’s worth noting just before we get started that you will need to invest a little time to get this set up initially. That investment will pay off almost immediately as your application begins to scale. Please take the time to, if you haven’t already, install PropertyChanged.Fody and StructureMap from NuGet. Core Classes Start by creating some core classes for use within the rest of your application. Getting these in a good state early will make architecting the rest of the application a lot easier. I like to have all my classes inherit from a class called BaseNotification, so that I (thanks to PropertyChanged.Fody) get all the change notification functionality added…

WPF MVVM IoC containers - Part 1 of 2

Published on July 26, 2013 in WPF MVVM · Read time 4 minutes

The ultimate goal of MVVM is to achieve true separation of concerns, meaning that the various elements of your project know nothing about each other. It’s virtually impossible to achieve this in an elegant way in WPF without some outside help. For example, how to you tie the view model to a view? Here are some ideas that spring to mind; 1) You could set the data context directly in the view; You could set the data context in the views code behind file; Or you could set the data context when the view is instantiated; The problem with the first approach is that you are creating a relationship between the view and the view model. Admittedly its a dynamic relationship, but, a relationship none the less. This is contrary to the MVVM concept. The second approach adds code behind, which is basically banned in MVVM, and the third approach would result in your writing lots of code that will become unmaintainable over time. Dependency Injection Dependency injection is the idea that instances of required objects will be passed in to the class at some point. I say some point because this could be via the constructor or through lookups (usually on getters/setters of public properties…

WPF MVVM For WinForms Devs - Part 5/5

Published on July 06, 2013 in WPF MVVM · Read time 6 minutes

The purpose of this series of tutorials is to introduce the Model-View-ViewModel (MVVM) design pattern, and look at how to quickly and simply implement it in a Windows Presentation Foundation (WPF) application. This series is targeted at developers of all levels, but especially at developers who are looking to make the transition from Windows Forms to WPF. This final part of the series assumes you have at least read the previous parts, or have a good working knowledge of WPF and the MVVM design pattern. User Controls User controls are controls that you have created for use throughout your application. Often user controls are a composite of existing WPF controls, pieced together to simplify code, improve maintainability by improving code reuse, and provide a consistent look and feel throughout your application. In this tutorial we are going to look at how to create a date time picker as a single, unified control that accepts a object as its value. To make this possible, we will need to create the following; Resource dictionary to store all our styles/layout behaviour (called CustomControls.xaml) A class for the control behavioural logic itself (called CustomDateTimePicker.cs) A…

WPF MVVM For WinForms Devs - Part 4/5

Published on June 29, 2013 in WPF MVVM · Read time 5 minutes

The purpose of this series of tutorials is to introduce the Model-View-ViewModel (MVVM) design pattern, and look at how to correctly implement it in an Windows Presentation Foundation (WPF) application. This series is targeted at developers of all levels, but especially at developers who are looking to make the transition from Windows Forms to WPF. Events in Windows Forms applications Assuming you have come from a Windows Forms background, regardless of what design patterns (if any?) you used, there is a good chance you are familiar with doing either or both of the following; Double click a control (for example a button) to generate the event handler in the code behind; or subscribe to the click event in the constructor, as follows; Well, as you know code behind is not permitted in MVVM, so where do we go from here? Well events pretty much don’t exist in MVVM. This is quite a bold statement, but in reality you will very rarely need to subscribe to and unsubscribe from events in the traditional way. This is somewhat of an over-generalisation because when you come to design user controls, you inevitably end up hooking into events as code behind is allowed in this scenario… and it…

WPF MVVM For WinForms Devs - Part 3/5

Published on June 22, 2013 in WPF MVVM · Read time 5 minutes

The purpose of this series of tutorials is to introduce the Model-View-ViewModel (MVVM) design pattern, and look at how to correctly implement it in a Windows Presentation Foundation (WPF) application. This series is targeted at developers of all levels, but especially at developers who are looking to make the transition from Windows Forms to WPF. Capturing user input In the previous walkthrough we; set up our view model, bound it to the view, and added a property for our model class. We then displayed a customer name on the UI. Let’s go ahead and make this slightly more interactive. We want to expand our UI so that user can go ahead and update the customer details. Update your code to the following; The UI should now look something like this; Let’s take a moment to review the behaviour…go ahead and make changes to the First Name and Last Name text boxes. You will notice that when the text box loses focus, the Customers Name label is updated with the new values. I can also assure you that the underlying model is also being updated to reflect these changes. An unexpected situation This works because the UI is instigating the update. The user is making a change to a control which is…

WPF MVVM For WinForms Devs - Part 2/5

Published on June 15, 2013 in WPF MVVM · Read time 2 minutes

The purpose of this series of tutorials is to introduce the WPF MVVM (Model-View-ViewModel) design pattern, and look at how to correctly implement it in an Windows Presentation Foundation (WPF) application. This series is targeted at developers of all levels, but especially at developers who are looking to make the transition from Windows Forms to WPF. How to quickly implement MVVM in your C# WPF application Start by firing up an instance of your favourite version of Visual Studio (free or paid) and create a new WPF application, call it CustomerPortal. Add a new class to your project, called Customer. This will be your model class. Add the following code; Now create your view model class…remembering that the view-model is responsible for presenting the data within the model to the view. Add the following code; In this example, we are creating an instance of the model directly in the constructor (for simplicity). Typically this information would be retrieved from an external data source. Finally, we need to let the view know about the view-model so that we can display the model data. Edit the XAML in MainWindow.xaml so that it looks like this; If you are unable to compile at this…

WPF MVVM For WinForms Devs - Part 1/5

Published on June 08, 2013 in WPF MVVM · Read time 2 minutes

The purpose of this series of tutorials is to introduce the WPF MVVM (Model-View-ViewModel) design pattern, and look at how to quickly and simply implement it in a Windows Presentation Foundation (WPF) application. This series is targeted at developers of all levels, but especially at developers who are looking to make the transition from Windows Forms to WPF. The first part of this series will focus on; What exactly is MVVM, and why should I care? What problem does the MVVM design pattern attempt to solve? Subsequent posts will attempt to; Demonstrate how to quickly implement the MVVM pattern in a new WPF application. Discuss data binding, change notifications, events and commands. Discuss some techniques for converting older WinForms applications to WPF. Discuss and see how to create user controls/custom controls without breaking the MVVM pattern. So what is Model-View-ViewModel (MVVM)? From a high level, MVVM is a design pattern . MVVM provides a way for you to structure your code in a way that promotes maintainability, reusability and scalability. This is primarily achieved by separating code into focused sections, a technique known as Separation of Concerns (S0C…