Get started with WPF and MVVM – Build a Music Library using a DataGrid

Who is this blog post for?

You are a beginner in creating Windows desktop application.  You are interested in writing desktop application using WPF on Windows platform.  You know some form of programming.    You want to build an application using WPF DataGrid.  You want your application to look modern and great.  Then this tutorial is for you.

Prerequisites:

  • Make sure you have Visual Studio installed. If you don’t have it, get the free “Visual Studio Community” from here.
  • Quick review of Model-View-ViewModel – MVVM.
  • If at anytime, you get lost, you can check out the code from my github page here.

Steps:

  1. To start with, we want to install an extension called Modern UI for WPF (MUI). It is created by a wonderful developer called Koen Zwikstra from the Netherlands.  In order to install MUI, please follow the following instructions:
    • Open “Visual Studio”
    • Go to Tools > Extensions and Update
    • Click Online on the left navigation
    • In the search screen (top right), type “modern ui”.
    • You should see the following screen:

extensions-and-updates

Click Download and go through the installation process to add the extension.

2. Now let’s create our WPF application using the new extension.

  • Click File > New > Project. In the “New Project” window, click Templates > Visual C# > Windows and click Modern UI WPF Visual Studio.
  • Under “Name”, change the text to “ModernUIMusicLibrary”.
  • Click OK.
  • If you are with me so far, you should see the following in your Solution Explorer:

initial-visual-studio-screen

  • Go ahead and run the application by pressing “F5” on your keyboard. You should see the following screen:

modern-ui-initial-screen

3. Close the application.

4. Let’s take a quick anatomy of the application structure from the Solution Explorer. Our WPF application contain the following:

  • App.xaml: This is the first item that gets executed when the application runs. Go ahead; double-click on “App.xaml”.  Notice StartupUri=”MainWindow.xaml”.  This code is telling our application to show “MainWindow.xaml” at startup.

startup-uri

  • MainWindow.xaml: This is the main UI for our application that displays a title, header and text.

5. Let’s have some fun and change the title of “MainWindow.xaml” to “Music Library”. Double-click on MainWindow.xaml from your Solution Explorer.  In the XAML code that appears, change the Title tag from ”mui” to ”Music Library”.

6. Now that we have a UI to put our content in, let’s create a model (M for Model in MVVM) called Song for our music library.  For the sake of this tutorial, please add a class called Song to your project.  Replace the code in the newly created class with the following code:

 

Note that in reality, we will create models for Artist and Album.  Our Duration may also be of type TimeSpan.

7. Add a class called “Songs.cs” to your project. Change the content of the newly created class to the following:

This is an ObservableCollection of type Song.  Using an ObservableCollection here allows our user interface to get notified automatically when we add, remove or set the list of songs.  We can reference this type as an object in our MainWindow.xaml.

8. Now let’s add a MUI DataGrid. Open up MainWindow.xaml and replace the “ScrollViewer” tag with the following:

 

9. So far, we have added models for Song and list of song collection called Songs. We have also added a “DataGrid” that will display the list of songs on the UI.

10. Now, let’s deconstruct our DataGrid:

  • Notice the property called “ItemsSource”. This allows us to set the data source for our list of songs.  This will automatically bind to the list of items in our DataGrid.
  • “ItemsSource” is set to “{Binding Songs}”. This is the binding declaration.  “Binding” allow us to connect the data grid (called binding target object) to the Songs collection (called binding source).  In essence, the values of the data grid on the UI and the Songs collection are synchronized.

The DataGridTextColumn has a Header property which we use to specify the header for each column in the DataGrid. Similar to the Binding for the DataGrid, we have Binding for each DataGridTextColumn called “{Binding PropertyPath}”.  WPF figures this part out by reading each Song property under our Songs  It maps the binding for each column to the corresponding property in the Song object.  For example,  {Binding Name} will bind to “Song.Name” property of Song object.

11. Let’s run the application again by pressing F5, you can see we don’t have any song in our music library. This is because we haven’t initialized the items source (or data source) for our list of songs.

12. Before we set the items source for Songs, let’s create a ViewModel (VM, ViewModel in MVVM) for our MainWindow. A ViewModel is an interface that drives our view (in this case, our MainWindow.xaml) in conjunction with our model.

13. Now let’s set the items source for our view. To do that, create a matching ViewModel for our “MainWindow.  Right-click on “ModernUIMusicLibrary” project > click Add > Class.  In the “Name:”, change the name to “MainWindowViewModel.cs”.  Change the content of the newly created class to the following:

Go ahead and run the application by pressing “F5” on your keyboard.  You should see the application display the list of songs in our music library.

In summary, I hope you have learnt how to create a modern UI using WPF.  I have also shown you how to use the MVVM pattern in WPF.  Have fun creating desktop apps in WPF/XAML.

P.S. Note that knowledge of XAML can now be used with Xamarin to create cross-platform mobile app development.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.