How to Design a Windows Form Project Using Microsoft Visual Studio and C# Code!

what's going on you guys welcome back to the channel in today's video i'm going to show you how to create your first windows form project using c-sharp code in microsoft visual studio this will cover a basic introduction to buttons radio buttons labels check boxes drop boxes combo boxes as well as the basic way that visual studio c-sharp code and windows forms all work together [Music] all right so let's go ahead and get started here by creating a new project just show you you should be familiar if you have visual studio um you should be familiar enough with this loading page and what we're going to do is create a new project and this has a lot of filters in it but basically if you put c sharp in there and you select that you want like a windows app or a linux app or anything like that or you want a windows forms project you just need to know what kind of project you're looking for because otherwise you can just clear all your filters and search across everything but then it gets kind of hard to figure out what you want to do we want to use the winforms user interface and we're going to use net framework so use the c sharp windows forms app and just hit next and then for this project we'll just call it intro to winforms like that okay and hit enter and create and it's going to go through and do all of this setup for you but it's basically going to give you initially a form form1.cs which is a design page it should look just like this and then you're going to have a c-sharp program that's called program.cs affiliated with this okay and what's really nice about this versus like um python which we do a lot of stuff uh for on the channel is this in particular has this library basically this builder tool in visual studio that already has buttons check boxes radio radio boxes it's kind of like the built-in library you get with kivy or like tkinter where there are buttons and labels already existing but this tool is actually really friendly to someone who's not a creator natively so like if you want a button on your form you could drop drag it right in so we'll go ahead and throw two buttons on here you can drag them right in and then we say okay well i want two buttons and then underneath those buttons i want to label it's really easy so without any coding i've already created a form that looks roughly the way i want it to look so if you're a beginner in programming this kind of creating a windows form can be a really easy way to initially create the app and as we'll see in just a second um the the way you insert the functional code for what those buttons and labels should do is pretty straightforward if you know how to use the tools so let's go ahead and put two buttons in a label and then let's show some of the radio buttons and i'm just basically going to show some of the most common things you might see in a windows form here and even once you drop it on the form it's really easy to rearrange it modern c modern visual studio installs even have like these alignment shortcuts so i don't know if you can see the thin blue lines on my screen but it'll snap to things that it thinks makes sense to align to so if i have three radio buttons it'll line them up kind of for me as i put them here so i'm gonna put four different types of things on the screen and then a label for each of them to kind of show how we can use that and so we'll do radio buttons we'll do regular buttons we'll do some check boxes we'll do right here check box check box check box you can there's a separate thing that's a check box list you can put numerous options in there or you can just do these regular check boxes check box list is going to basically follow everything we talk about for check box here and then let's do a combo box which is like a drop down menu of options and then let's go ahead and put another label on here so you can build a lot of really basic and yet still super powerful windows forms just with the stuff we have on the screen and if you have your window set up the same way i have mine set up i like to keep the solution explorer over on the right and then the properties window available if you don't have certain things like you don't have the toolbox open or the solution explorer or properties open you might just need to go up to view and select what you want visible when you're designing a windows form it's a really good idea to have your solution explorer open because you'll be jumping back and forth between the design portion of it and the programming portion of it okay so the first thing we're going to do is take a look at how to make these buttons update label one so i can see just from clicking on it and then looking down properties the properties uh the name of our label is label1 so you can change it if you want you could call it like button label or something like that you can also change the default text that shows up in your design here but basically what i want to do is just double-click on this button and it's going to take me into the form1.cs program so the c-sharp programming and you see all this stuff automatically populated using system using all of these different things you don't have to create that with visual studio you um it's made for you when you create the project and then it also will create the name space like we've taken a look at in past projects and then it sets up everything you need to just be right on the button one click commands already so what we want to do with our button one click command is just take a look and say okay when i'm clicked i want label one dot text so the property that says what the actual text of label one is going to read out i just want to set it equal to button one clicked like that and then make sure you finish it with a semicolon and what you'll see now if i go back and i just hit this start button then it's gonna actually boot up the form for me and then if i click on button one and i did this right bam button one clicked right there so button two doesn't do anything yet but we're going to fix that right now so we're going to just double click on button two and you'll see this wasn't here a second ago on this form1.cs but once i double clicked on the button it said okay we're writing code for what happens when that button gets clicked so just as a really easy beginner tutorial you could type all of this in manually and you could create this without looking at the design page but why would you when there's such a good uh shortcut for you right here so now we have these two buttons that'll tell us which button was just clicked let's go ahead and take a look at how to do the same thing with the radio buttons um for the label two okay so i'm gonna double click on the first radio button and i'm gonna steal this line of code because actually what what we're doing is when it's changed so um we want to say okay when the um radio button is clicked then we want to say we'll say option one clicked but now we want update label two text okay and so if i come back and i do radio button two i'm just gonna steal that and say that option two was clicked and there are ways if you want there's a really easy to read literature on microsoft's page of how to use window forms and they'll show you all the things you don't have to do check changed you can do check selected check unselected so it's basically like checking like if you were talking about mouse click you could check on high transition on low transition basically when it became true when it became false the default is either change okay but so right here now what we'll see if and i think i made it label three but it should be labeled two there we go what we'll see now if i run this hopefully and everything's working correctly is button one and button two we'll change this between button one clicked and button two clicked and just tell you whatever was clicked last but if i select a radio button option one clicked option two clicked option three clicked there you go so just like that we have radio buttons and regular buttons now you're saying i wouldn't want to create a form that necessarily just told me what was clicked that's true but what you would want to do with those buttons and radio buttons is write actual c sharp code which i've been showing you how to do with other tutorials and you can sort of learn the concepts for how to do different projects as you need them so this is an introduction to winforms we'll definitely use these forms going forward in a lot of our future projects so let's go ahead and take a look at the check boxes and pretty similar to um what the radio buttons do their default is checking changed and so i will just say now there's a label 3 text i'm just gonna say whatever one was changed most recently so you can see like selecting or deselecting a checkbox is going to overwrite the label as the most recent thing that happened so when i click on any of the boxes to select or deselect these in my app it's going to say that that was the most recent thing that happened so if you wanted this to only check if i click something and i select it so i put the check in there you'd need to change this from check change to like check selected um you again all of that literature is online super easy to find so we're gonna do it this way and then the combo box is the last thing i want to talk about in this tutorial and i'm trying to keep this concise um the combo box is a little different because you have to start if you click on it it'll just tell you um the default is going to be what to do when you select something new so if you selected the first option and then you clicked on the box again and you selected the first option again nothing would happen but that kind of makes sense because it's assuming you only want that action to happen when you've selected it but what you have to do is you have to actually put the objects in your combo box before running the program and to do that it's pretty easy you just come up to where you've initialized the components and you just want this combobox1.items.add command like this and you just put in quotations here what you want the different options to read so i'm just gonna make three and i'm gonna have them say option one option two and option three but basically you need this up in the initialize because you don't want this combo box to be empty so right when you boot your project up you need to have oop and they're all combo box one not one two three there there we go you want when you boot the project up that you have these different options and so this way what we'll do with this one that's a little bit different is we'll say okay label 4 dot text just like the other ones but what we want this to be equal to is whatever option is is actually selected so the text says option 1 option two and option three and so we'll actually use the text from the combo box so we'll say combo box one dot text like that and then we can append we can concatenate another string to it just like this so we can say combo box one text so that'll say option one option two or option three when we select something and then plus this string that just says selected and that's what we'll put on the um on the label four okay so let's go ahead and boot our project up again and let's take a look at the check boxes so we've still got these buttons working and these radio buttons working now if i check a check box and then i check two what what you'll see when i was talking about a little bit earlier if i uncheck one now it's still registering that as a change so the default event for checkboxes is checking anytime it changes so you just need to update it to only look at when it's selected or deselected if that's not what you want but then you can see in my combo box i have these three options that populate because i set them right in the beginning and initialize so if i grab option two now the label says option two selected and then this says option one selected which is great i'll show you one more trick with the combo boxes right now um that may come in handy one other way that you could do this is instead of combo box one text plus selected say you wanted to have a readout somewhere of the index of what item was selected so on that combo box obviously the text says option one two or three but as you probably know in the programming world indexes usually start from zero so actually option one which is the first item we add has an index of zero and you can see what index is selected by instead of like instead of this saying uh text we'll say combobox1.selectedindex so this is just to show the combo boxes and all of these different widgets that we've dropped on our forms have a lot of different ways that you can use them inside your projects so let's go ahead and see what looks different now okay so i boot this up and i say well i'm going to select option one it actually says zero selected because the index is one value behind those numbers that we typed in so that should make sense to you but it's just a way if you had a dictionary let's say that said okay here are my options one through ten or zero through nine whatever and then here's the text that i want to show on the screen you could set up a for loop that says for item in this dictionary go through and add the text for each key as an option under the combo box but then what you would actually do with the items in the combo box would be based on the index value of them so it's just one additional way that you can use a combo box this obviously isn't a form that does anything so maybe it's not super practically useful that you would want to build this specific project but this is a basic introduction to buttons radio buttons check boxes labels the windows form application in visual studio and how it sort of correlates with c-sharp code and then also combo boxes and drop-downs so hopefully you found this useful be on the lookout for additional c-sharp and python code coming out every week be uh be sure to leave a like on the video subscribe to the channel if you found this useful and you want to stay up to date on tons more great content and let me know if you have any questions or what you'd like to see in the future in the comments on this video as always thanks for watching and good luck with your code thanks bye

Channel: LeMaster Tech

Views: 21,422

Keywords: c#, c# constructor, c# on linux, c# visual studio, c# windows form application projects, microsoft forms, visual studio, windows forms, windows forms visual studio

Id: jYo9aTYQwZs

Length: 15min 24sec (924 seconds)

Published: Thu Sep 15 2022