Follow the white rabbit

In the previous lessons, we dealt with the steps required to plan, design and research all the elements of our first complex application, and in this lesson we are going to start the first practical step of it: designing the user interface. I have already said that we will use XAML for this purpose, since it will allow us to customize it to a great extent, and it is also a modern form of workflow that allows us to separate the user interface from the backend logic. Just as I explained in the lesson where I introduced you to XAML, this will not be a lesson for teaching you XAML, the purpose of this blog is to teach you C# programming, not graphic design, so there might be aspects that you may not understand. To start with, let’s open Visual Studio and create a new C# WPF application. I will name mine PersonalLog. This is the template that you should chose:

After the project is created, you will be presented with a blank window, and two files opened: MainWindow.xaml and MainWindow.xaml.cs; the first one contains the graphical user interface, written in XAML and also visually displayed:

The other file is the one containing the programming logic of this window, written in C#:

There is another file that our project contains, App.xaml, and you can think of this file as one that will allow you to set general options for your application. This component is actually also made up of two files: App.xaml and App.xaml.cs, just like any other window. The exception here is that App.xaml is not actually a window, and it does not have a graphical representation. Its purpose is to host central application events, resources that can be used throughout the entire application, like brushes, etc. Inside App.xaml file, we also have codes that we can use to specify which is the first window to be displayed when our application starts. In our case, the file contains the following codes:

and it is quite obvious that MainWindow is the window that will be ran when we will run our program.

Since we are only going to design the GUI of our application in this lesson, we will not concern us with the .cs files where the C# codes are written. On the other side, we need to customize the look of our first window. Since we established that the first window will be a login screen, this is what we will do. At this point, the XAML codes of this window should look something like this:

Change the title string to whatever you’d like to be displayed in the title bar of this window. For me, I will use “Personal Log – Authentication“. I will also modify the size of this application (width and height), set its startup location to the center of the screen, and disable resizing. At this point, the XAML will look like this:

You can observe that the modifications were made inside the XAML tag of the Window element, which represents exactly our window. In the lesson about XAML, I was explaining that XAML is in a very remote way similar to HTML or XML, having a parent-child structure of elements, and each element has an opening and closing tag. This can be noticed here too: our Window element has a starting and a closing tag ( <Window ....> ... </Window>), and it is a parent element, containing a child one, a Grid, which also has a start and closing tag. This can be understood as the Window being the root visual element of our window (the parent), the one that contains all the other elements (its children).

In XAML, Window element can only contain one child. This means that we cannot place our buttons and labels and images and stuff directly inside it. If we tried so, the moment we would add a second children, we would get an error: The property “Content” can only be set once and The property ‘Content’ is set more than once. For this reason alone, XAML offers us so called container controls, such as the Grid. These controls are by default invisible in the visual window, and their purpose is only to allow us to host more controls and children inside elements that would normally only allow one. You can learn more about the types of controls XAML offers in this lesson.

The next step is to place all the controls we need inside the Grid container control. For the login window, we need 3 labels, one textbox, one password field, two checkboxes and two buttons, as planned in our previous lesson. You can either add them by dragging and dropping them from the Visual Studio Toolbox panel on the left, or by writing the XAML codes directly. After adding them, we will end up with XAML codes close to this:

The only problem now is that all the controls are overlapping, because we haven’t set any properties to them, like the size, position, the anchoring, etc. Let’s do that too:

If we run the program right now, we would be presented with the following window:

In the same manner we will design the next windows of our program. To do so, right click on the name of our project, inside the Solution Explorer panel, on the right side of Visual Studio. Pay attention to right click on the project name, not the solution one. In the menu that appears, click Add – Window.

Name this new window Registration. Now, you will notice that our project contains a new file named Registration.xaml:

If we expand the small arrow on the left of the file name, we will also see the Registration.xaml.cs file, the one that contains the logic written in C# of this new window. In other words, this is a method through which we can access the UI/logic files of any window of our application.

Like before, we will add the visual controls that this new window will contain:

Which will produce this window:

Add a new window and name it PasswordRecovery. Its purpose should be inferred quite obviously from the name. This new window is defined by the following XAML code:

and will look like this:

The reason why we placed no text in our middle screen label is the fact that this control will actually display the user chosen security question.

Next window will simply be named Options:

The final window that we will add to our application is actually the main window that will be displayed after logging in, the place where all the action will take place. I named mine Log, and its XAML codes are the following:

Which will output the following graphical representation:

I know the calendar doesn’t look like the one I showed in the lesson when I planned the design of the application, but this is simply because we first need to create the XAML calendar control, which will come in the next lesson. For now, I used the stock WPF calendar, as a placeholder.

Tags: designing, graphical user interface, GUI, writing first program, XAML

This entry was posted on Sunday, December 23rd, 2018 at 03:53 and is filed under First Practical Application. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.