Search for a command to run...
A brief introduction to WPF
Hi! I'm a CS student at the University of Cambridge, and an aspiring backend developer. I have experience with Rust and C#, and am particularly interested in cloud computing and distributed systems.
No comments yet. Be the first to comment.
In the last post, we created a static front-end application with Svelte + Bulma, and then integrated it into our Rust code + Dockerfile. In this final post, we will cover the process of actually deploying the app to AWS Elastic Beanstalk. What is Ela...
In the last post, we worked on containerizing the backend of our application, so that we can deploy it with a single command. In this post, we will create a static front-end application with Svelte + Bulma, and then integrate it into our Rust code + ...
In the last post, we created some unit tests that will allow us to automatically test our application. In this post, we will cover the process of Dockerizing our application in preparation for deploying with AWS Elastic Beanstalk. What is Docker? Exp...
In the last post, we created a simple URL-shortener API and tested it manually with curl and a browser. In this post, we will use Rust's integrated unit-testing features to allow testing with a single command, and then automate testing with GitHub Ac...
In the first post of the series, I covered the reasons for choosing Rust and AWS, as well as the process for initialising a new Rust project. If you haven't followed the steps in that article, you can find it here. In this article, we will create a s...
In this article, I explain what MVVM is and how it can help you create better web/desktop applications. I use C#/WPF in my examples, although you should be able to follow along with basic knowledge of OOP and HTML.
Until a month ago, my experience of creating graphical user interfaces was limited to plain HTML/CSS websites and some basic python applications using appJar. I always felt intimidated by the concept of having to work with GUIs: as a backend-oriented programmer, my way of thinking never seemed to mesh well with the popular frameworks.
Recently, I have had to started working on a desktop client for my decentralized social media. Most people would agree that this is an intimidating project, especially for an inexperienced frontend developer. Initially, I found making progress hard - until I learnt about MVVM.
MVVM stands for Model, View, View-Model. These form the three main parts of an MVVM application.
Models contain core algorithms and data structures to be used by the application - the "business logic". These are often written in a "pure" programming language, without using any special libraries.
View-models are special classes to represent the state of a view. For example, they have properties to represent displayed text, user-input textboxes, or even other view models. They should also have functions / commands which represent events (such as when a button is clicked).
View models often have some boilerplate code, so that they can integrate with whatever MVVM framework you are using. However, they should work on their own, with no dependency on the view.
Views contain the code that is used by the UI. They are often written with a markup language (e.g. XAML or HTML). The views outline the structure (and styling) of the view, and their content is set with bindings.
Bindings allow content to be linked to a property of the view-model. Changing the property in the view-model will automatically update the shown content in the view. The binding can also work the other way, using a two-way binding. This is useful for textboxes, as you can have the view-model property update on each keystroke (this can be used for real-time input validation).
To demonstrate the ideas I've talked about, I will quickly guide you through the process of creating an application using MVVM. The application will allow the user to click through a list of people.
I'll be using WPF (Windows Presentation Framework). If you want to follow along, create a new WPF App (.NET) project in Visual Studio. I've called mine Demo.
First, we'll create a class to represent a person. It will contain two fields - Name and Age.
I've put the class in the Demo.Models namespace, and saved it as Models/PersonModel.cs:
public class PersonModel
{
public string Name { get; set; }
public int Age { get; set; }
public PersonModel(string name, int age)
{
Name = name;
Age = age;
}
}
Next, we will create the View Model. There will be four properties - two strings, and two commands. The strings will represent the name and age of the currently displayed person, whilst the buttons will allow us to click through the people.
Whenever we change a property, we have to alert the framework (so that the view can be updated). In WPF, this is achieved by implementing INotifyPropertyChanged and then calling NotifyPropertyChanged whenever a property is set.
I've put the class in the Demo.ViewModels namespace, and saved it as ViewModels/PeopleViewModel.cs:
public class PeopleViewModel : INotifyPropertyChanged
{
//// Bindable properties
private string _name;
public string Name
{
get => _name;
private set
{
_name = value;
NotifyPropertyChanged(nameof(Name));
}
}
private string _age;
public string Age
{
get => _age;
private set
{
_age = value;
NotifyPropertyChanged(nameof(Age));
}
}
public ICommand Previous { get; init; }
public ICommand Next { get; init; }
//// Implementation
private PersonModel[] people = new PersonModel[] {
new PersonModel("Alice", 20),
new PersonModel("Bob", 25),
new PersonModel("Charlie", 30)
};
private int index = 0;
public PeopleViewModel()
{
Name = people[index].Name;
Age = people[index].Age.ToString();
Previous = new RelayCommand(() =>
{
if (index > 0)
{
index--;
Name = people[index].Name;
Age = people[index].Age.ToString();
}
});
Next = new RelayCommand(() =>
{
if (index < people.Length - 1)
{
index++;
Name = people[index].Name;
Age = people[index].Age.ToString();
}
});
}
//// Boilerplate code to satisfy INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged is null) return;
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
In this example, the RelayCommand class is used to wrap functions as an ICommand. An explanation of this (and the code for the class) can be found here.
The age property isn't an integer, because it isn't representing the age of the person: it is representing the displayed content. The view will be displaying a string, therefore the property should be of type string.
Now that the view-model has been created, we will create a UserControl to act as the view. It will have two labels and two buttons - the labels will be bound to the Name and Age strings, and the buttons will bound to the Previous and Next commands.
In WPF, each view has a DataContext. By including the Demo.ViewModels namespace, we can set the data context of the user control to be a PersonViewModel. Then, we can bind to a property X of the UserControl.DataContext by using the "{Binding X}" syntax.
I've saved the user control as Views/PeopleView.xaml:
<UserControl x:Class="Demo.Views.PeopleView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewmodels="clr-namespace:Demo.ViewModels"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.DataContext>
<viewmodels:PeopleViewModel />
</UserControl.DataContext>
<StackPanel Background="White">
<Label Content="{Binding Name}" />
<Label Content="{Binding Age}" />
<StackPanel Orientation="Horizontal">
<Button Content="Previous" Command="{Binding Previous}" />
<Label />
<Button Content="Next" Command="{Binding Next}" />
</StackPanel>
</StackPanel>
</UserControl>
The code-behind is rarely used in WPF applications that use MVVM. All the UI logic should be contained in the view-model, not the code-behind. This separation of concerns is what makes MVVM such a versatile architecture!
Now that we've created our view, we can display it in MainWindow.xaml.
<Window x:Class="Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:Demo.Views"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel>
<views:PeopleView />
</StackPanel>
</Window>
Upon running, you should see the application working as expected:
You may be wondering why we should go through all this effort. There are three main reasons that MVVM is better than the standard "code-behind" approach.
Because your view-model is entirely decoupled from your view, you can use a testing framework (e.g. MSTest) to check that your interface logic is correct, without the need to manually test the UI yourself.
Now that you have created your model and view-model pair, you can can reuse them as a component across your code. For example, you can add a second instance of the component like so:
<StackPanel>
<views:PeopleView />
<views:PeopleView />
</StackPanel>
By nesting components within each other, you can build up complex, modular user interfaces with minimal effort.
You can even create multiple views bound to the same view-model! I've done this by setting the DataContext of the MainWindow to be a new PersonViewModel, and then binding both of the views to it.
<Window x:Class="Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:Demo.ViewModels"
xmlns:views="clr-namespace:Demo.Views"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<viewmodels:PeopleViewModel />
</Window.DataContext>
<StackPanel>
<views:PeopleView DataContext="{Binding}" />
<views:PeopleView DataContext="{Binding}" />
</StackPanel>
</Window>
Note: You would normally bind the DataContext property of a view to a property of the current view-model. However, the main window doesn't have a view-model, and so I've bound it straight to Window.DataContext.
Splitting your application into the three parts allows you to reuse models and view-models across multiple platforms. This is made easy by using cross-platform frameworks like MvvmCross (which supports Windows, Mac, iOS and Android).
MVVM is an application architecture which allows you to develop testable, modular, and cross-platform applications. It splits code into three parts:
The separation of concerns improves code maintainability and readability. Furthermore, the model and view-model can be unit-tested and shared across platforms, allowing for quicker development of cross-platform applications.
If you enjoyed reading this, then consider dropping a like or following me:
I'm just starting out, so the support is greatly appreciated!
Disclaimer - I'm a (mostly) self-taught programmer, and I use my blog to share things that I've learnt on my journey to becoming a better developer. I apologise in advance for any inaccuracies I might have made - criticism and corrections are welcome!