Windows Presentation Foundation Part 2

Vikash Oad
5 min readApr 11, 2021
how to build a login page

Welcome back Techxperts, to another act following the previous blog. In our previous blog we talked about the concept of Graphical User Interfaces. What actually are they and why it is important to build an attractive Graphical User Interface while developing any web application? Then we learnt about a Graphical User Interface called Windows Presentation Foundation and studied its architecture, some basic components and of course its 21st century and there are numerous Graphical User Interfaces so how could we resist doing the comparison of Windows Presentation Foundation to other Graphical User Interface Frameworks such as WinForms and what makes Windows Presentation Foundation a better choice.

Then, after the theoretical boredom we got practical and started setting up the IDE (Visual Studio) for Windows Presentation Foundation to work upon. Just like any other embarking journey of code we then jumped to make our first “Hello World” Program in Windows Presentation Foundation. If you guys have tolerated my first blog long enough, you definitely have the question in mind that that previous blog just showed us how to write and display a simple “Hello World” text on screen where actually is the Graphical User Interface in all that?

Don’t worry your prayers have been answered and, in this blog, we will focus more upon the look and feel of a web page rather than the plain old coding schemes. Before Moving on, make your that you have read the first blog and have the complete understanding of the concepts discussed earlier because we are about to start where we left off.

Digging Deeper:

Toolbox

Being the student, you would probably be bored of writing humungous amounts of code for solving a simple logical scenario. The applications you have built now would be all glooming black and white command prompt type of interface that not only just bores out the user but also it greatly effects the user’s efficiency of achieving the task on an application. That’s where the Graphical User Interface comes in and the great thing about Windows Presentation Foundation (when used with the correct IDE like Visual Studio) is that you don’t have to code every tiny bit of your Graphical User Interface. Visual Studio provides built-in toolbox feature that contains most of the components you will be needing to build any web page.

That does not mean you won’t have to code at all. Visual Studio do provide the basic components needed to build an attractive Graphical User Interface, the keen details about the Graphical User Interface can only be changed manually. The peculiar thing about Graphical User Interface is that there is no chance that a single Interface can run for multiple applications. Just like each and every application is subjected for the use of different users, the interfaces also change according to the type of user, region and goal of user etc. For example, an application built for the use of a 6-year-old would be all colorful and simple so that the children may use them with ease, but the case is different when we build a Graphical User Interface of an application for the use of doctor. Now in the later scenario using a lot of colors may irritate the users while using the application that is why we will build such an application that will be purpose-built rather than creative-built. I know I got a little carried away with the explanation, but it was important in order to understand the importance of attention to detail while building any type of Graphical User Interface.

That is why it is important to get familiar with the coding terminologies and tags used in Windows Presentation Foundation so that we can get an in-depth knowledge and can build more attractive applications. Most of the terms are self-explanatory and resemble the tags used in HTML and JavaScript so I’ll be explaining only some selective tags. Feel free to study in depth about each and every tag used in Windows Presentation Foundation form the link below:

https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview?view=netframeworkdesktop-4.8

Tags and associated attributes:

Whenever you see an Interface, you can clearly see different things like a text box, a button or a hyperlinked text etc. All of these things are known as the elements of a Web Page. To put each type of element a name is assigned to it and this name is known as the “tag” of the respective element. In Windows Presentation Foundation each tag is enclosed in a <> and most of the tags are also required to be closed by a </> like of <button> is the starting tag to define a button in Windows Presentation Foundation, </button> will indicate that all the coding on the button tag finish here.

Now each element has to be defined with respect to its size, color, opacity and height etc. They are called the attributes of a tag. They tell the compiler how a specific element of a Graphical User Interface is supposed to look. They are indicted in the starting tag of right after the name of the tag itself (as shown in the figure above). Following are some of the attributes which are commonly used in Windows Presentation Foundation:

As you can clearly see above most of the tags used in Windows Presentation as self-explanatory. So, you do not have to worry about learning them. Most of the basic work in the Windows Presentation Foundation can be done by simply dragging and dropping the elements into the working space windows and the respective code will be automatically added in the code section. But still of you want to do any further improvement in the look and feel of your Graphical User Interface you can always make it happen by making further changes into the coding section.

All talk no Action?

You probably would be wondering why I am just talking and talking but not doing any actual work or showing you how to make an actual Graphical User Interface. Well, the purpose of this reading was for you to get some more details about the technical working of Windows Presentation Framework because I’m about to show you how I built an “Login Page”. Well, most of was drag and drop that is why you have to continue watching the video to get some better in-sight and hope so after that you’ll be able to create some of your own interesting and modern User Interface.

Do let me know how you liked today’s topic and what you guys want me to cover next. Till then keep on exploring WPF, Techxperts!

--

--