Above is a blender, which is close in name to the tool that we will be using (Blend)

Styling WPF applications is easy! [Part 1 — Preparation and Blend]

The following will provide a brief overview of various aspects of Blend that will be useful in the articles that follow.

This is the second article of the Styling WPF applications is easy! series.

Other articles include

1. The Introduction
2. A quick introduction to Blend (this article)
3. Creating your first button style from scratch!
4. More to follow…

Preparation

This series of articles will be using Microsoft Blend 2017, which is installed when you install Visual Studio 2017. If you have not done so already, install the latest version of Visual Studio (Community Edition will be fine). If you have an older version of Visual Studio, that should be fine too (the experience is pretty similar all the way back to Visual Studio 2012).

Introducing Blend

Below the image is a list of items that correspond to the numbers that are shown in the screenshot. These items will make a lot more sense once we actually start making styles in the following articles.

A screenshot of blend with various callouts

1. This pane will display whatever item is selected below it (e.g. items 2,3,4).
2. Clicking this will open the Solution Explorer which will show you your current project and solution files.
3. Clicking this will display all of the WPF assets that are available for you to use in your project (e.g. Button, Grid, TextBlock, etc.)
4. Clicking this will open the Visual States page. This will be explained in a future article.
5. The Document Outline pane. The name may change to Objects and Timeline when you are in the middle of designing a style.
6. This pane will display whatever item is selected below it (e.g. items 7,8).
7. Clicking this will open Properties. Properties displays the current properties of a selected item. To be specific, it will display the properties of the last selected item from the Solution Explorer (2) or the Document Outline (5) (to name two places).
8. Clicking this will show the current project’s resource dictionaries (this pane will be super important for this tutorial).
9. The workspace. This is where you will be able to see state of your current style/template.