Mixing Desk

Introduction to User Interface (UI) Design

Facebooktwittergoogle_plusredditpinterestlinkedinmail

What is a UI?

The user interface (or UI) of an app is the part of the app that you can see. It is how a user can control the app: get it to perform some function; give some feedback about what’s going on, whether it’s successful etc. You’ll know what it is but may not have heard it referred to as a UI.

It’s actually possible to run a program without a UI by using the debugger. You may do this as a shortcut to save yourself some work if you are the only person who will use the app. We will cover debugging later.

It’s great to start a new automation project off by quickly knocking together a basic UI. For one thing you will get an early feel for what your app will look like. You’ll also be able to refer to it when you are writing code.

This article assumes you have already installed Visual Studio and are now sitting in front of a new WPF project. If you don’t yet have Visual Studio installed, please get tooled up and then come back here.

What Are User Controls?

All UIs are built using a basic set of ‘controls’. Rather than explain what controls are I will give you a list of the common ones:

  • Button 
  • Text Box
  • Label
  • Date Picker
  • Progress Bar
  • Data Grid
  • Combo box (drop-down list)

If you didn’t already know what UI controls were, you probably have a good idea now. Don’t worry if you can’t identify every control in the list. In about 10 minutes you will know what the controls in bold are how to use them. We will cover the remaining controls later.

Essentially user controls are on screen elements (like buttons) that allow the user to work with the program

Button

A button has 2 main components:

  1. Appearance – The colour, size and shape of the button. Where it is on the screen. If it has icons. The text that tells the user what the button does.
  2. Action – What the button does when you click it (e.g. “Submit”). You can also write actions for when your mouse hovers over or leaves the button.

It makes sense to first create the physical button before moving on to it’s actions.

Appearance

In the ‘Solution Explorer’ area on the right side of Visual Studio look for your first window. In a new project this is likely to be called MainWindow.xaml. Double click it to open it into the main area of Visual Studio.

New Window
Completely blank new window

When you open a XAML file in Visual Studio you will get 2 areas to work with. On the right is the XAML itself. You may recognise the formatting if you’ve ever seen or worked with HTML or XML. On the left you get a preview window. This reads the XAML and shows you how it will look when the app is running.

You will find it is actually possible to edit the preview side (left). Please don’t. It will only end up making a mess of the XAML (right). You can keep things much cleaner by writing the XAML yourself.

You may notice that the window title of yours says “MainWindow” while mine says “UI Introduction”. Look at the ‘Title’ tag in the XAML. Change this and it changes the title of the window.

Tags

The key to remember with a XAML is that pretty much everything goes inside tags. Look at the <Window> opening tag. You will see there are a few properties in there that – aside from the bottom line – probably don’t make much sense right now. Most importantly if you look at line 12 of the XAML you will see the </Window> closing tag. Everything that goes inside the <Window> … </Window> tags will be a child of (belong to) the window.

Grid Tags

The grid is a pretty handy way of organising controls in a window. You can create a number of columns and rows and place your controls in the window according to column and row number. We will cover grid tags in more detail as we add more controls to the window. For now all we need to know is that our controls need to go inside the <grid> … </grid> tags.

Creating a button

new button
Adding a new button

It’s as simple as writing <Button></Button>.

In fact you’ll probably notice that as soon as you write the opening tag, Visual Studio will add the closing tag automatically. It’s pretty great like that.

Your opening and closing tags are probably on the same line. I just hit enter to give me some room. Instead of trying to create a control on 1 line it is easier to read if you give each tag and property its own line.

Adding button text

So now if you look in the preview pane you’ll see we have a huge featureless grey button that now takes up the entire window. That’s because we haven’t set any text for it yet.

Adding button text
Adding button text

Adding text is as easy as writing something between the <Button> … </Button> tags. You can do some pretty fancy things (add pictures etc.) between those tags but just writing some words is simple and it works.

Re-sizing the button

But the button still fills the window. Let’s shrink it down a little so we can fit more controls in our UI:

Setting button dimensions

Here we are adding our first properties to a control. Properties can be used to modify the control and should be added inside the opening tag. In this case we are modifying the height and width.

I know what you’re probably thinking: ‘Seems simple now but how am I supposed to know you can just type Height=”30″‘? Like a lot of things, coding is easy when you know how. Luckily Visual Studio has a feature called IntelliSense. You might have noticed it already:

Intellisense

I just typed ‘H’ and it gave me this hand list of suggestions. The suggestions narrow down as I type more letters. In fact, by typing 1 letter it is allowing me to see every single thing I could get away with writing here.

This is very handy when you are trying to do something but can’t think of what the property would be called. Just type a letter and use the up or down arrows to go through all the possibilities.

Once I have typed ‘H’ and Visual Studio has predicted I want ‘Height’ I can just hit the TAB key and it will finish the rest for me.

I hope by now you are starting to see that – thanks to modern IDE’s like Visual Studio – writing apps isn’t as hard as it looks.

Adding colour

Adding colour to a button

We change the colour by adding properties to the button. In this case the names of the properties aren’t obvious at first. ‘Background’ sets the colour of the background. ‘Foreground’ sets the text colour. I changed the foreground to white to make the text easier to read against the dark background.

That covers off the basics of button appearance. Once you’ve done this a couple of times you will find the whole process we just covered takes no more than a couple of seconds. Remember Visual Studio does most of the work for us by auto-completing our words.

Actions

Adding event handlers

We are about to jump across to the ‘code behind’ file. But before we do, we need to create the button event handlers. When you click a button you are triggering a button_click event. If nothing is listening for that event to be triggered nothing will happen.

Adding event handlers for buttons is really simple. Again, thanks to Visual Studio finishing the job for us:

button_click

Add the ‘Click’ property to the button. Intellisense will then pop up offering to create ‘<New Event Handler>’. Hit the TAB key again and you will see the handler ‘Button_Click’ has been added. This is telling the button that if it triggers a button click event, the event handler ‘Button_Click’ will be listening out for it.

What isn’t obvious is that the code for ‘Button_Click’ has been created over in the code behind file. Well there is a small clue in that we now have a tab for ‘MainWindow.xaml.cs’ open with an * to show there are unsaved changes. Let’s head over to ‘MainWindow.xaml.cs’ to check it out.

Event handler method

Button_Click handler

 

Text Box

Otherwise known as input boxes, text boxes are typical form elements that allow the user to input some text or numbers. They are quick to create visually but can take some extra time on the code side to validate that whatever has been typed in is acceptable.

This is something to watch out for with text boxes: you can type pretty much anything into a text box and your computer has no common sense. If your app is expecting age as a number (e.g. ’31’) but you type it in words (e.g. ‘I am thirty one and a half years old’), it is going to just freak out and crash.

But First: back to that grid concept!

Remember the <Grid> … </Grid> tags from earlier? They are about to start making sense. Let’s add a couple of rows and columns:

add grid columns rows
Adding grid columns and rows

So a few things have been added to the XAML:

  • <Grid.ColumnDefinitions> … </Grid.ColumnDefinitions> tags
  • Within these column definition tags there are 2 columns: <ColumnDefinition/>
  • <Grid.RowDefinitions> … </Grid.RowDefinitions> tags
  • Within these row definition tags there are 2 rows: <RowDefinition/>

The column definitions are used to indicate that inside the tags we will define our columns. The same goes for the row definitions but for rows instead.

You probably notice that the <ColumnDefinition/> and <RowDefinition/> tags don’t have matching closing tags. You can skip the closing tags for some XAML elements by putting the closing ‘/’ at the end of the tag. So we are actually opening and closing within the same tag. It is self-contained.

Rather than set a height and width like we did for the button, we are instead using “Auto”. If there is nothing in a row with Height=”Auto”, it will have a height of 0. If we then add a button (with Height=”30″) to this row, the height of the row will stretch to contain the height of the button (30).

Note the column and row definitions must go inside the Grid tags. They could go anywhere inside these tags but they make most sense at the top, before the controls you add. You may find yourself coming back to add or remove rows and columns.

Creating a text box

Creating a new text box
Creating a new text box

A text box is as simple as <TextBox/>. I have given it a width and have specified the grid row and column. Notice the grid row is 0. In code we tend to count from zero.

So 0 is the first row. Row 1 is the second row. Yes, it’s going to take a little time to get used to.

For the first time I have used the ‘Name’ property to call the text box “TheLittleTextBoxThatCould”. I’ve done this so that when I am working on the code-behind I have a way to reference the text box. This will make sense in a minute or two.

Like with most things code related: avoid using spaces. Naming something with spaces will either not work at all or will cause issues further on. Dependent on what it is.

To keep things organised I have added the row and column number to the button. So we now have the text box on the first row and the button on the second.

 

Label

A label is the simplest control. Why didn’t we cover it first eh?

You can use a label to add simple bits of text to the UI. You can even change the label from the code behind. This comes in handy for describing what is going on while the app is processing a long task.

Adding a label

Adding a label

Adding a label is as simple as putting some text between some <Label> … </Label> tags.

If you don’t specify a grid row and column the default is row 0 and column 0.

 

Putting some code behind the UI

By opening the MainWindow.xaml.cs file we can edit the code behind. This will provide the behind the scenes functionality for the app.

Code behind
The code behind

For now we can ignore the method called MainWindow(). The method called Button_Click() is our event handler for responding to when our button gets clicked.

Here we have a very simple 2 line method. Can you guess what will happen when the button gets clicked?

On the left hand side of the screenshot above you can see the numbers 1 – 21. This is just a count of the lines of code. Our method has 2 lines: 17 and 18. Let’s break them down to see what’s happening.

At this point in your journey into task automation you are not expected to know anything about programming. We won’t get stuck into coding just yet as this article focuses on the UI.

Please don’t be shy about asking questions if something doesn’t make sense. We will also be covering this in more depth later.

Line 17 – creating a message

Here we are declaring a new string we have called ‘message’. A string is a data type you may not be familiar with: it can be thought of as text. Essentially it is a string of characters that don’t necessarily make sense as a number or date etc. It may make sense to a human reading it but a computer is likely to struggle. Unless it has been given very clear instructions.

At the same time as declaring the string we are giving it a value. The value is made by concatenating 2 strings together. Concatenation sounds sophisticated but is simply joining multiple strings together. The 2 strings we are concatenating are:

  1. The string “Hello “
  2. The contents of our text box

Remember how we named our text box ‘TheLittleTextBoxThatCould‘? That is now coming into use. As I began to type the name of the text box, Visual Studio recognised it and offered to auto-complete it.

By following the name of the text box with a ‘.’ (dot) I can access the methods and properties within it. We are interested in the ‘Text’ property. This contains any text input into the text box.

So we expect the message to be:

Hello [name entered in text box]

Line 18 – displaying the message

To display the message we will use a MessageBox. The MessageBox is a built in control that you’ve probably seen in use a thousand times before. It is the little popup dialog that let’s you know something serious is about to go down.

After typing MessageBox then ‘.’ (dot), select the Show() method. You can pass a string (our message) inside the brackets of the Show() method. The MessageBox.Show() method will then show a message box using the string you have given it.

So by calling:

MessageBox.Show(message);

We expect a message box to appear which displays the message.

Running the app

Click the play button to run
Click the play button to run

Click the ‘Start’ button in the toolbar. It has a green arrow icon that looks like a play button. You could also hit F5.

The app will fire up and show your UI running. If there are errors feel free to ask for help in the comments below.

The app in motion
The app in motion

Although the app isn’t very useful you can see how easy it is to quickly knock up an app that works.

How did you get on?

Did you manage to follow along and end up with a working app? If so, well done! Are you feeling slightly pleased with yourself?

No worries if it went tits up somewhere. That is a common aspect of coding that everyone needs to accept sooner or later.

Sometimes things go wrong and you can’t figure out why. You stare at different parts of your code trying to work out where you went wrong. With enough patience you’ll get it and the relief you feel will be amazing.

Luckily the internet is full of programming information. Just searching for the error you have is likely to bring up a few posts on StackOverflow or another helpful site. As always, feel free to ask for help here too. You can leave a comment below or contact me directly.

 

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

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