Just like the person in this picture, we are going to be taking some dough and squishing it into something kind of useful

Styling WPF applications is easy! [Part 2 — Writing a style from scratch]

This article will walk you through how to create a very simple style for Button control.

Disclaimer

Creating styles and templates from scratch can be a very arduous process. As such, there will an article later on that will walk you through creating one from an existing style and control template. Creating one from scratch is still a good learning experience though (so read on).

Article Code

You can find the code for this article in a GitHub repository.

Step 1 — Setup the project

First things first, you have to create a project to store and run your code.

The New Project wizard! Not to be confused with an enchanter named Tim

Create a new project that uses the WPF App (.Net Framework) template (File → New → Project). You can call it anything you want, but for the purpose of this demo I will be calling it CreatingAStyle (I recommend putting a little bit more thought into your own project names).

Step 2 — Observe some changes

A fresh new project. Some would call this an Infant Project (okay, no one would call it that)

Once the project is created, you’ll notice a few things:

1. The Solution Explorer now shows the new project with various default files.
2. The Document Outline pane has been changed to the Objects and Timeline Pane
3. Your Workspace now shows MainWindow.xaml (if it does not, double click MainWindow.xaml in your Solution Explorer)
4. If you click Resources, you’ll see two resource dictionaries (App.xaml and MainWindow.xaml).

Step 3 — Add a button

1. With MainWindow.xaml open in your Workspace, click the Assets tab.
2. Under Controls, locate Button
3. Drag and drop the Button onto MainWindow.xaml

Step 4 — Create an empty, default style

A nifty gif showing how to create a new style

1. With your button selected, click Format → Edit Style → Create Empty
2. In the pane that appears, first select Apply to All
3. Next, click the button that says New (this will help you create a new resource dictionary)
4. In the dialog that appears, change the name of the resource dictionary to ButtonStyle and click Add
5. Verify that your new style will be defined in the resource dictionary you just created
6. Click OK

You have now just created a new resource dictionary named ButtonStyle.xaml with a new default button style inside of it.

Step 5 — Create a new template

A nifty gif showing the creation of an empty control template

1. Right click on Style in the Objects and Timelines pane and go to Edit Template → Create Empty
2. Name the template DefaultButtonTemplate
3. Verify that it is being added to the resource dictionary that you created (ButtonStyle.xaml).
4. Click OK

You have now just created an empty control template that will be used across all buttons in your application. To see this, rebuild your project (in the top menu, click Build → Rebuild) and then open up MainWindow.xaml. Your button should now be gone! Do not fret- it is not actually gone. If you look at the Objects and Timeline pane you will see that it is, in fact, still somewhere in your MainWindow. The reason it is not showing up is that your control template is actually empty (we’ll be fleshing it out in the next step).

Step 6 — Building a new control template

A nifty gif demonstrating the addition of a Border and a ContentPresenter

1. Open MainWindow.xaml
2. Right click on your button in the Objects and Timeline pane and click Edit Template → Edit Current
3. Notice that that your objects and timeline pane has changed to show the structure of your new button template.
4. Delete the Grid as we will not be using it.
5. From the Assets pane, drag and drop a Border onto the Value line item in the Objects and Timeline pane
6. From the Assets pane, drag and drop a ContentPresenter onto the Border

At this point, your ControlTemplate should only have a Border that contains a ContentPresenter

That is it!

Dang, look at that… uhh… gorgeous button

You have now just created a very simple default style for a button! While it may not be the prettiest thing in the world right now, it definitely still functions. I’ll cover how to make it a little prettier in the next article.