Creating the UI Design: Building a Postman Clone Course

Let's set up the UI portion of our application. Now, on the surface, this should be a simple job. We are just configuring our application for GET commands to an API. That should mean a couple of text boxes, a few labels, and a button. However, there will be more to it. We will set up the UI code necessary to process the calls and responses.
Now this is lesson number 3 in our complete course on building a Postman clone. This course has been designed to be beginner-friendly and an example of what you might put in a portfolio. Although, don't just directly put this course in your portfolio. Your portfolio needs to be uniquely yours, not just a copy of someone else's work.
Full Training Courses: IAmTimCorey.com

[@musicdreamsaudioproduction3908]

Tim, using descriptive names like "CallApiButton" instead of terms like "callApi" helps convey the purpose of the UI element more clearly. Similarly, naming event handlers like "CallApiButton_Click" (yeah, it was a Button, not a Label or something else) makes it evident which button's click event is being handled, reducing ambiguity for developers maintaining or debugging the code.

[@IAmTimCorey]

Thanks for sharing!

[@andergarcia1115]

Master, I'm very excited to start my week learning from you, Thank you!

[@IAmTimCorey]

You are welcome.

[@johnnyvcrow]

The majority of corporations I've worked for still use Forms. I am very thankful you are making this Windows Forms series. I've created a few projects on my own already but, just in the last 2 videos I've learned quite a few things I was not aware of. Thank you so much for sharing this information with all of us. When creating my own projects I am choosing WPF or MAUI. However, to have an edge on other developers I believe it's very important to understand older technologies. Afterall...Someone is going to need to migrate the WinForms apps one day.

[@tejp33]

Nice, so where you learned all wpf I want to work in wpf only...

[@IAmTimCorey]

Thanks for sharing!

[@gmanshackshack6822]

Of course growing and shrinking of controls happens natively. Look into the Anchor property. Anchor all of your controls to top left. Change your API textbox to top, left & right. Set your button to top & right and your results textbox to top, bottom, left & right. Then try resizing your form. Set the minimum form size to something sensible.

[@gmanshackshack6822]

Also, if you change your colors to hard-coded RGB values rather than selecting from the System pallet colors, your UI will no longer be responsive to user Desktop Theme settings. This can yield some unanticipated results. For example if the user has decided that they want their Windows desktop theme to be a "Dark" theme. They may have decided that they want the form background to be dak grey and the label text to be white. Now you've overridden the form's background color to be white, but not forced the label's text color to be black. So your user now has white text on a white form.

[@IAmTimCorey]

Anchoring is not the same thing as a true resizing. Look at a web page. If it is done correctly, it can run on a phone or an ultrawide monitor. Anchoring can make a form a bit more flexible, but it isn't really responsive. If the form is too small, controls overlap. If it is too big, controls are too far apart. There is a lot more to responsive design than just fixing an element to a corner.

[@flmbray]

@@IAmTimCorey this is not a fair response. Anchoring may not quite have the full flexibility of a modern web-based responsive design, but several of the statements you made in the video are inaccurate or at least misleading (eg "I want you [a control on the form] to grow as the page grows and shrink as the page shrinks, and Winforms is not natively able to do that")... As @gmanshackshack6822 says, the anchoring properties do allow the controls to resize fluidly with the form in exactly the way you seem to imply is hard using standard Winforms controls. Similar to your point about web pages, "if done right" on Winforms then everything works perfectly - some controls will stick to the edges you choose while other controls will grow and shrink as needed in order to maintain the overall designed look of the form. Especially in a beginner video, you should be promoting these capabilities instead of saying that it can't be done or that it's hard to do on the basis that anchoring / docking doesn't quite live up to a fully responsive UI. I hope you make these clarifications in a future video.

[@kiwibazza99]

Great video...and series. Easy to follow and understand. A few gotchas to follow up (status bar colouring, etc.). And good homework task to work on. Enjoying ALL you videos on all topics. Keep 'em coming!

[@IAmTimCorey]

I'm glad you are enjoying them.

[@HernanIannella]

This takes me back to my early VB6 days

[@IAmTimCorey]

Yep, it hasn't changed a lot visually.

[@eeevans]

I don't know if it was intended but when you were trying to set the background color of the statusStrip, you typed systemStatus instead.

[@vinayjustin-sh6xy]

At 27:25 , the background is applied only to the text in the status strip

[@IAmTimCorey]

Thanks for sharing!

[@flmbray]

@@IAmTimCorey there does seem to be some buggy behavior with how the designer is working. It seems that when the BackColor is not explicitly set, the background for the strip maintains it's default of Control during runtime, but the WinForms designer picks up the parent form color (this is why it was saying it's White when clearly it was gray), while simultaneously the background of statusStrip sub-controls inherits the background of the parent form at runtime (thus the statusLabel background was appearing as white.) That seems like a bug in the control's designer code. However if you explicitly set the background of the strip, then it works as you would expect - it sets the background of the strip itself. Your code would have worked, but you made a simple mistake - when editing the designer code you typed "systemStatus.BackColor" (i.e. the background color of the status label) instead of "statusStrip.BackColor" (the background of the strip). In addition to manually writing the (correct) code in the designer.cs file, if you had used the designer to manually select "Control" as the BackColor (or any color OTHER than White, for that matter), and then use the designer again to manually select "White" it would have added the code in the Designer.cs file correctly for you. Note this is different (although it seems like it shouldn't be) than selecting "White" when the BackColor is already set to "White" as a result of inheriting it from the parent form, in which case the designer doesn't even realize that you are trying to change it (or it just wonders why you are changing it from White to White and thus does nothing). If you play around with setting the BackColor and using the "Reset" option while the Designer file is open you'll see what I mean.

[@AlexWorrell]

Hi Tim. For the status strip colour, try dropping down the BackColor dropdown and selecting any other colour, and then drop it down again and re-select white. It should then stay white.

[@IAmTimCorey]

Thanks for sharing!

[@jeffsherman9638]

When considering/designing form size, is it ok to always have something like bootstrap in mind during the design phase?

[@IAmTimCorey]

Having a design library in mind is typically a good thing. Now Bootstrap specifically wouldn't work here since it is a web framework, but I get your meaning. There are WinForms UI libraries that can make your apps look great. Planning to use one of them can be smart.

[@CoderzF1]

winforms has anchors for controls. anchors is for responsive design. winforms also has docking

[@CoderzF1]

that means it does do responsive UI out of the box

[@IAmTimCorey]

Anchoring controls isn't the same thing as responsive UI. Yes, the UI can change a bit based upon the size of the form, but that's a far cry from being truly responsive. For instance, if you have a set of three buttons side by side, it doesn't matter how you anchor them, if the form gets too small, they either disappear or they get crunched together/go off the screen. That's not responsive. Responsive would be to stack those buttons on top of each other.

[@phileakins1407]

Set the background colour of the Status Strip to Transparent to get rid of the background grey.

[@IAmTimCorey]

Thanks for sharing!

[@tattoomafew2316]

The statusStrip isn't anchored to span the whole window. The white background is only being applied to where the status says "Ready"

[@IAmTimCorey]

Thanks for sharing!

[@islamahmed-iq6il]

please accelerate the upload of the video

[@IAmTimCorey]

I'll put them out consistently, but I'm not promising that I will put them out faster than once a week. My question for you, though, is this: have you done this week's assignment already?

[@wizzardwilliamlane]

@@IAmTimCorey I am also looking forward to the next video. I have done the assignment and am looking forward to your solution.

[@JayHarlow-sj3jm]

windows forms has a rich layout tool in the form jay

[@alexmarcelafza1192]

Some time I need to restart my router. So, I don't want to do the long term process like log in find system and then select reboot.....could to submit a video on it for restart router by c# progam

[@IAmTimCorey]

Every router is different. They don't just have a way to call them via C#. You would need to find out how to talk to your router via an application. Then you would need to write the custom code for your situation.

[@vinodpadmanaban4980]

kindly, teach us how to use the MVP pattern in the sample project

[@IAmTimCorey]

Thanks for the suggestion. I don't think I will for this course, but maybe in the future.

[@TheMightyAtomNL]

26:51: Intellisense messing you up