Building the DerbySAPiD User Interface

DerbySAPiD Step By Step #3: Building The User Interface


This series will guide you through making a small app to automate fetching and displaying data from both an SQL database and a network drive.

Posts In The DerbySAPiD Series

  1. About DerbySAPiD
  2. Preparing To Create DerbySAPiD 
  3. Building The User Interface (you are here)
  4. Fetching information from the database (coming soon)
  5. Displaying pictures stored on the network drive (coming soon)
  6. Publishing the app so people can install it (coming soon)

Building The User Interface

In the previous article in this series we planned the DerbySAPiD project. The next logical step in the project is to build the UI.

If you haven’t already, I recommend you read the introduction to user interface design. This covers the basics of starting to build a UI and the main control types.

Sketching out a mock up

It is best to have a good idea of how the UI should look before starting to build it. The UI for DerbySAPiD doesn’t need to be complicated. But it is still worthwhile spending a minute or two sketching it out.

Identify the controls we need

During planning we identified the following controls were needed:

  1. An input to type in the RRN of the assessment to search for
  2. A button that fetches the data when clicked
  3. The address of the assessed property
  4. The name of the assessor
  5. The assessor’s certification number
  6. Any pictures or documents stored as supporting evidence for the assessment

Luckily all controls will fit inside one window. This will make it both easier to build and easier for Steve and the lads to use. Easy is good.

Using a pen and paper to create a mock up

Paper mock up for DerbySAPiD
Paper mock up for DerbySAPiD

This really is as simple as mentally visualising how you want the controls laid out. Sketching on a piece of paper takes less than 2 minutes to do. But it helps you lay everything out in a way that isn’t too cramped. You don’t want to be messing about moving controls around within the grid if you can help it.

  1. Start with a square or rectangle to represent the window
  2. Sketch out the controls inside the window
  3. Sense check everything is grouped together and spaced evenly

Using software to create a mock up

Balsamiq Mockup for DerbySAPiD
Balsamiq Mockup for DerbySAPiD

If you are designing a more complex UI, software can come in very handy. For most automation projects this would be overkill but it does let you quickly throw up a mock up. It’s also a lot easier to make changes than if it were pen and paper.

My go to mock up software is Balsamiq Mockups. It is very intuitive to use and is a great example of how user interfaces should work.

It’s not free though so if your company won’t pay you will have to decide if it is worth buying. At $89 (correct September 2016) it is a lot of money for the little you are likely to use it. For software professionals it is good value for money. There is a free trial if you want to give it a go for a project or two.

Setting up the grid

It is easy to fall out of love with the WPF grid. Fortunately we can user our mock up to find the number of columns and rows we need.

It is much easier to set this at the start than to amend it with a partially completed UI. Otherwise to add a column or row would likely mean changing the ‘Column=X’ or ‘Row=Y’ property for several controls.

Looking at the mock up you can see it is broken into 3 columns:

  1. Labels for the controls
  2. The controls themselves
  3. Finally the picture box

Counting up the rows of controls in the mock up you can see there will be 7 rows:

  1. RRN input
  2. Button to set the thing off
  3. Assessor name
  4. Assessor number
  5. Address: Street address
  6. Address: City
  7. Address: Postcode

So let’s add the columns and rows to our MainWindow.xaml file. Click here if you need a refresher on UI design before getting started.

Setting up the grid for DerbySAPiD
Setting up the grid for DerbySAPiD

Adding the controls

Using the mock up for reference we can now add the bare bones controls to the window. It makes sense to either work down a row at a time or across a column at a time. The first 2 columns are related to each other as they are the control and corresponding text label. So we might as well do each label – control pair together like this:

First control added to DerbySAPiD
First control added to DerbySAPiD

Using the Grid.Column and Grid.Row properties we are able to set each element in it’s own space. Remember the column and grid indexes start from zero.

Note the rows of blue lines in the design view on the left. These are the rows we haven’t used yet. In reality they take up no space at all until something gets put inside them.

Adding a ‘Go’ button


Added the 'Go' button
Added the ‘Go’ button

To the button I have declared a ‘Click’ event. Visual Studio offered to make an event handler for this action and I graciously accepted. A new event handler has been created in MainWindow.xaml.cs called ‘GoButton_Click’:

Don’t worry if you’ve forgotten what an event handler is (or even an what an event is in programming terms). We will cover the event handler later in this series. You can also remind yourself over at the intro to UIs.

Adding controls to display the information

Now we need to add controls to show the assessor’s name and certification number and the property address.

The WPF XAML file is a wordy way of building a UI. Sort of like writing a thousand words to describe a picture. Thanks to the invention of copy and paste this is actually an advantage to us!

Copy and paste. A programmer's best friend
Copy and paste. A programmer’s best friend

To add the remaining label / text box combos we only need to copy and paste and change:

  • Grid row index
  • Label text
  • Name of text box
Labels added to DerbySAPiD
Finished adding all the information labels

Did you wonder what the ‘IsEnabled=”False”‘ property does? That disables user input to the box and makes it greyed out. The user can’t type in it but we can populate the text from the code.

Adding a picture box

Added the picture box to DerbySAPiD
Added the picture box (inside a border)

To display the images we will use the <image> class. Until you give it an image source the image control will be invisible/empty. By putting the image inside a <border> we can give it a black background. This means we can at least see where the pictures will go, even if the image is empty.

Borders in WPF act like parents to whatever goes inside them. Notice how the grid column and row index was set in the border instead of the image itself.

A combo box (dropdown list) was added beneath the picture box. When we have fetched the files for an assessment we will list them here. When a user selects a file from the list it will show in the picture box.

Putting some lipstick on this pig

So admittedly at this point the app doesn’t look pretty. I’m no graphic designer but right now it looks like it has been designed by Bill Gates.

Adding a window title

For a start let’s make it actually say DerbySAPiD on the window:

Setting the window title
How do we know it’s DerbySAPiD if it doesn’t say so at the top of the window?

This is as simple as changing the Title tag in the window properties.

Styling the button

The button doesn’t look great either. Let’s give it some colour and some space around it:

Styling the button
Styling the button

We set the background to green and the foreground (text) to white. By adding a margin of 10, the button has some space around it and stands out a little from the text boxes.

Adding an icon

Apps don’t tend to look finished until they have an icon. The icon gets used:

  • In the top left corner of the window
  • As the thumbnail on the app shortcut
  • In the taskbar when the app is open

The icon needs to be an .ico file. There are plenty of free websites that will turn an image into an .ico file for you. I don’t have a favourite – just go for whatever comes up first on Google and doesn’t ask you for your email address. Once you have this in hand it’s pretty easy to add the icon to the app:

Drag the icon onto the project
Drag the icon onto the project

First drag the icon file onto the project in the Visual Studio solution explorer. You could also right-click the project and then click ‘Add existing item’ to browse your computer for the file.

Set the icon in the project properties
Set the icon in the project properties

Right click on the project in the Visual Studio solution explorer, then click on ‘Properties’. On the left you will see a list of tabs (Application, Build etc.). On the Application tab, look at Resources. There are a couple of options but for now leave it as ‘Icon and manifest’. Use the ‘…’ button to browse your computer for the icon you just added to the project.

The icon is now associated with the app. That’s it!

Or almost it.

Because we added the icon after we made the window we will need to manually add the icon to the window. To do this, simply add a reference to the icon in the window properties:

Setting the window icon manually
Setting the window icon manually

The UI in action

That should be enough decorating for now. We can always add more later but first we should aim to get the app actually running and performing a task for us.

Hit F5 to start the Visual Studio debugger and see the app in action.

The draft UI in action
The draft UI in action

We now have a very simple looking app running. It doesn’t do anything yet but the placeholders are there ready for when it does. We may need to make that picture box bigger at some point but for now it will work. For now we have put in the minimum effort to get a serviceable UI going.



Leave a Reply

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