Building an Enterprise App with WPF, MVVM, and Entity Framework Code First

WPF is a popular and solid technology to build desktop applications for Windows. This course teaches you how to build a full enterprise application that uses a SQL Server database.
Course info
Rating
(138)
Level
Intermediate
Updated
Aug 21, 2017
Duration
9h 1m
Table of contents
Course Overview
Looking at the Scenario
Defining the Architecture
Building the Basic UI Layer
Setting up Entity Framework
Decoupling the UI Parts
Communicating Between ViewModels
Saving Data
Validating User Input
Detecting Model Changes
Adding and Deleting Entities
Working with Lookups
Working with Object Graphs
Refactoring to Support Other Detail Views
Introducing Another Detail View
Picking M:N-related Details
Switching to a Tabbed UI
Creating a Detail View for Collections
Implementing Optimistic Concurrency
Styling the Application
Description
Course info
Rating
(138)
Level
Intermediate
Updated
Aug 21, 2017
Duration
9h 1m
Description

At the core of developing a data-driven WPF application is a thorough knowledge of how to use the MVVM Pattern and Entity Framework. In this course, Building an Enterprise App with WPF, MVVM, and Entity Framework Code First, you will learn the skills you need to create high-quality enterprise applications with WPF. First, you'll learn about typical scenarios like communicating between different ViewModels, detecting model changes, and handling many-to-many relations. Next, you'll learn all about creating a tabbed user interface. Finally, you'll explore implementing optimistic concurrency and styling your application. When you're finished with this course, you will have a deep understanding of WPF, MVVM, and Entity Framework that will help you immensely as you move forward and create your own data-driven enterprise application.

About the author
About the author

Thomas is a well-known author, software developer, and speaker from Germany. He specializes in .NET, C#, TypeScript, XAML, and Azure.

More from the author
.NET Standard: Getting Started
Intermediate
2h 44m
May 14, 2018
More courses by Thomas Claudius Huber
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Thomas Claudius Huber and welcome to my course Building an Enterprise App with WPF, MVVM and Entity Framework Code First. I am a Microsoft MVP for Windows Development and I have a passion for user interfaces. To create a solid enterprise application with WPF you have to know about different technologies and patents and how they are used together, like for example entity framework, MVVM and dependency injection. This course covers the full stack that you need to know to build an enterprise application with WPF that uses MVVM and that connects to a secret server database with entity framework. Some of the major topics that we will cover include applying the MVVM pattern, setting up a database with entity framework code first, detecting model changes with entity framework's DB context, validating user input with data annotations and implementing optimistic concurrency to handle multi-user conflicts. By the end of this course you will know how to build a data driven WPF enterprise application with a tech-user interface and a modern and dark design. Before beginning the course you should be familiar with the C# language. If you know already about XAML would be great, but it is not necessary. We will start in Visual Studio with find new project so even without XAML knowledge you should be able to follow this course. I hope you will join me on this journey to learn about building a real world WPF application with the course Building an Enterprise App with WPF, MVVM, and Entity Framework Code First at Pluralsight.

Looking at the Scenario
Welcome to the course, Building an Enterprise App with WPF, MVVM, and Entity Framework Code First. My name is Thomas Claudius Huber and in this first module, I want to show you the scenario that is used throughout this course. That means, you'll learn about the demo application that you built. But before we look at this demo application, let me explain you how this course is structured. You start building the demo application in this course with File, New Project, in Visual Studio. So you really start from scratch. Even if you don't know anything about WPF or Entity Framework, you should be able to follow this course. The only prerequisite of this course is that you have a solid knowledge of the C# language. If you have also basic knowledge of WPF, that's even better. After you have created your new project, you will build a basic application to organize friends. For the rest of the course, you will refactor and extend the FriendOrganizer application so that it has typical features of an enterprise app. But what are these typical features? Typical features of a business application are create, read, update, and delete entities, validating user input, handling different data relations like for example the many to many relationship and much more. Instead of telling you all the features of a business application, let me show you the FriendOrganizer application that you built, and then you will find out if there's something in for you or not.

Defining the Architecture
Welcome to the module, Defining the Architecture. My name is Thomas Claudius Huber, and in this module, we will define the architecture of the FriendOrganizer application. Let's take a quick look at the module outline. In this module, you'll learn about N-tier and client-server architectures. Then we will focus on the FriendOrganizer application. We will plan the client layers and we will set up the solution. Okay, that's it. Let's start with the N-tier and client-server architectures.

Building the Basic UI Layer
Welcome to the module Building the Basic UI Layer. My name is Thomas Claudius Huber, and in this module, I want to build the first interface for the Friend Organizer application together with you. But what's your opinion? Should we start without requirements? It might be a bit tough. So let's assume the required user interface looks like this. On the left side, we have a list of friends. The first name of each friend is displayed in this list. When the user selects a friend, the details are displayed on the right. That's it. Before we start, let's have a quick look at the module outline. We start this module by planning the user interface layer. Then we will ensure that you know the basics of the MVVM pattern. With this knowledge, we will create the different parts of the user interface of the Friend Organizer application. We will create a data service to load the data. We will create a ViewModel that is using the data service and we will create a view that binds to the properties of the ViewModel. After we are done with this, we will even use dependency injection to inject the data service into the ViewModel and to inject the ViewModel into the view. Now let's start and let's plan the UI layer.

Setting up Entity Framework
Welcome to the module Setting Up Entity Framework. My name is Thomas Claudius Huber. In this module, you will learn how to set up Entity Framework Code First to create and seed the SQL Server database. Then we will extend the Friend Organizer application to load data from SQL Server by using Entity Framework. Before we start, let me show you the module outline. You will start this module by planning the data access layer of the Friend Organizer application. Then we will create and seed the database for the Friend Organizer application with Entity Framework Code First. Finally, we will use Entity Framework in the FriendDataService to load the data for the Friend Organizer application from SQL Server. Let's start with the planning of the data access layer.

Decoupling the UI Parts
Welcome to the module, Decoupling the UI Parts. My name is Thomas Claudius Huber. And in this module, we will split up the Friend Organizer application into separate components. When you look at the current UI structure, you can see that we have a kind of navigation on the left side, and a kind of navigation on the right side. But everything is coded directly into the main window, and into a single main view model. When the application grows, it will be hard to maintain it if we don't split it up into separate components. And that's exactly what we do in this module. We will create a user control for the navigation and a user control for the details. We will also take care that the navigation does not load the full friend objects. Instead, it should just load the ID and the name of a friend. When a friend is selected in the navigation, the full friend object should be loaded by the detail control. So far to the idea. Now let's look at the module outline. We start this module by planning the new structure of our Friend Organizer application. Then we will create a LookupDataService that returns LookupItems. The LookupItem will be a simple class that has an ID property and the DisplayMember property. We will use this LookupDataService to load only the IDs and names for the friends from the database. When we have this LookupDataService, we will create a NavigationView, which is a user control and a corresponding NavigationViewModel. The NavigationViewModel will use the LookupDataService to load the lightweight friends objects in form of LookupItems. After we have the navigation, we will create a FriendDetailView to display the details, and also a corresponding FriendDetailViewModel. Now you will learn how these different parts are related to each other when we plan the new structure of the Friend Organizer application.

Communicating Between ViewModels
Welcome to the module Communicating Between ViewModels. My name is Thomas Claudius Huber. In this module, I want to show you how you can set up an event aggregator so that the ViewModels can talk to each other. Let's look at the module outline. We start this module by planning the ViewModel communication of the friend organizer application. When we know how the ViewModels should talk to each other, we will introduce Prism's Event Aggregator and we will set up an event. Then we will publish and subscribe to that event from our ViewModels. Now let's start and let's plan the ViewModel communication.

Saving Data
Welcome to the module Saving Data. My name is Thomas Claudius Huber, and in this module we will extend the FriendOrganizer application, so that we can save the friend spec to the database. Let me show you the module outline. We start this module by looking at the ICommand interface and the MVVM pattern. Then we will add a SaveCommand property to the FriendDetailViewModel. This SaveCommand property is found by a button in the user interface. So when the button is clicked, the logic of the SaveCommand is executed. In this save logic, we'll save the friend in the FriendDataService by using entity framework. The final thing that we do in this module, we will also update the navigation after we have saved the friend, so that we have the current name of the friend in the navigation. Now let's start with the ICommand interface and MVVM.

Validating User Input
Welcome to the module Validating User Input. My name is Thomas Claudius Huber. In the friend organizer application, we can already save friends back to the database, but so far we don't validate what the user has entered, and this is what we do in this module. As usual, let's take a quick look at the module outline. You'll learn in this module about validation in WPF. Then you will learn how to validate the user input by implementing the INotifyDataErrorInfo interface. You will also learn how to display errors by using an error template. After you have built this basic validation logic, you will refactor it into a base class that you can reuse. Then you will extend it and you will build the logic to validate the data annotations that we have already on the model classes of our friend organizer application. With all this validation in place, we can enable and disable the save button in the friend organizer application. Only if there is no validation error the save button is enabled. Now before we start with validation in WPF, let's see what happens when we save a friend without a first name. The FirstName property has the required data annotation, so it's a (mumbles) column in the database.

Detecting Model Changes
Welcome to the module Detecting Model Changes. My name is Thomas Claudius Huber. In this module I will show you how you can use entity framework to detect if the user has changed a model or not. You can use this information, for example, to enable the save button only if the user has changed the model. Before we start let's take a quick look at the module outline. The first thing that you learn in this module is how entity framework tracks changes. With this knowledge we are able to plan the lifetime of the Entity Framework DbContext in the FriendOrganizer application. We will create and use a FriendRepository that wraps the DbContext and that has a HasChanges method. This HasChanges method will return true if the models in the DbContext have any changes. In the FriendDetailViewModel we will use this FriendRepository and we will enable and disable the save button if the model has changed or not. We will also block the navigation from a changed friend so that the user is aware that he will lose his changes if he navigates away without saving. Let's start now by looking at how Entity Framework tracks changes.

Adding and Deleting Entities
Welcome to the module Adding and Deleting Entities. My name is Thomas Claudius Huber, and in this module you will learn how you can extend the FriendOrganizer application so that the user can add and delete friends. Let's take a look at the module outline. You'll learn in this module how to implement the logic that the user can add a new friend in the FriendOrganizer application. That new friend will be saved to the database by using entity framework. You'll also learn how to implement the logic to delete an existing friend from the FriendOrganizer application. Beside adding and deleting friends, you'll also learn how you can hide and display the FriendDetailView. For example, after a friend has been deleted, the FriendDetailView shouldn't be visible anymore, and when the user selects another friend, the FriendDetailView should be visible again with the new friend. Now let's start by implementing the logic to add a new friend.

Working with Lookups
Welcome to the module Working with Lookups. My name is Thomas Claudius Huber. In this module, I will show you how you can display a list of items to the user so the he can select a single item from that list. Displaying such a list where a user can select a single item is called a lookup. To explain in a bit more detail what we do in this module, let me show you the module outline. In this module, we will create a ProgrammingLanguage-entity, and then we will add a FavoriteLanguageId-property to the Friend-entity. For these entities, we will create a DB migration, so the Friend table in the database will have a foreign key to the ProgrammingLanguage table. This means that the user can select a favorite language for a friend in the user interface. After we have created the ProgrammingLanguage-entity, and migrated the database, we will extend the LookupDataService. We will use the LookupDataService in the FriendDetailViewModel to launch ProgrammingLanguage-entities. When the FriendDetailViewModel has a list of programming languages, we can add a ComboBox to the FriendDetailView, so that the user can select a favorite programming language for a friend. Now let's start and let's create the ProgrammingLanguage-entity.

Working with Object Graphs
Welcome to the module working with object graphs. My name is Thomas Claudius Huber, and in this module, we will extend the friendOrganize applications so that a friend can have phone numbers. Let's take a look at the module outline. We start this module by creating the FriendPhoneNumber entity. We will also add a PhoneNumbers property to the friend entity so that a friend can have phone numbers. After we have created the FriendPhoneNumber entity, we will also migrate and seed the database with entity framework code first. Now when you look at this relationship, you might notice that it's a one to many relationship. A friend can have many phone numbers. These relationships, one to many, and also many to many, are often referred to as object graphs. Now after we have created the entity, we will add a DataGrid to the FriendDetailView, and we will also extend the FriendDetailViewModel so that it can provide the FriendPhoneNumbers to the DataGrid. When we are done with this step, we can display existing phone numbers in the user interface. The next step is to implement the logic so that the user can add and remove phone numbers in the UI by using commands from the FriendDetailViewModel. Now let's start with a friend phone number entity.

Refactoring to Support Other Detail Views
Welcome to the module, Refactoring to Support Other Detail Views. My name is Thomas Claudius Huber. So far, we have built the FriendOrganizer application and it has a friend detail view to display the details for a friend. In the next module, we want to introduce a meeting detail view where we can display the details for a meeting. But to be able to introduce this new meeting detail view beside of the friend detail view, we need to refactor our application a bit. This is what we do in this module. Let me show you the module outline. First, we will create a DetailViewModel property in the MainViewModel of the FriendOrganizer application. So in fact, this is just renaming the FriendDetailViewModel property that is already in the MainViewModel. But we also changed the type of this property to IDetailViewModel. We will introduce this IDetailViewModel interface and it will have for example the HasChanges property that we have already on the FriendDetailViewModel. Beside these adjustments, we will adjust the friend-specific event classes to more generic events for different detail views. Beside renaming the event classes, we also need to introduce properties in the event arguments so that we know for which DetailViewModel an event is for. It can be for example for a friend, for a meeting, or for any other detail view that you implement in your application. After we are done with the events, we will also create a GenericRepository class that we can use as a base class for our repositories. Currently, the FriendOrganizer application has just a FriendRepository class, so we will look what we can refactor from that class into a base class. The final thing that we do in this module is to create a DetailViewModelBase class that we can use as a base class for our DetailViewModels. Now let's start with the DetailViewModel property in the MainViewModel.

Introducing Another Detail View
Welcome to the module Introducing Another Detail View. My name is Thomas Claudius Huber. The FriendOrganizer application contains the FriendDetailView to display the details of a friend. In this module we will introduce the MeetingDetailView so that we can display the details for a meeting, a new entity that we create in this module. Since we have refactored the code in the FriendOrganizer application in the previous module to support other detail views, introducing the MeetingDetailView should be straightforward. Let's take a look at the module outline so that you know what we have to do. The first thing that we need to do is to create a Meeting entity and a MeetingRepository. Creating the Meeting entity means that we also need to do a DB migration with Entity Framework Core first. We will define the Meeting entity in such a way that a meeting can have many friends, and that a friend can have many meetings, so we have a many-to-many relationship. After we have setup the database and the MeetingRepository, we will create a MeetingDetailViewModel and the corresponding MeetingDetailView. Now we are able to display meetings, but somehow the user needs to choose them, so we will also show the meetings in the navigation below the friends. This allows the user to navigate either to a friend or to a meeting in the FriendOrganizer application. In the final step we will ensure that we have implemented the typical use cases, like for example adding new meetings in the FriendOrganizer application. Now let's start with the Meeting entity and the MeetingRepository.

Picking M:N-related Details
Welcome to the module Picking M:N-related Details. My name is Thomas Claudius Huber. As you know from the previous module, the friend organizer application has a many-to-many relationship between meetings and friends. In this module, you learn how to build a picklist so that the user can select the friends that should belong to a meeting. Let me show you the module outline. You will learn in this module how to build the picklist in the MeetingDetailView, and then you will extend the MeetingDetailViewModel. You will add the required properties to the MeetingDetailViewModel, and you will load the friends for the picklist in the MeetingDetailViewModel, and you will also implement the logic to add and remove friends from a meeting. After you are done with this, the MeetingDetailView and the MeetingDetailViewModel are complete. But if a friend belongs to a meeting, the user should not be able to delete that friend by pressing the delete button on the friend detail view. So you will also learn how to block the deletion of friends who are part of a meeting. Now let's start with a picklist in the MeetingDetailView.

Switching to a Tabbed UI
Welcome to the module, Switching to a Tabbed UI, my name is Thomas Claudius Huber, and in this module, I will show how you can switch the Friend Organizer Application, to a tabbed user interface. Currently, the Friend Organizer Application can only display a single detail view, either the friend detail view, or the meeting detail view. In this module, you'll learn how to display multiple detail views at the same time, in different tabs. Let me show you the module outline. You'll learn in this module how to adjust the main view model of the Friend Organizer Application, so support multiple detail view models. Then you will add a tab control to the main window, that is using the detail views models property of the main view model. You will also learn how to display a title for friends and meetings in the tab header. When we are able to display the detail view model in tabs, the user also needs the functionality to close these tabs again. So you will learn how to implement the logic to close the tab in the Friend Organizer Application. You will also learn how to refresh updated friends in the meeting detail view, this, the user can open up now, friends and meetings at that same time, we need to ensure that everything is synchronized correctly, so when the user saves a friend, and the meeting is open that contains that friend, the friend should also be updated on that meeting detail view. You'll learn how to implement this by using events with the event aggregator. Now let's start with the main view model.

Creating a Detail View for Collections
Welcome to the module, Creating a Detail View for Collections. My name is Thomas Claudius Huber. In the FriendOrganize application, we have created the friend detail view to edit a single friend. We have also the meeting detail view to edit a single meeting. Now we will introduce a new detail view for programming languages. And this detail view is a bit different. It is not used to edit a single programming language. Instead it is used to edit a collection of programming languages. Let me show you the module outline. In this module, you'll learn how to create the ProgrammingLanguageDetailView. As mentioned, this is a single view that is used to edit all the programming languages in the FriendOrganizer application. Throughout this module you'll learn how to implement the repository, the ViewModel, and also the view with the DataGrid. So you see, we have some work to do. Let's start to integrate the ProgrammingLanguageDetailView into the FriendOrganizer application.

Styling the Application
Welcome to the module Styling the Application. My name is Thomas Claudius Huber. In this module, you will learn how you can style the FriendOrganizer application that we have built in this course. The FriendOrganizer application has the default look that comes with WPF. You will learn how to adjust the application so that it gets a dark and modern user interface. Before we start, let's take a look at the module outline. At the beginning of this module, I will show you what the final application should look like, so that you know what we will build. After you have a clear picture of what we want to do, I will show you the ways how you can style your WPF application. Then you will style the FriendOrganizer application with Mahapps. Metro library. Mahapps. Metro is an open source library that is used to style the standard controls of a WPF application. You will learn how to add this open source library to the FriendOrganizer application. You will also learn how to use its base styles and its MetroWindow. And I will show you how you can style the navigation and the tab headers of the FriendOrganizer application. But this is not everything. I will also show you how you can adjust the font sizes and the colors in the FriendOrganizer app, and you will learn how to use the Mahapps MessageDialog instead of the standard message box that looks a bit old school. At the end of this module, you will have created a dark and modern FriendOrganizer application. Now let's start, and let me show you what the final application should look like.