Complete Guide to Windows Forms Applications for Beginners [2023]

welcome back to our new YouTube course on creating Windows Phone applications using visual studio I am thrilled to have you join me on this exciting Journey where we dive deep into the World of Windows application development in this course we will start from scratch and guide you through every step from installing Visual Studio to getting familiar with the essential components in the toolbox in this course I am assuming that you know a little bit about c-shot because this is the language that we are going to use in order to create Windows applications together we will explore the powerful capabilities of visual studio and discover the potential of its toolbox components from buttons to text boxes from drop down menus to check boxes and others we will uncover the secrets behind each element and learn how to utilize them effectively in our applications but before we jump into the coding Adventure we will ensure you have everything set up correctly in the initial part of this course I will walk you through the installation process of visual studio and as we progress we will put our knowledge into practice by developing a final project where we will incorporate all the components we have discussed throughout the course this hands-on experience will solidify your understanding and Empower you to confidently apply your newfound skills into making your own application are you ready let's Dive In in this section we are going to see how to install Visual Studio make sure to visit the description because I am going to uh put this link there once you reach this link or you reach this page here you can find a the download page where we can download visual studio here we have the community it is a free version but the professional and the Enterprise aren't free so make sure to to install Visual Studio 2022 the community version if you have a Mac here we have a version for Mac users but for Linux users sadly there isn't a version for that okay so if you are on Windows just click on free download and this is going to start downloading Okay so here is the installer once you click on it uh you just you know how to install Windows applications so it's very easy to do once once that's done you need to open the visual installer Visual Studio installer and here you need to install some packages okay so once you finish the setup you can find these packages that you can install so you have a lot of things that you can install with Visual Studio but here I'm just going to show you what I have installed so you can see here for me I have installed the.net desktop developments so if you don't have this you can't follow the rest of the the course if you don't install this you can't follow the rest of the course because here you can see we have Windows forms and this is what we are going to be using in order to create Windows applications um once I have I have here this that's a source and processing and that's it once you check these here you will have an install button for example if I want to add this you can see that I need in order to install this I need to download 100 megabytes so then you can click on install and this is going to install once that's finished you can go back and here you can find your version so when you launch it you get this screen here I have a lot of projects that I have worked on that's why I have uh this open recent dialogue where I have all my projects but for you you need to go to here create a new project here make sure to search for Windows forms applications okay so this one I already have it here uh if you use them if you use it a lot you are going to find it here so I'm just going to click on it and you can see we have C sharp that's why I said in the beginning that you need c sharp in order to follow this course so once you click on it just click on next here you can name it whatever you want and choose a location once you do that let me let me uh choose the location and I will be back so I have named my projects I have chosen this location now click click on create and as you can see if you have created your projects you are going to get what you see here in the screen in the rest of this course we are going to discover the components that exist in the toolbox so see you in the next video hello everyone in today's video we are going to talk about buttons in a Windows Form application buttons are essential elements that allows users to interact without application let us explore the Key properties and events that you will encounter when working with buttons in order to insert a button in your application you need to open the toolbox if you don't see it you can click on view and here you can find the toolbox okay so click on it and you will get it in here here you can search for buttons okay so I'll click on it and click on the form or you can click and drag in order to set a custom size okay I will remove this one and keep the first one in this properties panel you can see that we have a lot of properties here that we can change in order to customize the look of our button for example we can change the size from here or from here you see you have the size property for example if I want a 200 pixel by 50 pixel button I can do that here you see here the results the text that is displayed uh in the button can be changed using the text property for example here I am going to say click me you see the text was changed if I want to make it bigger because here the button you can see that this is very big so remember to make it easier for people to read the text I can change the font size here I can say for example 12 and another property that you can change is the flat style for example I can change the style of the button you see there are here sometimes that we can change there are other properties such as the background color uh if you want to enable or disable the button there are a ton of properties that can be used but what I have showed you right now are the properties that are the most used there are other things beside properties and those things are called events if you click on this uh icon you can see here we have a lot of events so what are events for example when I click on the button I want something to happen so this is an event and it is called The Click event you see here so automatically when you open this tab you see that the click event is selected because it is the most used event when working with buttons for example if I want let's say when I click on this click me I want to to close the application so what I am going to do I can double click on the button or I can double click here in the click events so here it's very easy so I click two times on the button and you can see that in the code I am going to get a new function that will be executed whenever I click on the button so you see so this is uh the button click method now as I said when I click on the button I want to exit or close the application in order to do that we can write this code it's very easy let's say for example exits I want to exit the application when I click on the button now if I run the application and click on the button you are going to see that the application will exist because this is the event that was triggered okay so our application now is running when I click on click me you see the application exits so uh the event that was triggered has executed the code inside of this function so I hope I have made everything clear for you uh in the next video we are going to talk about check boxes hello everyone in today's video we will be talking about checkboxes in a Windows forms application check boxes are useful elements that allow users to make selections or indicate choices within our application let's explore the Key properties and events associated with checkboxes again everything exists in the toolbox here search for checkbox and click on the form application so I'm going to drop two here I am not going to talk about the same properties that we have seen because here we have some properties that are common that means that a lot of components such as checkboxes texture boxes buttons and others they may have some properties that are the same but here that's why I'm not going to talk about the size the phones but I will show you the new properties that we haven't seen before or the properties that are particular to the components that we are talking about for example here with checkboxes uh we have a new property called checks that means when I run the application this checkbox will be checked by default in order to show you that I will launch the application by hitting F5 or by clicking on the Stars button as you guys can see now when I click on this the first one I can uncheck it and I can check this one I can check both but by default the first one will be checked when I lost the application and the other won't be now let's say if I check this one I want to delete or or exit the application we can do we can do more than that but we haven't seen some other components that's why I just exit the application but in the upcoming videos we are going to see a lot of cool examples of how to use these components so in order to do that we need an event and that event is called checked changed that means that when I change the state of the checkbox this event will be triggered that means if I so initially this checkbox is unchecked but when I check it I have changed the size of it so that that will trigger this this event so I will double click on it that brings this method and here I will exit the application so I will do the same thing that we have did uh in the previous video so we are going to exit the application when I run the application now you see we have successfully exited the application there are other things for example here we can say if the checkbox so this is our checkbox two so this the second one if it is checked we are going to uh do the same thing so you see we have tested that it was checked and uh we exited the application we can do the same thing for the first one but it won't work let's see so here I am on the events Tab and I will double click on this one I have this I'll copy the code that we have wrote in the first method in order to own time and here to checkbox one now if I uncheck the checkbox the application won't exit why am I going to see why you see it didn't exist why because here we are testing if it is checked is it checked now it is unchecked so here we are going to invert the condition so if it isn't if the checkbox is unchecked then exit the application so I will rerun the application and you are going to see now that when we uncheck the first checkbox like that the application exits so these are I would say the basic things that you need to know about checkboxes and we are going to see them in details when we are going to build a applications that has a different or a lot of components buttons picture boxes group boxes we are going to see these things in uh upcoming videos so next time uh we are going to talk about color dialogues so this this confidence so we are going to see this in the next video hey everyone in today's video we are going to talk about color dialogues in a Windows Form application the color dialog is a powerful tool that allows users to select colors for various elements within our application let us explore the key features and functionality of the color dialog in order to use the color dialog elements you can see it you can search for it or just drag it and drop it you see when you do that nothing happens where it is but it is not like the other elements like buttons checkboxes color dialog comes here as other elements that you are going to see in the future so color dialogues are elements that allows us to choose colors how are we going to use that I am going to use a button as we have seen because we have seen them when I click on this button I will open the color dialog in order to pick a color so I'll make this button bigger I will change the text choose color for example I'll make the font bigger 12 okay now I will double click on the button in order to add the method that will execute the code when the click event is triggered so in this method what are we going to do we are going to show the dialog in order to do that we are going to click on dialog results like this diagram is also is equal to color dialog dot show dialog so this is going to show our dialog and here uh how to write this code so over on the application and show you what does this mean okay so this is our application now when I click on this button for the first line of code will be executed and it is going to show the dialog so this is the dialogue that was uh as we can see because we have uh run we have successfully executed this line of code now what does this mean dialogue result is equal to okay it means that's when I click on OK I will take the color that I have chosen in this Palace of colors and since it as a background color or stories in this background color variable okay so when I click on OK it is going to disappear and the background color was changed because this is referring to the forms background color we don't want that here we want to to say button one dots background color okay now if we rerun the application and click on the button I will choose let's say red color when s is okay you see the buttons background color was changed so that's how we use uh color dialogues in order to choose colors it's a very easy to use element and the code is I think very straightforward so in the next video we are going to talk about combo boxes hello everyone in today's video we are going to explore combo boxes in a Windows forms application combo boxes are powerful controls that allow users to select an item from a list or input their own custom value let's dive into the key features and functionality of combo boxes in order to use combo boxes we can find them in the toolbox drop it here so this is how a combobox is looking I'll just have one and here let me launch the application in order to show you how a combo box works okay so here we have an empty combo box when we click on this little arrow we will have lots of options that we can choose from or we can input our own if we want so as you can see the combo box is not failed in order to fill our combo box you need to click on it you see this little arrow click on it and click on edit items here I will just type item one item two just for demonstration purposes and item three I'll click on OK now when I rewrite the application I will see these options you can see now I can choose one of these items or inputs my own let's say item 20. but what if I don't want the user to input his own item let's say well in order to do that we have another uh property that is called drop down style here you can make it we can choose this side drop down list now when I rerun the application we will force the user to choose the the items that we provide we don't want him to add something else you can see now I cannot edit now I am typing but nothing happens because you have changed the style and let's say we don't want the user to edit or enter something that doesn't exist okay so in order to do that you can change the style here there are other styles for example here simple you can see the simple side will show you the items in advance it's like an expandable combo box you see it is expanded and I can choose from it here also I can modify the items so now we have added these items manually but how can we add them let's say if I click on a button okay so if we want to do that I will insert a button I will make it I'll add it here it is it's with and change the text to say add item I will double click on the button to bring the click events method and here I will select the combo box combo box number one dot items so items is a list basically we are going to add to it something I will say add and here uh item uh I don't know let's here I'm going to to initialize a counter so I'll say private int counter equals to 3 because we have uh three items before and here I will just say plus counter and I will Implement its value plus plus now whenever I click on the button I will add an item plus a counselor so for example the first time I click on the button I will add item three and then item four item five Etc let me let me run the application okay so initially how many items we have just three now I will click on the button add item item 3 was added now add item item 4 was added Etc I can click on the button as one as many times as I want and now I have a lot of items that were added now how to delete for example I will select this one because I have two of them I want to select this one and delete this how to do that well I will add another button and show you uh how can we do this so here I will click on control and drag the button in order to duplicate it and make sure that the event is is not the same one because what we want to have another method that will be executed when this button is clicked so let me first change the text to remove item remove item and here I will just double click on it okay so how can we do that well it's easy so here we we did add we have removed so combo box dot items dot remove and here you can see the description it says removes the specified item from the combo box all we have remove ads so these are two functions that we can use remove an item from the combo box add the specified index so here for example uh I can show you the items if we are if we have selected the item that uh that exists in the second index we can specify the second index in order to remove that specific item okay so here we are going to do removed we are going to see them both so remove ads we need to say combo box one dot selected index so this is going to give me the objects in this specific index so all the index of the icing that was selected let me run the application and see if it is going to work or not okay so here I am going to choose uh oh we don't have a lot of items but I'm going to choose the second one so I'll click on remove you see now item 2 was successfully removed let me add more more items let's try the Nissan item four remove item now item 4 doesn't exist what about item three I will remove it you see we had two item trees now uh we have successfully deleted one of them okay so we have done that using remove ads let me comment this line and see the other uh option so items dot remove selected icing so when you use remove you use the selected item property when you use remove ads you use selected index okay and by the way if you are wondering how am I going how am I getting these uh cool Auto completion things that's because I am using uh as you can see here I am using GitHub copilot's uh extension it's a very wonderful extension that will help you uh a lot When developing anything okay so that's why I am guessing these Auto completion uh suggestions okay so let's rerun uh now the application with this method and see if it is going to give us the same results or not okay so here let's remove item two you see icing tool was removed let me add more items let's remove item three remove item so we have removed item three what about item six remove icing so item 6 was removed and Etc so that's how uh or I think I think these are the things uh that you need to know about combo boxes okay so in the next video we are going to talk about uh uh labels hello everyone in today's video we are going to talk about labels in a Windows forms application labels are simple Yes essential controls that allow you to display text on your applications user interface let's dive into the key features and usage of labels and by the way this video won't be long because this is a very very very simple uh nms that we can use in our applications okay so to use a label uh we can select it from here label and we can add it to our form okay so a label is a static test as you can see we can change what is this displayed here for example let's say insert your name so we use labels in order to make certain things more understandable for example here we have used combo boxes before but I call a box like this you won't know what you are supposed to do with it or even if you choose an item what does that mean in order to add more information we can have a label close to a combo box for example here let's say insert I don't know your your country let's say insert your country are here when you read this label and open this combo box you are you say oh I am supposed to choose my country so that will add more information so this is why we use a label labels for this kind of uh things so as I said labels are static so it just changed the text property uh of of it and for example if you want to change it intercode let's say here so this is something new we haven't talked about this so in the form when we launch the application in this loading event what we want to do when this form is loaded this event will be triggered and when the form is loaded we want to change the text of this label so in order to test we have the text property and you can say something like select your country in capital letters for example when we run the application we are going to see that the label will change programmatically of course see before it was uh it was not in capital letters but now it is because we have done that or we have changed that in the load events I hope uh this video was helpful and in the next one we are going to talk about uh daytime picker hi everyone in today's video we will be exploring the daytime picker control in the windows forms application the date time picker is a powerful tool that allows users to select dates and times conveniently let's dive into the key features and functionality of the daytime picker as always we need to open the toolbox search for date time picker and add it to your form now I will try to run the application by clicking on F5 just to see how this date time picker looks like you see here we have a visualization we know that this is 17 June 2023 but we can change that here so click on this little arrow and here for example I can look for uh 2001 August for example August 16th OS 23 and the result changes here also now we are going to add a button and a toolbox so and a label Master toolbox so this here is our button and we need label while you are adding this because we are going to see how to retrieve the data from this date time because that's what we want we don't want we don't want it to stay here just for for I don't know for uh aesthetic reasons no we want to receive the data so I'm just going to increase the default size increase you have are having a hard time seeing what I am doing okay so 10 seems good I'll make this button a little bit bigger and double click on it in order to add this click event here I will I want to change the text of this label how am I going to do that so I'm just going to say label one ah label one dot text is equal to date time picker give me the value that you are holding and convert that to string because dot value returns a daytime okay so here we are going to convert it to string and then set it as a text folder label now when I click on the button I will get the date information okay you can see here we have 17 June 2023 and also we have hours minutes and seconds but what if you want just uh days months and years okay so that's simple you just need to come here and uh formats the string for example I want years in the beginning after that I want months and days okay now when I run the application again I am not going to get those hours minutes and seconds okay so I will click on the button and here is the result that we are getting so we have the year months and days but look closely so there is something that is wrong here so June is the sixth month so we need here we should get six but why are we getting 50. so this is wrong that's because here I have done that uh just to show you this problem here normally if you want to set months you need to make that Capital like this mm now when we relaunch the application we are going to get the correct format you can see here we have six instead of 50 that we have got before if you want for example that before converting this to string to get a for example if you want to get the day of the week or the day of fear you have a lot of lots of things that you can change or how many seconds are in here so you can get that too and convert that to string okay so we are going to convert the date into seconds let me see how that looks like you can see we have remember before we had uh days months years hours minutes and seconds we have just got the seconds components or the second part of that value okay you can you can do a lot of things you can get the dates the day the month the year or you can just set that here for example I want just hours uh so here you get uh uh this suggestion here it says 12 hour clock so it's going to say AM or PM but using HH is going to give you uh hours from 0 to 23 basically so I'm going to choose the second one and run the application again so right now it is let's see it is 5 AM let's see uh what am I going to get so yeah so we got the five uh am okay so basically that's how you use the daytime picker so we have seen how to retrieve the data programmatically but there are other things that we can change for example uh in the properties here you can for example change the minimum dates that the user can choose the maximum days okay we have another property so here you have you see the date format is long we can change that to source or to display the time or to something that is custom you can custom that if you want so I hope I have made everything clear for you guys in the next video we are going to look at text boxes hello everyone in today's video we will be talking about text boxes in a Windows forms application text boxes are versatile controls that allows users to input and edit text within your application let us explore the key features and functionality of text boxes open your toolbox search for text box we have a lot of options but we want this one add it to your form so that's how a text box looks like here I'm going to uh have three of them in order to show you a property that we can change for example here we can make this one just read only that means that we don't want users to change the text that it is displayed here uh I'm going to add something like here uh something so something will be displayed in this text box what users cannot change it here on the other hand read only is set to false that means that user users can input text here they can modify it even if I add something here text they can still delete this text and add their own the third option or uh that we have is suppose that you want your users to log in with their accounts and you want them to enter their password if you let the text box like this they are going to insert the key their password but they can see it if you want to hide the password and add those circles like uh we we are all familiar with you need to come here and choose this use system password character okay so when you do this let me run the application now you are going to see that yes you are typing your password but you don't see characters you see just those symbols okay so as I said the first one we can change the text in it we can delete everything that's fine but the second one look the cursor is here but now I am typing but nothing happens and even if I want to delete I cannot do that because this text box is just read only here you can see now I am typing the password but I see nothing okay so now uh you saw that the symbol that we used is those circles because we have used the system password character we can make this false and enter our own for example I want the password character or the password symbol to be dollars I can try that if I want let me run the application now and you can see now I am typing I'm not typing dollars I am typing characters and they are guessing they are basically Visual Studio is hiding those using the dollar symbol uh we have other other things let me copy this here we can change uh change the type to multi-line in order to uh write a big for example if I want to write a paragraph uh I can make it multi-line here it's not going to work because it's going to here we have just one line if we arise something that has I don't know a lot of characters we cannot see that correctly for example here I am just typing you see I I'm also able to see the whole text but here because I have multi lines I can type and type and type uh and even if I for example I reach this the text will continue to the next line Etc okay so I think these are the properties that are most used now uh let's see how we can for example set the text of this text of this text box and change some of these properties programmatically again we will be adding a button in order to do that so I will drop the button here I'll double click on it and this text box is called text box one unless it is text box objects so that you can access it rapidly here so text box options dot text is equal to visual studio 2022 this is just an example okay so the application now is running when I click on button one you see the text was changed to visual studio 2022. now what if I want to make it uh uh read only so I can type here read only is equal to true and when I run the application that's what I am going to get okay so button one now the text was changed but now I cannot change it because it is set to true because read only was set to true so this text box we are going to be using this a lot in the upcoming videos when we are going to create a examples of applications this has a lot of components in order to apply these things that we are learning right now so in the next video we are going to take a look at picture boxes hello everyone in today's video we will be exploring picture boxes in a Windows forms application picture boxes are powerful controls that allows you to display images and icons within your applications user interface let us dive into the key features of texture boxes in the toolbox search for picture box and drag it three or four okay so that's how a picture box looks like um so here we can impose our image and display it in our form but before that let me change the size of this container so I'll make it Square so this is a 100 by 100 square and here uh I can for example choose the image from my disk what I can do it programmatically so we are going to use this as a startup and then I'm going to do it manually so I'm going to search for an image and I'll come back okay so I have added here an image of a gear I'll click on OK okay so you can see that we cannot see it's because the image of the key is very big but here the the size of the square is just 100 by 100 pixel in order to fix this you click again on this little triangle and here you can change how the image will be displayed so here if you change Auto size you can see that the picture box will try to change its size in order to fit the whole image we don't want that we can Center the image for example here we are even though the image is Big we are going to sensors inside of this box uh uh here we have stretch the image you can see we are going to reshape the image in order to fit inside of this picture box and this is what the result that we want so if we are if we launch the application we are going to see this so we have successfully added an image manually but we can do this programmatically so we are going to add a button again and we are going to obtain the same result using C sharp so you see here is our image perfect now uh I will take this and try centering it I will try to make it a little bit bigger so that you can see better 300 by 300 pixels okay so this is our image I am going to add a button and in order to Center companies for example here I want to Center this button with this picture box so I'll select the picture box and center the puzzle so I will Center it like this you see the button now was is centered with this picture box I will sure before that I will remove this image I don't want it anymore so let's say none okay I'll double click on the button in order to add the method uh or the click events method and here so this picture box is named picture box one so I'll try to access it so picture box one dots we can here we have a lot of options we can do load okay and here we need to specify uh the location of our image uh so basically you are just going to paste here the path to to your image but there is a a faster way for example if you want to hear if you don't want to paste the whole path you can paste just the name of the image for example you can do image.png instead of C uh I don't know column Etc and the holdback but in order to be able to do this you need to come here solution Explorer and right click here go to Open folder in file explorer so this is your projects folder go to bin debug and here we need to paste the image so I will paste the image that I have used before the image of that skier and I will come back okay I am back and I have inserted the image here if I double click on it you can see so it's basically the same image the image of that skier and here the file extension is PNG so this is very important okay so uh you you see here the image is named gear that's the same name that we have here and Dot PNG if I run the application now and when we click on the button we should see that the image is going to be added you see the gear image was successfully displayed in the picture box so this is a method that we can use we have another option so this is uh the option that this is most used but we have another one so we can say image is equal to image from file and if we run this it's going to work the same way let's wait for the phone to appear so click on the button and yeah it's worked so basically you can use both parts for me personally I prefer the first one because it is very uh easily easy to rise here again if you don't have this image in your debug folder this will not work and you need to specify the whole path to your image so this is the end of this video I hope I have made this picture box clear for you guys in the next video we are going to uh see radio buttons hello everyone in today's video we will be discussing radio buttons radio buttons are essential controls that allow users to select a single option from a set of mutually exclusive choices what does this mean if we have three or four choices we can only choose one of them before we have talks about check boxes if you had four options and you are working with checkboxes there is no problem you can choose them all you can check just two or just one but here with radio buttons you you have you are allowed to choose just one option so let's let's dive into the key features and functionality of radio buttons again open your toolbox search for radio button I will be adding a let's see I'll be adding three here we have two and I'll duplicate this one so that we have two and let me change the text to radio button tree okay so how in order to see the difference I will be adding also check boxes checkbox one two and three let me quickly change the text to say check box 2 and check box 3. okay and I will add a button you might need it later if you want to do something uh with C sharp okay so I'll place the button here let me run the application so that we can see this difference between these two components our application is running and immediately you can see that one of these radio buttons was selected automatically and if I want to to select the second one you see the first one was unselected why because this is the difference here we can change we can check them out if we want but here you are allowed to choose just one option from all of these options that you are given so this is basically the difference between these two if you are I don't know creating a form and you want users to uh select uh one or more options then a checkbox will be uh the choice but if you want them to choose just one for example if you want them to specify their gender so you have male or female here you cannot add check boxes that means that they can choose both male and female and thus doesn't make sense here you are going to choose radio buttons they are allowed to choose mail or female okay so now let me exist out of this application we are going to see for example let's say that I have selected this radio button or this one I want to change a label based on that choice okay so let me add the label here and first of all let me let me let me make everything bigger by changing the font size to 10. okay so that's looks good to me okay let me double click on the button Okay so what can we do so here we are going to say if radio button one dots checked that that means that we have selected this radio button what are we going to do we are going to look for the label and change its text to say radio button one is checked something like this I'm going to copy this and say else radio button 2 dot checked not to sorry I need to say else if radio button 2 is checked close the parentheses and I will paste this and say label two else if radio button V is checked uh we are going to say radio button 3 is checked okay let's run the application and see if this will work or not okay so when I click on the button you see it says review button one is checked when I click on the second one or when I check the second one and click on the puzzle I get radio button 2 is checked and the same for the third review button so now I will show you something if you want to change it uh again let me run the application quickly you see when the form is being loaded the first radio button is selected automatically but what if you want to select the second one or even the third one so for that we need to double click on the phone in order to add this load depends and here we are going to say this um radio button let's say three dot checked is equal to 2. so this will check this one and uncheck all the others perfect you see now the the third one was checked in if you want to to check the others simply change three by two or one okay so I hope you have uh understood why we use radio buttons and why they exist and what is the difference between radio buttons and check boxes in the next video uh we are going to look at uh progress bars hello everyone in today's video we will be discussing progress bars in a Windows forms application progress bars are valuable controls that visually indicate progress of a task or operation to the user let's dive into the key features and functionality of progress bar in the toolbox search for Progress bar okay drag it and try to make it a bit bigger like this okay so this is our progress bar I don't want the second one I'll make it here in the center and I will add that button a button handling okay button and label I'll put the label here this label will indicate the percentage of this product bar okay let's make it a bit bigger so that we can see now 16 for example uh our button will be here so now when I double click on this button I want to set this progress bar to a certain value but before that let us see what are the properties that are specifically made for Progress bars so here we have the minimum value for example here we have zero percent and the maximum value is set to 100 if you try to go uh further than that you are going to hit an exception so be sure that the value is less or equal to 100 or uh I don't know a thousand if you decide to change this maximum value uh just make sure that uh the current value of the progress bar is less than or equal to the maximum value here you can also change the step for example if you start from zero the next step is going to be 10 20 30 Etc you can change that also all of these things can be changed manually in the uh in the code we have another property that we can change and it is called style so this is just the side of this progress bar we have blocks so this is the default style we have continuous and Marquee we will come later to this style property so let me double click on the button that opens this here if I want for example let's say I want the progress path to be set to 50 how am I going to do that it's simple I'm going to write progress bar progress bar one dot value is equal to 50. so this is Imagine as 50 basically so we will have a green rectangle uh that will indicate that the progress bar has reached 50 okay so initially the progress bar is the value of the progress value is set to zero but when I click here on the button you see we have a assortment animation and the progress bar goes from 0 to 50 percent okay so um I had a a better idea instead of changing this and running the application each time I will do this I will duplicate this progress bar three times okay and here I will leave the style set to blocks but here I will change that to continuous and the second one will be set to Marquee like this okay now I need to change something so here I have changed the value to 100 percent and I'll duplicate this two times so here progress part two and three okay I will launch the application and using this method we are going to see these Styles uh in the same time so click on the button okay so the first difference so the first style Marquee uh it doesn't have a value so it just rotates and roses and roses so this is the first difference but the first and second one I don't see they are the same I think uh they may try changing the value to something like 70 see if that makes a difference so here as I said we don't need the value uh it just keeps loading and loading and loading indefinitely okay so here you saw I have removed the progress three dots value and it's still uh loading so you can see here uh The Continuous and blocks style are basically the same I don't know is is there any difference but visually I see no difference okay now let me see let's see how uh to increment this value for example we have a process that it is taking a certain amounts of time and we want to simulate that okay so we are going to I'm going to create a private int counter we are going to start from zero remember the minimum value is set to zero and I am going to create a for Loop so uh we can create for Loop like this so and I set to zero and I plus plus we don't need this counter we have uh we can use it here so that counter is basically this I index and here it should be less than less or equal so the maximum value we can reach there is no problem uh okay so let me let me make this one 101 so that I show you that we should make sure to not exceed this value I'm going to take these two values and insert them here so how am I doing this basically I am holding alt and using the up Arrow okay so this moves this up and when I click on D and when I hold the alt and click on the down arrow I can go down so this is a handy shortcut that you can use and if you want to indent this correctly you just click on Tab okay so the value will be set to I and basically this Loop will populate or will try to change the values from 0 to 101 and when we reach 101 we are going to get an exception okay so let's click on the button you see we have immediately we have immediately got this exception because this runs so fast uh we haven't even got the chance to see the progress bar being updated so here it says arguments out of range exception value of 101 is not valid for value it should be between minimum and maximum okay so let me go back to 100 and you saw it was very fast now let me add a timer or let me try to sleep this for Loop by a certain amounts so you can say what you can say system.trading notes and this is going to add a delay of 100 milliseconds okay now when else the application I click on the button you see now this is we see that's progress so basically this is the for Loop being uh executed and the values will go from 0 to 100 and now thankfully we didn't hit any uh exception because we have made sure that the value of this progress part is between 0 and 100. so I hope you have uh understood the progress bar and how to use it in your applications uh next we are going to look at group box hello everyone in today's video we will be talking about group boxes in a Windows forms application group boxes are containers to help organize related controls and provide a visual grouping effects let us explore the key features and functionality of group boxes in the toolbox if you search group box and drag it to your phone you can specify here for example the size you get something that looks like this in order to show you uh why we need to use group access I am going to add some radio buttons for example so this is one two three and I will have two more here for example if I run out the application these radio buttons are going to be coupled what does mean what does that mean this means that when I choose this radio button I cannot choose the others if I choose the last one I cannot choose the others but what if these means something and these mean other things in other terms I can select I would like to select just one radio button from these three and just one from these two but now you can see that I cannot do that because they are all in the same let's say level so when you select one they are all the other ones are going to be deselected or detract okay so in order to solve that we use uh group boxes so I can take these and isolate them inside of a group box so when I put these inside I will make sure to resize the group box I will delete these two and just duplicate the group box okay so now uh I will launch the application and you are going to see that now we don't have this problem because we have used a group box so now I can select these three and select these three independently so this is uh one one way of using a group box there are other other ways if you want for example to divide your application into different areas you can use a Google so you can have an area where you are going to put the controls and area where you are going to get the input from the user so this is a very easy to use components in the next video we are going to look at message box hello everyone in today's video we will be discussing message boxes in a Windows forms application message boxes are powerful tools that allow you to display messages and prompts to the user facilitating communication and interaction let's dive into the key features of message boxes in the previous video all the elements were existing in the toolbox but a message box if you search for it you are you aren't going to find it that that's because this is something that we are going to create programmatically so in order to show our message box I am going to add a button when I click on this button I am going to exit the application so let me change the text to say exit and change the size of it as well as the files okay so our button is ready I'll double click on it so our method was successfully generated now in order to show a message box we can say message box so this is the class dot show so this method show takes uh four arguments or you can give just one depend because we have lots of options but let's say the first string is the message that you want to show we are going to say do you want to exit the application so this is the message that the user will see the second string let's say information we will see this string when we launch the application we are going to understand the third arguments are the buttons that are going to be added to the message box so we can say message okay for example so message box buttons dot ok and the icon so message icon message information so this is the item that is going to be displayed so now when I launch the application and when we click on the button we are going to get a message box with these informations so we have we will have the message uh the OK button and the information icon okay so here is our application running I'm going to click on exit and you see so this is uh let me pull this off so we have the message this is the message that we have Rose information was written here so select the title the the message box button does okay we have it here and we have information so this is fairly customizable uh in let's say for example that if you had an error and you want to show that to the user here you can just change the information to say error and you are going to see that the icon now will change you have a bunch of them I'm not going to go through them all but I I showed you now information and see that's how the error icon looks like but you can experiment Yourself by looking at the other attributes so just click on control space and you see here all the uh icons that you can use the same goes for uh for this button here I have chose okay but we have yes now okay cancel return cancel and yes no I cancel okay so here I I am going to choose yes now instead of okay because if the user doesn't want to exist he can click on no let me show you and say in the application because if he really wants to exit he then uh is going to click on yes okay so now they don't do anything first we can program that so that's what you are going to see now so I'm going to take this message box and go into the pieces and add something so the dialog results and so I'm going to paste this click on OK here because we don't have lots of space okay so here uh I'll make it information so I have done the same thing so I have just took what you have wrote uh before and stored that into resolve so now when I click on the button yes that's going to be saved in this object and we can have a small test in order to to see if uh we have clicks on the yes person order so if we have clicked on yes we are going to exit the application so I'm going to say application.exist else uh do nothing so do nothing I'm not I'm not going to write this case because we are going to stay in the application okay so uh the application now is running I'm going to click on exit when I say no okay you see nothing happens but when I click on yes okay we have successfully exited the application so this is how you can use a message box uh inside of Visual Studio it is a very powerful tool that you can use in order to in order to uh inform your users and in the next video we are going to look at error providers hello everyone in today's video we will be talking about error provider in a Windows forms application the error provided component is a helpful control that allows you to display error icons and messages next to input controls to indicate validation or input errors let's explore the key features and functionality of error provider in order to show you how to use a the error provider I will be inserting two text boxes okay so this is the first one and the second one I will just copy it like this and I'm going to insert a button we have seen before that we can use labels in order to inform our users for example uh here I am going to say username so here they should enter their username is I'm going to copy this one and here I am going to say password I'm not going to hide the password because this is just for demonstration and I'm going to increase the the width of these text boxes and the button will be placed here the button will say uh let's say for example uh sign in okay and now we are going to insert the error provider error provider okay so I'm going to insert two of them and again they come here it's not like the other companies so it's like the color dialog the timer and other elements that come here okay so now I will click on the sign in button and I'm going to test if the user is exists in the database for example uh uh we are going to accept this and show a message box that says successfully logged in or something like this but if the Xbox the user has entered here doesn't exist in the database we are going to show the error provider okay so I'm saying the database but I am just saying uh we are just going to compare the two two strings it's that simple so here I am going to say username uh let's say Okay admin seems good to me uh private string password admin so I'm going to keep this very simple so if uh the text box one dot text equals to uh blah blah so you can see uh using copies it makes it very easy uh here we have a small problem I have wrote provas initialized private okay so here we are just testing if this username is equal to what what the user has written and if and the password is it equal to Xbox two dot text if that's true then we are going to say to show login success but if any of these uh is not good we are going to uh show the error provider okay so here I'm going to say error provider dot set error and where should we set the error we are going to set it next to the text box one and we are going to say that a username is not correct technically uh we shouldn't do it like this uh because if the username was correct uh then this message doesn't mean anything so we need to test if uh okay so if it's not equal to user then we are going to show the error the same thing uh for this second text box we can say if textbox2. text.e equals password and we are inverting that so that means that they are not equal then show that second error so sensor here we say username is not correct but here we say password is not correct okay so it seems a lot but let me run the application and you are going to see that it is very easy uh to understand okay our application is successfully running so now I'm going to write admin admin so this should show the message box because the two are equal okay let me click on the button and yes we see uh here it does we have the message box appearing you can see that we don't have a lot of details because here we just specified the message we didn't specify the button the buttons or the icons and even the text that appears here okay I am going to click on OK and now I'm going to change just the admin I'm going to add s when I click on sign in you see here we have the error provider so these two weren't equal so we went to the else case and we have compared is text box one equal to username now admins is not equal to admin so show this error next to the text box so so this this is how we use error providers so a network provider is used to set an error next to a component here the components that we have chosen is text box one and next to it we have the error provided or the error icon and when you hover over it you get this message that says username is not correct we will have the same effect if the admin was not correct because we have a second text just down below okay so they are equal now what if I write admin like this so This is called the the error should go away but when I click on the button it won't so in order to fix this we are going to add the else case and here we are just going to uh say error provider one dots premiere so clear the error we don't want it because the the username is correct the same thing is true for password so I'm going to say error provider two dots clear now let me run the application and now it should be complete I'll click on sign in you see we have the two errors now I'm going to say admin the first error should go away yes that works and when I say here admin the secondary will go and the message box will appear that was successfully uh here you see that it didn't work why because uh normally we enter here but we don't go to the else case so that's why this didn't work well but if you want uh if you want this to work too here we need we are going to say so because they are too equal we can take these and write them here so error provider want us clear and the same thing for two so now this should work so in the next video we are going to look at timers hi everyone in today's video we will be talking about timers timers are essential tools that allow you to perform actions at specific intervals creating Dynamic and time-based functionality within your application let's dive into the key features and functionality of timers in the toolbox search for timer drag it and drop it again it's going to come here it's like the other provider that we have seen in the previous video so a timer uh has these properties so it has an interval is it enabled or disabled by default and so these are the two properties that you need to use and the name okay so in order to use it we are going to uh add the progress bar so I hope you have seen the progress bar video there we have used a for Loop in order to increment our progress bar but here we are going to use the timer so here we are going to say so for each 100 milliseconds we are going to implement our progress bar by a value of one so here I am not going to add a button but I'm going to do this when the form loads so I am double clicking on the form in order to bring this form load uh this form load method so here initially the timer is is not enabled so it is disabled so that's why here we need to enable it so we can say timer one dot enabled equals true or uh for me personally I like to use timer1.stars so this is going to start the timer so you can use both if you want okay so now when this uh timer starts it is going to so it is going to trigger this event so the tick event so when you start your timer the code that exists in this method will be executed so here in this method we are going to update our progress bar so in order to do that we are going to say progress bar dot value plus equal one so take what you have as the in your progress bar and add it and add one to it and this is going to be executed each 100 millisecond you can change this if you want uh if you want one second you can make it a thousand but this is going to be very slow in order to go from zero to a hundred so that's why I'm leaving it at 100 or even we can reduce that to 50 milliseconds now we are going to hit an error like a before if this value exceeds the maximum value which is equal to 100 in this case we are going to hit an error so in order to avoid this we are going to say if progress BAR value dot value is less than or equal to 100 we can increment the value less than not equal because here we are adding so if it is less than 100 then we can increment the progress bars value okay so I hope you have understood what we have we have did here now let me run the application in order to see if it is going to work or not okay as you can see the form is loaded and you can see that the progress bar is being updated uh by the timer uh and each value and we add one to this progress bar each 15 50 seconds and you see we didn't hit any error because we have made sure that the value doesn't exceed the maximum value so this was 50 milliseconds we can reduce that to 10 and this is going to be much much faster you can see the progress bar will reached the maximum value very quickly so this is a basic basic basic example that shows you how to use the timer in the next videos or when we finish talking about these components that exist in the toolbox uh we are going to see a lot of examples I hope if we have time uh that shows you the power the benefits and the power and the beauty of this timer so in the next video we are going to talk about a data grade View hello everyone in today's video we will be talking about a data grid view so a data acute view is a powerful control that allows you to display and manipulate tabular data let us explore the key features and functionality of data grid view you can search for it in the toolbox so that's a great View I am going to import it like this so it is it's like a table uh no I want just one let me aim of this one I'll take this one and make it a bit bigger okay so we have our empty data grid view in order to add columns to it because we said that we are going to manipulate tabular data we need to add columns so here add column so this is uh the name that's going to be displayed for example here I can say first name add uh the second one last name add let's say I don't know grade City um birth birthday s at okay so we have these five counts uh the data Credit View is mg so we'd have zero rows okay so you see here we have an empty space we we have a property here that will allow us to stretch these columns in order to take all of this space and that is here so it's it's called also size column model so here you can choose fill okay and it feels that empty area that we had before okay as you can see uh view is empty we can do this programmatically I'm going to double click on the form in order to bring the load events so this is the method uh we are going to write data grid View one dot rows dot add and here we need to how many how many columns we have one two three four five so here we need to specify five values so the first name let's say a mad the second or the the last name Sadia uh the grade let's say I don't know 16. uh what what else do we have City Magnus and the last argument so it's the birthday I'm going to make it a string I'm not going to uh use a date time object here so 2001 8 16. so I was born in this stage and also add this so I'm going to add the same value I'm not going to modify this a lot because it's going to take a lot of time and this is just uh I'll just demonstrating that we can do this so when we lost the application you see we have all the values were added to our table now we can select them like this and you have this little triangle that shows you uh the row that you are selecting so here what if I I want to delete this third row I am going to add a button called remove in order to do this so toolbox button this button as I said will be called remove let's double click on it and here we are going to say data grid view dot rows dot remove so it's the same thing we have seen this before when we were working with um with combo boxes remove you specify the item but here we are talking about the row and remove as you specify the index so we are going to say remove remove and here we need to specify the row so we are going to say that's a great view dot current row so current row is basically that row that was selected you remember when we were selecting one row we had a small triangle uh in the far left that indicates that this row is being selected and I'm talking about this little triangle so here we say we are saying that's agree to those current row that means give me this row that it is selected and now when I click on remove sadly the values are the same so we cannot distinguish that so I'm going to change just this one to say 36. in order to see the difference and now uh when we okay so this one is the one that I have changed so the row is selected I will click on remove and you see the whole row was removed you can do the same thing so here we have used the remove but you can uh of sorry but we can use the remove ads command or remove as a method and specify the the index so this is at index 0 1 and 2. so we want to remove the second uh row or the row or the third row so because we are starting from zero we want to remove the third row so three minus 1 is 2. okay ah I forgot to come on this line so this will not work and it will work with uh we are going to delete it two times okay so now the beauty of this method is that I don't need to select it to select this row so look now I'm selecting the first one but when I click on remove you see that uh line that's that has 36 integrate was removed okay okay I want to show you something else with the secret view we can for example uh Source our data if we had numerical data so we can Source it like this and you see that the values are changing normally here if you had some value values that are very different this will work perfectly the same we can do for each of these columns so I hope you have understood why we need to use a data grid View and in the next video I'm going to talk about the web browser hi everyone in today's video we will be discussing the web browser control in the windows phones application the web browser allows you to embed web browsing functionality directly into your application enable enabling users to view web content without leaving the application let us dive into the key features and functionality of the web browser as well as how you how to use it okay so go through your toolbox search for web browser drag it to your form and change the its size so uh by default as you can see it took the whole page but I don't want that I want to resize it so here I you see the dock I don't know why it is filled but you can change it with I don't want it to be filled uh so I will say none and now I can change the size of my web browser so in order to win some time I am going to design the form and I will be back okay now I'm back and as you can see I have uh made this design so here in the middle we have our web browser as you can see here in the name here I have some buttons the first one navigates back forward and refresh and this is a text box so here we are going to type the websites that we want to check then when we can navigate we are going to go to this website if we click on the link uh and want to go back when we can click on back or we can go forward if we want to refresh to refresh the page we can click on the refresh button the properties that we have uh for a web browser are this so this this URL uh uh so here you can see the the description it says specifies the URL that the web browser control has navigated to so I'm not going to do to use to type the URL here but we are going to do it programmatically so that's what we are going to see now now I'm going to go to the navigate uh button because it is very easy to program double click on the navigate button and this method will be generated now type web browser.navigate and here we need to specify so as I said before in the form we have this text box so we are going to get the URL from this text box so here I'm going to save text okay now if we want to go back so I'm going to program all these buttons because they are very easy so here we are going to say go back so as you can see this is just one method here where we click on the forward button we are going to say web browser dot go for and if we want to refresh the page we are going to say web browser dot refresh so you can see the web browser is a very easy to use tool now I am going to run the application in order to see if we can successfully navigate to uh some websites that we are going to type in the text box okay so the application now is running here I'm going to say google.com let's give things simple click on navigate and as you can see uh Google Now is appearing one thing uh that I want to that I need to mention is that yes this web browser works but uh it's not that useful because you cannot use it as I don't know as your web browser because as you can see the design is old and it doesn't support a lot of things for example if I want to go to YouTube and watch a video that will not work so you can see it says you need to update your Navigator so that does not doesn't work with a lot of websites here let's say for example speedtest.com so let's just uh see if we can reach this website so as you can see it always gives this error but I mean it works but it does it's not that great so you can see uh let me try another website so this is a very new website so shotspdf.com navigates okay so you see it didn't work because this website is very new and it's uh uh it has a lot of things that that needs to be loaded okay but I just wanted I just wanted to show you this website this web browser confidence because uh yeah we can use this so you can see here when we click on the back button now we are on speedtest.com when we click on that we are going to go to google.com let me remove these errors okay so you saw when I clicked on back I now I'm on Google when I click on forward uh now I am on YouTube I can go back to speed test Etc if I want to refresh the page I can click let me go back okay if I click on refresh I can refresh the page as you can see but as you can see it's it's not that usable okay so I just wanted to show you this and you can see here that the text box is not uh updating in order to fix that let me go back and here I'm going to double click on the uh or not double click on the web browser because this is not the event that we want so we want to trigger this event navigated where is this uh yes so this is the event that we want when we navigate to a new website we want to check the URL and set it uh as a text in the text box so here I'm going to say web browser dot URL dot two string so this is going to get us the URL that we have navigated to and this is going to enable us to update the text box accordingly whenever we go to a new website the text box will change so for instance here I'm going to start with google.com as we did uh earlier you can see now the text box has changed if I click on let's say images or Google Play anything so you can see that yes indeed the text box is changing so here we have some games we can go back as I said and yes the text box is automatically updated so I'm going to stop this and I think these are all the things that you need to know about the web browser so in the next video I'm going to talk about open file dialog hi everyone in today's video we will be discussing the open file dialog in a Windows forms application open file dialog is a powerful tool that allows users to select and open files from their local system within your application let's see how to use the open file dialog in order to use the file the open file dialog we can find this in the toolbox I'm going to drag and drop it you see we have we have it here now I will add two things I will add a text box and a button okay so this text box I will make it multi-line and I will change its size to be uh something like this is good and the button will be here and there will be size the form also I will double click on the button or before that let me change the text to let's say load and now I am going to double click on the load button and when I click on the load button I am going to bring the file the open file dialog so I'm going to write the code and I'm going to see it as how the open file dialog looks like first of all we need to specify the types of files that we want to open so in order to do that here I'm going to say open file dialog dot filter so this filter will enable us to choose a certain type of files like this for example I want the users to choose or to upload just text files and this is the extension that I am looking for dot txt or all the files if they want so these are filters that they can choose we are going to see this but before that let me continue uh coding so here I'm going to say if open file dialog dot show dialog is equal to okay so we have seen this it's like message box when you click on the OK button okay so for now what we are doing we are taking the file that we have specified we are taking the file name and uh printing that in the text box okay so let's run the application in order to see uh how this looks like and then we are going to add more things here okay the application now is running let's click on the load button as you can see so that's this is the open file dialog so it's a dialog that allows you to open files uh okay so here I'm going to go to the downloads and as you can see here this is the filter that I have specified and it is showing me this text box and if I click on all files I can see more more files as you can see but if I want the users to just upload text files or images then I need to specify this filter okay I'm going to click on this file test open and as you can see what we have done when we clicked on the OK button we took the file name so this is the file name and this is giving me here the whole path so we can go to users my name downloads and in the downloads folder we have this file and we set this uh as a text in the text box now we are going to uh try to parse the the text that exists in this text file let me open it first just to show you uh what exists there so I'm going to open the test text file and as you can see we have something inside this so we are going to try to access what's inside of this file and print that or uh or set it as a text for this text box okay I'm going to stop the application from running here I am going to say for example string file name here uh I'm going to say text box one dot text equals to system dot IO dot file dot read all text that exists in this file so as you can see we have no errors so this is we are going to use the system namespace in order to read the text from a file let's see if this is going to work or not okay let's load the test file double click on it and as you can see so here uh we have successfully took the contents of this file and inserted into this text box so basically this is uh how we use open file dialogs and they are very very very useful tools so this tool is very useful we can use it in order to open files and we have something similar but it is called save file dialog it is going to allow us to save the dial for example here I can make adjustments to this file and I would I can have a button here that will let me save this file into my local Drive we are going to see this in the next video so I hope that you have understood the open file dialog as I said in the next video we are going to talk about save file dialogues hi everyone in the last video we have seen how to use the open file file dialog in order to open files read them and insert their content into this text box now we are going to continue on this application by adding a save file dialog so this component will enable us to save let's say the changes that we have made to our file into our local drive so the save that the save file dialog is basically the same thing instead of opening we are going to save as I said I am going to add a new button that will enable us to do so let's put it here next to the load button I'm going to change the text to say save okay I will double click on it and you can see that I can copy this code and change the open file dialog with save file dialog and this just shows that these two uh basically do the same thing here instead of reading so okay let's take this now uh the only thing that we need to change so when we have loaded the text box we have made changes now when we click on OK we are going to set to save those changes so let's let's see how to do that so we can say uh string finally and the copies is suggesting these two lines so that's basically what we need to do so we take the file name as we did here and then instead of doing the read all we are going to say write all text so this is the file name and the contents of this file will be uh what we have written in the text box let's see if this works or not I'm going to click on F5 and then I'm going to load uh the test file I will try to make some changes to it okay like this for example I am going to say my my name here let's save it let's create a new file so test two save you can see we have no error let me delete or okay so let me load the first text you can see the first text file there is no there is nothing that was added but if I load the second file you can see this is the modification that we have made as I said basically these two uh go together uh in your application for example it's like here when uh working with in visual studio so here it's they say open folder you can see so this is the open file dialog and if you want to save your file for example I don't know if you want to save it somewhere you can save as here you specify the name and then you click save and these are the filters that we have been talking about so as I said these two components they are very easy to use but they are very powerful and you are going to need to use them in the last fewer applications I hope guys that you have understood how to use this uh components in the next video we are going to see uh something called menu steps hello everyone in today's video we will be talking about menu steps the menu saved components provides a convenience and organized way to create menus and submenus within your application allowing users to access various functionality with ease let's see how to use them a menu strip is like this menu that we have here so we have the menu ad in each menu we could have sub menus like ease so this is a menu stick and in order to use it you can find it in the toolbox drag and drop drag it to your form and you can see that it is very empty let me try to recreate this menu set that we have here so first of all we have file here we have edit View gets and projects so I'm going to uh text us the first five now I am going to add sub menus first of all let's add open save here you can see when I click on type here let me go back here we have this little triangle when you click on it we have other things that we can add we can add a text box a combo box a menu item and a separator uh I'm I will be adding a separator so that that's how it looks like it's like these separators that we have here in top and here I'm going to say for example quit here uh these are represented like Puzzles we can treat them as buttons for example when I click on them I can execute some lines of code for example if I double click on file you can see that this uh method was generated the same thing when I click on open I get this uh uh this method and inside of each one of these methods I can execute some lines of code for example here I'm going to show a message box saying that I clicked on the file option for example file here I'm going to say open or instead of saying open I am going to use what we have learned before so in the toolbar in the toolbox I am going to drag the open file dialog as well as the save file dialog so I am going to use these two when I click on the respective buttons here so when I click on the open I am going to open the file dialog so this in this method I am going to write open file dialog1 dot filter is equal to something I'm going to accept this if dialogue result so I'm going to show open file analog dot show dialog if this is equal to dialogue result.okay then I am going to show again a message box saying that the file is opened or something like this when I click on the save button I am going to to use the save file dialog instead so save file dialog.filter if save the time if saved dialog.show dialog is equal to ok then I'm going to say the file is saved this is just an example we aren't we aren't working with files here just to show that this that these buttons uh uh are programmable we can insert some lines of code inside of their methods that are going to be executed so for instance let me launch the application in order in order to see this in action okay the application now is running when I click on file I get this message box when I click on open so let's wait a bit so this is the open file dialog and when I click on open okay so let me take something so I will take this file open I get that the file is opened uh the same thing for save so I get this uh uh save file dialog when I click on Save um let me add three to this in order to not override this file click on Save and I get the message box successfully so this is basically uh how we can use a menu strip and as I said it's like the one what that we have here in Visual Studio okay so in the next video we are going to talk about tool strips hello everyone in this video we are going to talk about two steps the two strip control provides a powerful and customizable toolbar for your application allowing you to add buttons drop downs and other controls to enhance user interaction let's see how to use it in the previous video we have left here we just added the menu strip now we will add the tool strip okay Dragon robbers and you can see it added that second row here you have this little triangle that allows you to add a lot of things for example we have a puzzle so a button has an icon by default this is the icon of the button uh we have a label we have we have a lot of things that you can add drop down buttons if you click on this button it will bring this drop down like this one for example so this is a button that has a little drop down in it uh but here I am going to remove these because there is a an option that will add default buttons quickly so right click here on this white area go to insert centered items and voila you can see that here we get a lot of standard icons for example this one will open the file dialog this one will save the file this one will print the file copy paste cut so these are operations that we normally use often so here in this open file dialog I am going to do the same thing I'm going to open the file here on the save button we are going to save the file or to open the save file dialog so again if you want to add code that will be executed uh whenever you click on a button just double click on it I will double click on this open uh two select button and I am going to do the same thing so I'm just going to call this function that will open uh the file dialog instead of typing this again so the function is called open tool I think open tool strip menu item let's see so open to straight menu item copies in order to make sure yes and here we need to set to add these two arguments so we have the sender and the event we will do the same thing when we click on the save button but here I am going to say save tools strip menu click and add sender and E H let's run the application and see if this will work or not okay so we have our application running let's see if the manuscript still works click on open yes it is working let's open this file okay we see the message box let's do the same thing here so click on open test two and it works correctly uh say the save button will work also so you can see so this is the save file dialog and uh yeah basically these two companies go uh hand to hand you can use when you use the menu strip you add the tool strip with this so in the next video we are going to see how to add these two uh components automatically by working with a new type of form called MDI patterns so this is what we are going to see in the next video hello everyone in this video we will be discussing the concept of MDI patterns in a Windows formed application MDI parent stands for multiple documents interface parents and it provides a powerful way to create applications with multiple child windows let's see how to use this type of form okay so this and the eye pattern doesn't exist in the toolbox if you want to add it go to your solution Explorer and then right click on the name of your projects go to add components here go to Windows forms scroll down until you find API parent form leave it like this or you change the name doesn't matter and click on ADD so you can see this is what I said in the previous video the the menu strip and the open and the two strip are going to be added automatically for you but here the thing is so this is the multiple documents interface it allows you to add forms inside of it for example here I'm going to add a new button let's call it load form one and load form two so we already have form one but let's add another form uh the same thing so right click on the name of projects go to add and here choose four uh the name is form two it's fine click on ADD so we have a new form and here I will be adding a label for each form just to this to distinguish between the two uh so let's make the fonts a bit bigger 16 and change the text property to say form two I'm going to close it let's go to form one let's add a label here have two label drag it change the text to form one and the font to 16. let's Center it and close this form here let's click on load hormone let's double click on it okay so this brings this method here uh let's see we are going to instantiate a new objects of type form one form one let's call it four equals new form one so this is any objects of type form here we are going to say form Dot ndi parents so is equal to this this refers to this in the iPads so basically we are saying here hey for one so these objects we are go we are saying that you're in multiple documents interface patterns is this one and then we are going to say form one form dot show see so this will show our form and um here we can leave it like this and see uh the result as we get Okay so what is our MDI patterns we don't see it we see the form one that's because we need to change something else so go to your solution Explorer again but this time open the program file double click on it you can see that so this program is called whenever we start our application and it specifies the form that should be uh loaded so here we are loading the form one but we don't want that we want to load our ndi pads see now when we launch the application we are going to see the MDI parents and not form one or form two or any other form perfect as you can see so the the MDI parents form now is running let's let's click on load for one so you can see the form is inside of the MDI patterns and because it is uh it is bigger than the in the iPads we have this scroll uh Wheels so we can scroll uh horizontally and vertically we can and here's the thing we can insert as many formulas as we want you can see so they are being inserted one after the other if you want to remove them uh here I think we have the x button so we can click on it and remove each one that we don't like so I'm going to keep one and we can do the same thing for form two let's do that very quickly so let's double click on form two let's copy this and change form one with form two form one form two let's see uh so this should work okay so upload form one load formula so form two is on top of formula here you can see that the forms are formal form so are much much bigger than the in the eye patterns so what if uh let's let me remove the form too what if when I insert form one I want the MDI pattern to to resize its width so that's uh we don't have these scroll wheels so in order to do that we are going to say before showing so we are going to say this dot width is equal to 4 dot width so I'm going to basically we are going to take the widths of the form and since it as the width of our um in the eye parents we are going to do the same thing here let's see if this works okay so load form one and as you can see uh the phone uh or the MD iPads has been resized it didn't show the whole form why because here we have some margins for example you can see this margin that we have here and this margin uh that's why we didn't get the result that we needed but we can here for example say form dot plus let's add something to count for those uh borders uh and yes we if you do um this four Heights it will not work also because we have that we have those components that we have added in the top uh like the menu set and the tool C so those are going to take a to take space let's let's see let's just add the heights also and you are going to see even though as it's 50 to the height it's still not gonna work okay so let's load form one you can see now uh the whole form is or the width of the in the iPads is greater than the width of the form but the height is still not enough so we need to add the probably 200 or 100 pixels that's because as I said the menu strip and two strip take up space and here we have a very large border if you want to uh so let me remove these two lines and if you want to dock your form you can say form dot doc style I think Doc is equal to Doc style.fill so this is going to try to resize the form in order to fill the space uh so this gray space okay let's do that for uh the first first form also so form dot dot is equal to fill okay so let's see what does the stock style do let's load form one and as you can see so this will try to resize the form so that it takes this space we don't want it to be much bigger than the four um than the in the iPad now we want it to be constrained by these boundaries let's add form two also so here you do you see we don't have uh that Cascade that we didn't have before so before we head forward when we add a new form we will have four one here it will start from this point and then from this point Etc but because here we have changed the talk Style that's why they are now appearing one on top of the other so if I remove this one you can see that we have form two behind we have former behind Etc so this is uh how we use in the iPad it's a it is a very wonderful type of form that we are going to use in the application that the applications that you are going to build in the end in the next video we are going to talk about context menu strip hi everyone I hope you are all doing great in this video we are going to talk about context manuscript but what is a context menu State the context menu strip is a versatile menu control in Windows forms that appears when the user right clicks on a control such as button or a text box its primary purpose is to provide a convenient way to offer context specific options or actions to users okay enough talking let's see how to use this component okay let me add a text box in order to show you this so this is our text box I'm going to leave it like this it's it's not important to redesign it or change its properties I'm just going to show you the default options that we have when we right click on a component so here I am right clicking and you can see so these are some options that we can choose or actions that the user can make let's say I have written my name so saber I can control a DOT right click and for example copy paste the leads cut so these are actions that actually work we just want to have our own menu so this is the context menu strip let's see when we add that so we can find this of course in the toolbox so context menu save when you add it you see you have this menu now I am going to say cut copy paste uh something else for example okay so this is the context menu shape and this is what I want to show the users when they right click on this text box okay so how am I going to do this in order to do that go to your properties and you can see that we have a property that has the same name context menu strip here it is set to none so none basically means that we are going to show the default context menu or the defaults actions but we want to show our own actions that we have added so that's why we need to click on this drop down menu and choose this context when you sleep that we you have dragged okay now let's launch the application and see if it is going to work or not okay let's let's try to click on this and you can see now we have our own actions and now right now they are doing nothing because we didn't program them but in order to program each one of these actions it's basically the same thing as uh programming a menu strip so you just double click on it you get your function here you can write anything uh just to show that this works hey it works and so I I did this for the cut button but you can do it for the copy and all every action that you have added here I'm just doing this quickly just to show you that it works okay so this is what happens when I click on the cut action so basically this is the context menu strip you you add it in order if others only if you want to do something custom but if you don't if you don't want to uh customize the actions you can leave it as none and one other thing that I want to show you before ending this video so we have done this manually but again everything that you do here you can do it programmatically here you can go to your text box one and say context menu strip and give this context menu strip on you you will get the same results so in the next video this is going to be the final video in this uh tour we have seen a lot of uh cool components in the toolbox but again we are not going to see every single one of them we are going to see just those uh components that are very useful and that's our that we use a lot in different applications okay so the last video we are going in the last video we are going to talk about masked text box so it is a flavor of the text box that will uh that's this is going to give us other uh functionalities hello everyone in this video we will be talking about the mask text box control the max text box provides a powerful way to enforce input patterns and formats making it easier to validate and process user input let's see how to use them to use the max text box go to your toolbox and search for mask text box drag it to your phone I'm going to duplicate this and here you can see that it looks like a text box but it has a new things that we don't have in a text box so in this little arrow we can click on it and set a mask so what does this allows you to do is we have seen before when we used a text box we used to add a label to say for example enter your name or enter your date or enter your phone number but here yes we can add that label but we can specify the formats of this text box for example if you are taking just phone numbers you can enforce the user to uh input just something that looks like this format let me show you instead of talking so for example we can take this short date you can see so this is the mask and this is what the user will see he is going to see that these fields are empty so he needs to fill them and here also and here also when I click on it so okay so you can see so this is empty so the user knows ah I need to enter a date here and these underscores shows uh the digits that are missing let me click on let me run the application so that you can see what I am talking about okay so the the application is running now when I start typing you can see I am filling those missing values and now I am typing but I can't because I have reached the limit so this is the format that I I need to uh complete or that I need to uh comply with if I try to uh add more more characters I cannot do is because I have forced the user to input how many characters one two three four five six seven eight what about the first one let's choose something uh for example let's choose a phone number but we are going to import our own so here in Morocco we have a uh so I'm not going to add that plus in the beginning so I'm just going to write 10 digits uh one two three four five six seven eight nine and ten okay so this is the format that I want I want the user to input if or to insert a phone number that has 10 digits in it so when I click on OK so this is the um this is a format that I need to uh write the phone number in okay so here as I said I have 10 digits let's start and now you can see that I am trying to write characters but it isn't accepting that it is going to accept just uh let's go in the beginning it is accepting just numbers as you can see and if I try to go past 10 digits I cannot do that so this is how to work with mask text box so this is the inputs but how to read the values in order to do that let's uh let's let's add a button let's add a button that will show a a message box that contains the values that we have entered here so as I said this is the the phone number and this is the base let's double click on the button okay so our method has been added let's show the message box so messagebox.show uh masked text box one dot text let's show another message box by here if you want to duplicate the line just click on Ctrl d so this will duplicate the line and here instead of same Xbox one we are going to show the text of text box too let's start the application and let's click on the button so you can see that we have nothing because the text boxes basically are empty here let's import our text so zero one two three four five six seven eight nine and here uh eight uh sorry eight two thousand number button one so here this is the our phone number and this is the dates so basically uh text mask text boxes are a generalization or are more advanced than text boxes so I hope uh in this series you have uh learned new tricks uh what exists in Visual Studio the most used components and so these are and the examples that you have seen are very simple but in the next video which is going to be a very lengthy one we are going to try to build an application that has a ton of features uh I was going to show it right now but I am going to show it in the beginning of the next video so in the next video I am going to prepare an application for you that has a lot of things I am going to show it to you in the beginning if you want to make it yourself the ways because you are going to learn so we learn by doing but if you find difficulties then you can watch the rest of the tutorial and when we finish this we are going to call to call it also wrap this series so this video is going to be two hours three hours long as I don't know how much it uh it's going to be it depends on the last video that I am going to be adding but that doesn't mean that you are going to end here I am going to release other videos that we where we are going to talk about databases how to connect your visual studio uh Windows forms application into a database uh especially or specifically a Microsoft SQL database we are going to see how to generate reports automatically and yeah so I'm going to be adding videos about visual studio uh in the future so the so make sure uh if you like this to like this video And subscribe to this channel if you find this interesting see you in the next video hi everyone in today's video we are going to take all the things that we have seen in the previous videos and build this application the application that we are going to be building contains a loading screen once that is finished we we open the MDI parent here we have added two things to the menu strip we have connect and Market each one of these buttons is going to open a new form or open it here inside of the in the iPad once I click on connect you can see so inside that gray area we have this form that is displayed here here we can enter our information and then save save them when I click on Save and if some of these fields are are empty I get these errors that are shown by this error provider but when I fill the field as you can see the the now they are gone let me fill all the fields to show you what happens at the end and here in discount in this country combo box we can click on this little triangle in order to or this little arrow in order to search for our country or I have added autocomplete so when I type m i get all the countries that starts with m so here I'm going to choose Morocco uh here I have I'll choose a color and I get a preview here let me click on save you can see that the thing that I need to enter here is the birthday so 16th 8th 2001. and here the picture is not mandatory because if I want to add this I can click on it click on it and choose for example this image uh the image here represents the visual studio logo but you can put your image here if you want once I click on Save you can see because I have failed everything I get this message box so here I have made it simple just a message box that says everything is saved correctly but in here you can save the uh persons or the users information and use that in order to see if the user is registered in your database or not so those are complex things that we that we may see in the upcoming videos but for now we kept things simple because we haven't talked about databases in the in this course okay so uh now let's go to the market form okay so you can see here uh once we have registered so this this was the idea we are going to go to the market and buy things so here we have smartphones laptops and televisions for example I want to buy just this Samsung Galaxy s23 I'll uh click on this checkbox and then add two cards you can see that the phone was added but no laptops and no televisions and here I get the price of this Smartphone if I choose this Dell laptop you are going to see that the total price is going to to be higher you can see so now we have 1939 dollars I can choose another smartphone let's choose the OnePlus 11. and the Lenovo ThinkPad atrocards you can see so now we have three um three three things in our cars now let's see the total price so we are going to take all these prices sum them up and put the total price here I have added a context menu strip so this this is a custom you can see here I can save the table I can delete this particular row or clear everything let me delete this Row first as you can see the row was successfully removed once I clicked on the delete button now let's delete everything or let's clear all you can see so now we have nothing in our table I have added another thing called save but this one you can customize it however you want so once I click on Save I get this open file dialog I can save this here for example shopping cart as a text file let's see how it looks let me go to downloads shopping carts and as you can see so we get the smartphone that we have bought or that we have in our shopping carts the laptops the television and the total price so you can see it's not properly formatted but because we have variable names so that's why uh these headers are not aligned with the values but that's also problem as I said this this is something that you can tweak however you want so basically this is what we are going to be building in this video we have everything that you have talked about I think um and this is this is going to be a very uh good project for you to practice and to see that yes those basic companies uh if you uh bring them together you can build pretty good stuff with that before I start showing you my solution so now as you can see uh you know what we are going to be building so go ahead and try to design your application so here you have three forms the connect form so we can design this so it's very easy it's a label it doesn't it doesn't need to be uh like my own you can change the font size however you want you can change the layouts but you need to have these uh confidence in your form the same for the market phone and let's not forget the loading screen form because we have three forms here so as you can see here we have downloading let me show you that so we have the loading screen form as well so this one comes first as you saw here in the program file so we load the loading screen form after that we go ahead and load the MDI patterns okay I hope everything is clear try solving this for yourself and tell me in the comments if you have been able to do it one more thing before I end this video if you go to the description you are going to find this link that will point you to my repo you are going to find my solution as well as all the projects that we are going to see in the uh upcoming tutorials so I am going to talk about databases how to link them with your visual studio phone uh how to insert create values Etc so all the things that are going to talk about in the upcoming videos I am going to put them here in a centralized repo so that you can check the code yourself and try it and see if it works and you can do that by clicking here on code and download zip extract that and use it and open it with Visual Studio okay so I hope you are going to try and solve it and see you in the next video in this video we are going to start with the loading screen form as you can see here I have three main components so first of all we have a label a progress bar and a timer as you can see the background looks a bit different that's because I have changed the form border style so by default we have fixed 3D but I didn't like to have these buttons and this icon as well as the title that's why I have changed it to none I have resized the form so that it doesn't take a lot of a lot of space okay now let's go and double click on the background in order to load this loading screen for load method I was going to code live with you guys but I think this is going to take a lot of time that's why I'm going to uh show you the code and try to work you through it first of all let's go back we have this timer I have set the interval to 20 milliseconds and by default it is set to false it's not enabled that's why when I die when I have double clicked on the back the forms background I have started the timer after that we need to double click on the timer in order to bring this timer tick method and as I told you in the progress bar video we should not exceed the maximum value okay so it is set to 100. this is what I have here this variable I mean I could I could remove it and just type here 100 but just for readability I have added that so here we compare if the progress BAR value is less than uh the maximum value if that is true we can increment the value of the progress bar and change the label to say loading in progress and here we let me remove this properties Tab and here we just add the progress value okay so it is going to say loading in progress one percent two percent Etc until we reach 100 percent here when we reach 100 in the next stick we are going to come here into the else statement because 100 is not less than 100 okay so here I am going to stop the timer and open the MDI parents okay so I have added this little function just to make this function uh a bit clear so here I instantiate uh this object so this is called MDI parents one I am going to show this 4 and hide this one so basically here the functionality is this we are going to start the application the progress bar is going to increment once it reaches a hundred percent we are going to show the MDI parents this is what they are doing and hide this loading form and then we are going to stop this timer so that's we don't keep opening MDI parents uh endlessly okay so let me show you that if I did if I don't stop this timer we are going to and once we reach 100 we are going to open MDI parents but I'm not going to open it just once but we are going to open it each 20 milliseconds and this is not the behavior that we want that's why we need to stop the timer once we open the MDI parents now as you can see the progress bar is incrementing and you can see now we are opening MDI plans a lot of time why because as I said we didn't stop the timer and this is not what we want so that's why we need to stop the timer in order to not get this issue now after we have stopped the timer you can see that we don't have this problem anymore let me start with the application one more time and don't forget that in the program.cs you need to say new loading skin form if you don't do that it's going to start with however with the the first form that you have in your project we don't want that we want to start from the loading screen form okay so as you can see the code is not that hard but you just need to be aware of all the things that we have seen before because what I am showing right now it's is is not something new I have talks about this in the previous videos okay let's not uh talk a lot and in the next video we are going to see the MDI parents okay so we are going to add an ndi pad and see what what are the things that we need to do in this form hi everyone I hope you are all doing great as I said in the previous video we are going to talk about MDI parents I hope you you still remember how to create something that looks like this basically you open your solution Explorer tab you come here uh so it depends my project is called final project you right click go to add components here we you need to click on this Windows forms and here empty iPad form and give it a name once you finish that click on ADD and then you are going to get something that looks like this here I have added two things I have added disconnects and this Market options in order to add options you just come here where it says type here and type whatever you want for example something else I can't do that if I want okay but for me I am going to remove that because I don't want that once you do that double click on connect and you need to do this so you need to create another form called connect and another form called markets okay the same thing go to your solution Explorer right click go to add and here choose form once you do that give your form a name and hit add come back and double click on connect and here you need to instantiate an object of type connects after that you you should say that the ndi pattern of this form is this what does this mean this form okay and then we are going to dock this connect form inside of this MBI parents basically the the connect form will take all this gray space if we don't do that uh and if the connect form is bigger than our ndi parents we are going to get those scroll scroll Wheels okay uh after that we need to because here the connect form is taller than the MTI parents we added here 100 pixels but you could experiment with this it depends on the design if you have a compact design you might just add 50 or 40 it depends as I said so this is you can experiment with this value and after that we'll just show the connects form inside of this MDI parents the same for the market uh components or the markets form we instant we instantiate an object called markets let me call it Market form because this is a form okay Market form as you can see so here we are just repeating so this is the mdl patterns for this Market form and the docs style is filled here we don't have a problem so the width of this Market form should be the same as the width of this in the eye balance and at the end we just show it let me watch the application so that you can see what happens when we click on those two buttons that we have added but again we need to wait for this loading form to finish now click on connect you can see so the height was has changed and here when I say when I click on markes the width changes okay so uh as I said it depends on the design if you have uh changed the design you might uh remove this 100 pixels or you might adjust the the width it depends okay so in the next video we are going to talk about or we are going to see what we need to do in this connect form okay so here we are going to see how to program all these things see you in the next video hello everyone let's continue uh on this final project so we have arrived at this form so the Conex form this is the design uh make sure to to include these components so here we have a color dialog we have how many error providers one two three four and five so and an open file dialog so basically you need to add these seven components or three technically but in total you need to have seven okay so don't forget that make sure that the design looks like this or changes however you like but try to have the same components okay first of all let's start with this country combo box so here I don't know if you remember or not but if I launch the application when I try to choose a country in that combo box I get the suggestions when I click on the little arrow but as you can see so when I click on this little arrow I get suggestions but I can also get Auto completion just by typing some characters so we are going to see how to do this first so let me stop the application okay first of all uh click on this little triangle go to edit items and here you can paste all the countries that exists uh don't worry you are not gonna write them one by one I'm going to put in the description a link where you are going to find all these countries and basically copy and paste them here as I said in the description you are going to find this link that will point you to this GitHub repo here you can click on row and Ctrl a Ctrl C go back to visual studio and here you can paste that by by clicking on Ctrl V okay so after that click on OK open the properties panel here you need to go sorry pin it and here you need to search for autocomplete uh auto complete mode here you have suggest by default I think it is set to none but change that to suggest in order to get the same behavior as you saw okay so I think this is the only thing that you need to to configure and here also you you can uh change the state of these uh radio buttons for for me I have chose nail to be the default one you just come here and set the check to true because if you don't do that and launch the application both of them are going to be deselected or de-checked but here I want this one to be checked automatically or by default but if the user is a female he can she can change that okay so now let's look at the code I am going to start with this favorite color because I think it is the the easiest one so let's click on choose here so this is the method let me remove this properties panel good so first of all we are taking that color dialog and showing the dialog so this is going to show us the dialog where we can pick our color so let's say that we have picked the red color then we are going to click on OK after that we are going to take the color that you have chosen and set it as the background color for this picture box so you can see this is very simple let's see that in action okay so we have our loading in progress screen connect okay so I click on choose here is the color dialog that is as we can see you know in front of us let's for example choose this color click on OK and voila the picture box the picture box background color has changed successfully now let's see how we can um take a picture and set it here in this picture box so if you don't remember we click on this picture box the open file dialog uh lets us choose the picture so here we can come pictures for example let's choose I don't know anything that I have here okay so we have this picture Set uh in this picture box but you can put your image if you want here I am just showing you that you can do that let's see how to make this so if you saw that I have clicks on this on the image or on the picture box okay so what's what event is triggered basically you you double click on the image and you get this click event once you click on the picture box this event will be triggered so if you go back or I I hope you remember the video where we talked about open file dialogues so first of all you start with the filter here we are working with images so you need to specify uh the kind the extensions that you like that you want for example here I have jpj JPEG and PNG you can add more uh image extensions but these are fine after that it's like a d color dialog we show the dialog here we have the OK button once we click on it we take the picture Okay so New Image so we take the image like this so open file dialog file name and we set it in the image okay so this is straightforward now let's see what happens when we click on this save button so this is the behavior once you click on the save button you get these error providers that are that are showing some errors because you didn't fill in these fields okay so we have for example here please select your favorite color here it says please enter your first name uh please select your country okay so let's see how to do that and whenever we fill fill in the the fields and click on save those errors are going to be removed as you can see okay so let's double click on the button to see what's inside okay so this looks uh a bit too much but we are going to unpack it and go step step by step first of all we are testing first name is known that means if the user has imported something here or not so we have this function that has this very long name but it is very descriptive so it says test and set error if first name is MC or not basically if the first name text box is empty we are going to set the error provider next to it and return true because this Boolean variable is name is named is null okay so you can change the logic and return false if it is uh full for example or if it is not null so it depends on your logic let's expand this function to see what's inside it okay so you can see that indeed we are testing if the first name String is empty if it is empty then we are going to take this error provider and set it set an error next to this text box first name and this is the message that we are showing please enter your first name so this is related to the text first name text box and you can see we return true if the string is empty and false if it isn't empty so this logic Works only for the first name but we have a similar function for last name so you can see here we have another Boolean value called is last name no we have basically the same function but we have just changed the text box and the error provider as well as the error message okay let's go and uh try to see the country combo box so because this one is is like the first two so we have this function here we are taking the combo Box by default the combo box is empty but after that you can choose your country so by default it is empty and we can test for that we are going to take the text in this combo box and see if it is empty if that is true we are going to to do the same thing so I'm just gonna repeat this let's go to the uh to this preview picture box we are going to test if the user has chosen a color or not so this is the name of this variable is color not chosen that means has the user forgotten to choose the color we have this function that help us to do so so here we are testing if the color is equal to systems those color okay so let me open the properties tab paint this pin it uh so here let's let me uh look at this back color property you can see by default we have this control color I can change it from here for example I can choose a custom color let's say red as you can see so the background color has changed let me go back to control so this is the color by default so we are going to take this color and see if it is equal current background color of this uh pixel box if this is true we know that the user hasn't uh chosen his color so that's what we did here and in order to get this control color we use the system colors class because this class has these constant values okay so we get control and see if it is equal to the current background color of the picture box if this is true we are going to set the error we are going to change the error string Etc so we we have seen these uh previously and if the user has chosen his color we are going to remove the error and return false okay so right right now we have talks about is first thing no is last name no is countries no and is color not chosen okay so we have one more function that will test if the birthday is true or not so that's I have left it at the end because it contains more stuff in it so let me expand this function okay so as you can see we have more things inside of this function first of all here we are we have the formats so we want our dates to be in this format because for example uh most of countries they start with day month and then the year but some countries like the UK and others they start with the month after that they have the day and then the year so we don't want to make this function too complex in order to account for these uh different formats so that's why we are going to specify one single format so I want the date to be inputted in this format okay so how are we going to test this we have a very helpful function it is called try parse exact so you need to use it like this so you have the daytime class and you get access to this method basically this method it is going to take a string so here in this mask text box we are going to retrieve the string and see if that's if that string is a valid date or not so you can see the first argument is that string so we take our mask text box and retrieve the string from it after that we have the format so you can choose any format you want here this third argument color culture in full dot invariance culture means that the date is not presented in a culture specific format but in a standardized format system does globalization.daytime styles.net this argument means that there are no additional Styles applied to the dates so the string representation of the date must match exactly the specified formats so if it doesn't match it then we are going to return false and here lastly we have this fifth argument so this is a variable that's uh this method is gonna return and it contains the date time for example if I have here as a string let's say for example 24 or 25 uh zero one two thousand and four imagine that this string is what what we have retrieved from this mask text box as an output so this date time variable this is going to contain this exact base okay if it is a validate if it isn't then it's going to be null so 2004 okay so we can retrieve this date time and show it or use it elsewhere in order to prove that let me show a message box so message box dot show date time so we need to convert that to string so to string okay now whenever we click on Save we are going to to take the uh date time and show the dates okay so after that if this uh value is true we are going to remove the error provider but but if the date is not correct then we are going to show this error that says please enter your birthday in this particular format okay so uh we have been talking a lot about this function now let's see uh this in action so I am running the application right now whenever we click on the save button we are going to take the string that we have uh in this mask text box and show the date okay so let me click on Save you can see so by default so this is the date that we have entered and this is not uh so this is by default but if we populate this mask text box let's say for example 16 08 2001 click on save you can see so now this variable has the correct days okay so let me go back and remove this uh uh line of code that we have added okay so now we have all our Boolean values now we are going to test if all of them are true if all of them are true that means that we have uh successfully fill all the fields so here are inverting that because this is now so we are going to invert it by inverting it we are making sure that this field is is not empty so basically we are inversing the first one the second one Etc after that so if one of them is not filled or if one of them is not set to true that means that we are not going to show this uh message but if everything is correctly filled we are going to get this message box at the end so let me know the application and show you this okay so we have our loading screen let's click on connect click on Save okay so we have a bunch of Errors uh here let me fill some Fields click on save you can see the errors now are gone let me choose my favorite color and it is black save the error is gone let me take a picture um let's take this one uh let's choose my country so my uncle save and lastly we have this birthday now let me try to enter it in a different format for example uh so let me start with the month after that's the day and then the year so click on save you can see it didn't accept us because this format is not the formats that you have specified in the code so we need to start with the day after that amount and lastly the year click on save you see now we have no errors and we have successfully uh fill all the feeds and by doing so we get this message box that says everything is saved correctly okay so um this one this particular form had a lot of things uh inside this I hope uh I have made everything clear for you guys now uh we have one more thing to talk about and it has to do with this Market uh form so we are going to talk about it in the next video hello everyone uh in the last video uh we have finished working on this Connect Four now we need to start working on this Market form so here we have three combo boxes uh this one is for smartphones this one is for laptops and the last one is for televisions here I have populated each combo box with some phones this one with some laptops and this one with some televisions you can add more phones more laptops or even more products you can add here cars or something like or anything okay so if you want to buy something you click or you check the corresponding checkbox so for example I want to buy just this Smartphone I am going to add it to my card and you can see so we have this one plus in the smartphone column but the other ones because I haven't checked these checkboxes uh they are set to none and here I get the total price which is basically the price of the smartphone or the sum of the prices of the products that I have selected now if I change this phone to the iPhone 14 and if I choose this laptop I am going to get a very high total price so add that to my card you can see so this has reached 2300 I can't choose nothing I can choose for example uh this television also add two cards okay so you can play with this let me add one more entry okay so this is good now if I click on this total price you can see I get the sum of these total prices this gives me the price of this shopping cart okay um now I have added a context menu strip that will let me for example delete this line uh okay so I'm going to delete this one because I have duplicates so right click click on the list you can see so that row was removed I can save this table as a text file let me go to downloads and name it for example shopping cart click on Save let's look at that file okay so it is in my downloads folder click on it okay so as you can see so here we have the First Column smartphone we have the first smartphone the second one the third one and here we have none here we have the laptops the televisions and the total price you can see the formatting is not good because this is just a text file but if you want you can search and see how to save this into a spreadsheet for example that will be very useful and very easy to see the data okay and the last option or The Last Action that we can make is clear all so this deletes all the rows from the shopping cart okay so now let's see how to make this work um okay so let me start the application okay so here again click on this little triangle edit items and here you can see so we didn't input anything manually here but we did that programmatically here you can do do it either here or using C sharp so that's what I did so when you double click on the background in order to bring this load method look what I have done I have instantiated three dictionaries okay so the first one for smartphone the second one for laptops and the last one for televisions the key is going to be the name of the smartphone and the float is the price of the smartphone for example when I choose the Samsung Galaxy s23 so this is the string but the value or the price of that smartphone is going to be stored in this float variable for example okay so how I did that so in the load method here I have three functions the first function is going to populate this combo box this combo box the second one is going to uh fill the second combo box and the third one is going to fill this third color box because you see here all of them are empty okay so let's look at these functions let's look at the first one okay so here I am instantiating the smartphones dictionary and you can see so here it's very easy to to work with so you take your dictionary and you add items to it here I have this Samsung Galaxy s23 with the price it flows as a float value Etc so here you can come here and add as many phones as you want okay so here uh okay good but how to take this data and uh populates this combo box okay so in order to do that you set the data source to be this smartphone's dictionary but you need to convert that either to array or you can also convert it to list okay so it's going to uh work also let me go back to to array here and because here we have a dictionary we have two values so we have the key and the value so this display number is going to show the strings so when I was selecting the smartphones I was seeing just the strings but I can convert that to value in order to see the prices but that will not be a good option but let's let me change that and watch the application in order to show you uh what does this mean so basically we are going to see prices instead of the names of the smartphones and this is not very helpful that's why you need to change that to key okay so when I click on Mark it you can see now I don't have Samsung Galaxy s20g I have just prices because the value is set to these to to the prices I don't want that I want to uh to show the keys and the key uh is basically the name of the smartphone but the value of this selected item is the price so for instance when I take uh any smartphone and add it to my cart the value that I am retrieving is the price and it it's not the the uh the string or the name of the smartphone okay so here uh let me click on markets okay let me choose just the s23 add it to my card you can see the price that I have here is the same as the price of this Samsung Galaxy s23 here I have spelled Samsung wrong so I changed L to M uh but if I add let me let me see if I take the Apple iPhone 14 and try to add it you can see so this price is the same as this one because this is the value that we are taking from this combo box okay I hope this made this is clear for you guys um if you have understood this then the the next two methods are basically the same so here we add some laptops we do the same thing and here we add some televisions okay so let me collapse these functions because we don't need them anymore and to gain some space okay let me collapse this one too okay so now we have our text boxes or our combo boxes filled now let's look at this shopping cart um okay so here I you need to click on this little triangle add column and here you can specify the column names and you need to add these four columns so I'm not going I have done that I'm not going to do it here but this is how you can add columns and if you have a gray space here open your properties Tab and search for auto size columns mode and here change that to fill this is going to make the columns take all the width of this data grid View okay now let's double click on this add to cart okay first of all we are going to set these four values to none and zero none means that we haven't chosen any smartphone any laptop or any televisions okay so this is by default but after this when we click on these checkboxes we are going to change these values and the total price is zero because we haven't chosen we have chose nothing okay so after that when I click on this checkbox that means when I check it so here I am testing if that checkbox is checked that means that I am I can take this Smartphone from the combo box and set it uh into this variable so I can change this variable to for example Samsung Galaxy s23 if I check the combo box I am going to do the same thing for the laptop and the television and in order to take the price so I'm going to take this total price variable and add to it the price of the the smartphone so here we take the text so this is the string that we see but in order to take the value we need to take our combo box and take the selected value this is going to return the price of the smartphone or the laptop or the television okay so after that once this uh once once this is done we are going to take all these values and add them as a row to our data grid view so we have a smartphone the laptop the television and the total price you can see we have four values why because we have four columns and this is basically this uh add button it's very easy now in order to get the total price so this we have this variable that is telling us the total price of this shopping cart or the value of these shopping carts okay so in order to do that we need to Loop over each row of this shopping cart and take only the last value okay so how are we going to do this we are going to use for each Loop and we are going to Loop over all the rows so in order to get the list of rows we are going to do this that's a grid view dot rows and this is going to return as you can see so it is going to return a collection that contains all the rows in the disaggregate view control okay so we have the rows now we use the for each Loop in order to Loop over all of them okay so now we have the row as I said we need to go to this last cell so basically the the first index is zero second one is one the third one is two and the last one is three so that's why here I have set three so I am taking the the third cell and I am taking its value and I see if it is not set to now just to make sure in order to not hit any exception so if it is not true if it is not set to know we are going to take this value that exists in this column and add it to our variable and we are going to do this for all the rows and by the end we are going to get the total price once we get that we are going to change this label to say total price plus the value of our shopping cart plus uh the currency so here I have uh chosen dollars but you can change that to I don't know Euros or um anything okay so these two buttons now are configured now let's see uh how to work with this context Ministry because don't forget we have a context menu strip so let's start with the clear because it's very easy to do so clear all okay so we have just one line so that's a great view dot Rouse dot clear everything now how can we remove a specific row so double click on delete and here it's very easy so we take all the rows and then we remove the row at the selected cell um let me launch the application in order to explain this in details okay so we have our loading screen click on markets let me add some values okay so here we have this this line so when when we write basically few dot rows this is going to return a collection that contains all these rows but we want to remove ads so this row and this is uh how are we going to retrieve this row okay so we are taking we are taking the index of the selected cell okay so here we have the circuit view dot selected cells dot row index okay so here you can see that I have this cell that is selected I am taking its row index so the row index here is 0 1 2. look at this little triangle so this is the second index okay so we took we take this index and remove the row at this specific index I hope I have explained this uh very well for you guys and now let's move on to this save action because it is the last thing that you are going to see in this video go back to your form double click on Save okay so here we have a lot of things but uh basically we are going to use the save file dialog because this is going to enable us to save our data grid view as a text file okay so let's go back so here because we are saving this as a text file we have this extension or this filter okay so after that we need to show the dialog we take the file name so this is the name that we specify on this save file dialog okay so now we want to write some text uh in this file okay so the first line that we arise is just the name of columns so we can see we have smartphone laptop television and total price and this backslash T is just going to add a space uh between smartphone and laptop and backslash n is going to return to the next line okay so in the next line we are going to take all the rows and add them to our text file okay in order to do that here we have a for each Loop we are going to do the same thing as uh what we did here when we calculated the sort price but here we are going to take all the values instead of just the third cell okay so we take all the rows we Loop through them using the for each Loop and here we are going to append to this file we are not going to override the contents of this file now we are going to append append means that you check the text file and you just add to it okay you don't override the whole file so we are going to add to this file name these values so the first cell is going to give us the smartphone the second cell the lead is going to give us the laptop that we have chosen the second cell is going to give us a television and lastly we are going to add the total price to this line and don't forget to add these backslash T and backslash n just to have good formatting okay so here we have a counter why we use this just to break once we reach the last value or why we use this counter basically because here we have a problem when we work with data grid views I don't know why this happens but you can see that we have let me choose a smartphone for example add to my card we always have this empty row I don't know why the the the add it by default but this if we don't make sure to stop before reaching this row we are going to hit an exception this is why we added this counter basically this counter will enable us to see if we have reached reached this row if this is true we are going to break and uh end this for each Loop and after that save the whole file and now we have successfully completed this uh save action and by doing so we have successfully uh completed this form congratulations you have reached the end of our comprehensive course on Windows forms applications throughout this journey we have explored the fundamental components that make up the foundation of building user-friendly and interactive desktop applications from buttons labels text boxes combo boxes and other components we have covered a wide range of essential controls that Empower you to create intuitive interfaces by leveraging the power of Visual Studio we have seen how these components can be easily added customized and connected to code allowing us to build Dynamic applications easily we also embarked on a final project where we put our knowledge to the test by incorporating multiple components we created a practical application that showcased their versatility and integration capabilities it is important to note that this project is just the beginning of what you can achieve with visual studio and windows forms applications there are other things that you need to learn and I that I haven't talked about this in this course such as databases how to connect them with your application and more stuff that you can do with Visual Studio I am going to make sure to add more videos on my channel that are going to cover these topics as you continue your journey in software development I encourage you to explore further experiment with different controls and push the boundaries of your creativity remember practice makes perfect the more you delve into Windows forms applications and experiments with Visual Studio the more confidence and skill you will become thank you so much for joining me on this Learning Adventure I hope this course has equipped you with the tools and knowledge you need to embark on your own Windows forms applications projects remember the possibilities are endless and I can't wait to see what you will create with Visual Studio

Channel: 3CodeCamp

Views: 580

Keywords: Windows Forms, Desktop Applications, Visual Studio, .NET Framework, Windows Application Development, Visual studio windows forms applications, Windows forms c#, Windows forms app 2023, 2023 Visual studio, Visual Studio Forms, WinForms, Windows App Design, Visual studio buttons, Visual studio toolbox, Windows forms beginners, Windows forms applications tutorial, Windows applications 2023 tutorial, c# application, c# winForms, c# desktop application

Id: SD1VbUYUO7U

Length: 206min 42sec (12402 seconds)

Published: Wed Jul 19 2023