3 ~ Intro to WPF (Windows Desktop App)

There are a lot of tutorials out there, where you start with a blank screen, or near blank application. You certainly learn a lot, but my tutorials/guides will be starting with a something to work against, just a different take on learning. 🙂 It is very rare in a programming job, to walk in and start from scratch. Much more typically, you will have existing code you will work on, especially when you first start. (a lot of first professional jobs are pure bug fixing, you might go years before you get a greenfield project)

Additionally, a lot of existing software developers focus on one particular area of development, and aren’t exposed to other ideas or styles of code. I think one of the best exercises that a programmer can engage in, is to explore other languages or styles of development, taking the ideas they see back to their area of choice.

Much too often, especially for example on the Web, a developer will be so tightly focused on browser compatibility, network lag, and the limitations of a stateless set up, that they don’t take a moment to enjoy creating a desktop application. 🙂

App Overview

Today, we will be taking a look at a little windows application with a basic purpose to store a list of programs, and launch them (with a fun animation, because why not). Like a compact program list.

WPF & XAML, the main technologies in this project, were created as a way to make it easier for developers and designers to collaborate in Windows application creation. In the past, it required a lot of technical skill to create a graphical interface (probably why they looked so terrible back then). XAML separates the design portion from the coding, making both easier.

Let’s get rolling with some hands on!

0.) Visual Studio Community install: https://www.visualstudio.com/vs/community/

You can choose which options to install. The one you need for today is “.NET desktop development”, however other good ones are:

  • ASP.NET and web development
  • Game development with Unity
  • .NET Core cross-platform development
  • Mobile development with .NET
  • And Others (nothing bad here)

 

1.) Fork and Clone: https://github.com/DeveloperGym/DevGym_Project3_IntroWPF

If you forgot how to Fork and Clone a Github repository, check out my Intro to Github.

Essentially the steps are:

  • Create a Github Account
  • Install Github Desktop
  • Go to the link above, and in the upper right, click “Fork”
  • On the right, click “Clone or download, then “Open in Desktop”

 

2.) Compile

After you have the code downloaded, we will test it out! Open Visual Studio, in the middle of the screen select, “Open Project / Solution”. Navigate to the folder where you Cloned with Github Desktop, and open the file: “DevGym_Project3_IntroWPF.sln”

Once the solution is loaded, use the menu up top to select “Debug”, “Start Without Debugging”. This will compile (turn the code you can read in to machine language), and start the program. The program itself is fairly straightforward. Click on the Gear button to open the settings screen. Click “Add Shortcut”. Give a name in the first box, then click the “…” button to select a program on your computer. Something like notepad, or another program you like. Click the Check Mark in the lower right. Now in the main window, the drop down has the name you entered. If you click the right arrow button, it will launch! If there is a problem, like you selected an image, or just typed random text in the second box, it will pop up an error for a few seconds.

Wasn’t that fun! It was like you just built a chair from IKEA pieces, and now you get to sit on it. 🙂 The more fun part, is starting to explore the code that went in to this simple application.

 

3.) Code In Depth

The best way to learn, is to start poking at the code, and changing things. The two most immediate files to play with are:

  • MainWindow.xaml (the visual/graphics file of the main view)
  • MainWindow.xaml.cs (the main code of the program)

You can affect the look and feel with MainWindow.xaml, for example you can change the color of the animate boxes via:

Visual Studio even helps you with a range of colors to pick from, or you can use HTML hex style colors. (#FF0000)

Inside of the MainWindow.xaml.cs file, there are a number of comments that point out where you can make other changes to affect the behavior. Put questions below, or on the Github repository Issues section for the project.

In Step 2, we started without debugging. In order to see where crashes happen, you can “Start Debugging”, where if it has a problem, it will stop and tell you. Then it will be time to pull out your favorite search engine! 🙂

 

Additional

For a much more complex example, you can see my (incomplete) project, Calcium. This does something similar, with a few more ideas planned for the future. It also includes a “24 hour clock” piece that looks pretty neat:

No seconds or minutes hands, just an hour hand. The top is midnight, the bottom is noon. When you hover over the program, it reveals the shortcut buttons that you can tweak via the mostly working settings screen, or directly through the json settings file.

Leave a Reply

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