In my few years of experience as a developer, I always find it hard to create beautiful and intuitive UIs for my applications. It is always the case, that we start going beyond our own expectations so as to give the user, and partially ourselves, the best-looking application. Most of the time, we start experimenting with the basic tools that are at our disposal in the beginning of mastering a certain framework/programming language and more often then not we write a very complicated code, just so that button can run a nice animation when the user clicks on it.
Well in the last few weeks I had this issue. I had received the task to develop a simple desktop application that only offered the functionality of selecting a set of .CSV files and receiving a filtered version of the data contained in them. I had about 3 weeks to accomplish this and after some manual tests, that were not run by me, I discovered the UI I invested on was still not as tidy and self-explanatory as I had hoped. Time was short and I had to find a solution. So, I relied on Google Material Design.
Google Material Design is a standard and a library for the developers in order to achieve a more universal way for how UIs should be developed. Basically, if you want to implement Material Design on your application, you will get a lot of styles and algorithms for UI elements that will adhere to the standards defined by Google. I must also add that it looks mesmerizing 😊.
I will now give you some input on how Material Design can affect your desktop app using C# and WPF.
So, let us start with the simplest form of UI interactions. A button. Here I had a WPF application with a button and I chose to recreate a dark mode by making the background black.
It looks awful right? Well we only need to follow a few steps to make this little piece of the application look superb.
You will have to start by adding the reference to the NuGet Package called ‘MaterialDesignThems’. You can achieve this quickly by typing the command
Install-Package MaterialDesignThemes in your Package Manager Console.
Afterwards you have to reference the mark-up for the required themes in your .XAML files. The best place to do this is to add application resources in your App.xaml file.
Basically, we are referencing a theme/colour scheme for our application (CustomColorTheme) and also referencing the mark-up code that defines how all UI elements will look like (ResourceDictionary).
If we run the application again, then it will look much better.
I changed set a custom colour theme that represents a dark mode for the background with orange colours for all main controls.
If you go the official GitHub page, you can check on a demo application which shows all features included in this NuGet package and you can also check the code behind. If you are a fan of light/dark modes, then I especially recommend checking it out as you will find out how easy it is to allow the user to switch between both modes.
Duarte Ramos 