WPF Tutorial: User Controls in WPF | User Control | Visual studio | C#

hello everyone my name is ronuk and you're watching vctor art in today's video we will create a user control and add it to our WPF applications we'll understand how it works and what are The Binding options it provides so without any further Ado let's get started so let's start first by uh understanding what is a user control so user control provides a way to collect and combine different built-in controls together into a package and then make it reusable in saml format so here you can see we'll be designing the this similar kind of uh uh template or a user control that we will be using in our WPF application so let's first start by creating a new project let's select WPF app with NET Framework if you do not find it let's select here on the top and find it in the list of templates and click on next let's give this project a name I'm naming it as member user control and click on create once the UI is ready um let's go to the solution Explorer and start with adding the user control so let's go to add and add the user control let's give this user control a name let me name it as UC members and click on ADD now uh we have a blank canvas so let's uh start by setting the height and width of the user control I will uh change the height to say 30 or 50 maybe let's drag the anchor points yeah this should be good and uh the the width will be 200 so let's first start by adding a rectangle on the screen uh I have accidentally added a stack panel let me remove it first and now uh let's select the rectangle resize it to the size of the uh grid let me remove the stroke and change the radius of the rectangle now let's change the fill to a light shade of gray that is done now next uh we will add a stack panel below the rectangle which will fill the entire grid and inside the stack panel I will add a rectangle again let me do the same changes I will will remove the stroke and this time the radius will be uh completely uh till the rectangle becomes an ellipse so uh once that is done I will set to width and height and uh let me change the orientation to horizontal and now I will set a margin of say 10 that is done now I will change the fill to an image so now I have this image brush which will uh which I will use to bind to a property so I will set the image source binding to a property called URL I've not created this property yet but uh I will uh later so this is done next will be to change the stretch to uniform and now now uh let's move on to the next element so after the rectangle I will add one more stack panel uh before that let me add this label and then move it within the stack panel uh so let's say set the height to say 30 points and now I will add a stack panel and how this label within the stack panel um let me add some space between the rectangle and the stack panel so let me set the margin and now let me copy this label and paste it one more time so this the first label will be for the title and the second will be for the subtitle so let me change the margin a bit and also also change the text size and the font foreground color to gray that is done let me move it a bit low so that they don't overlap so that is all that we need to do now let's change the content and bind it to a property called title again I have not created this property yet but I will after we do this zaml changes so this should be subtitle and uh now let's save this all and go to code behind and set the data context to this and let's now create three properties I'm using this uh intelligence to create a string property of uh called title and next would be the subtitle which is of typ string and the last one would be um URL so once that is done let me save this and close this uh code behind and now let's go to our main window and before that let me change the background color to Black and now um let me add a rectangle here on the window consider this as a panel or a card in a dashboard scenario where you have several cards which uh display list items so this is one of our card in our example here and let me add a stack panel inside this rectangle and um inside the stack panel I will add a label first which will let us know what this uh card is for so let me set the margin and the font size and the font weight next I will set the content to team member so this will show us the team member list next uh let me add a list box let me directly add it on the zaml window sorry a list View and inside this list view I will add our user control that we created so you make sure you use the local um name space and then the user control name I will copy this user control several times in uh real time scenario you will do this uh programmatically dynamically in the code behind uh so but now right now I'm just adding it in the zaml let me change the width and height to same as the user controls width and height and uh next is we will set the title property next uh the subtitle and the next property would be the URL I have downloaded some images from icons8.com and I have pasted here in the project uh you can also create a folder uh called icons or images and place them inside that and then use it in your application so let me run this first and see if uh everything looks fine uh yes now um let me do the same changes for all the other um user controls that I have added before that let me set some margins and Let's uh change the size of our list view so let's change the margin of uh each uh user control uh so that we have a padding of five uh from uh bottom padding of five and uh the left padding of five so let me copy the part all or all the properties of the first user control and uh paste it to the rest so I have speed up the process here so that we do not have to wait also I will make make changes to the subtitle uh title and URL properties of the user control let me copy the image names that is done let's change the title text that is done so now let's save this run this once again again okay we have a list View and we have our user controls inside this now uh let me add a button before that let's uh decrease the size of our list view so that we can um add a button below that so let's add a button here let's increase this size of a button let's change uh the size of a list view as well so that it aligns with the button now let's change some properties of this button so let's first set a top margin to say 9 points uh change the color change the foreground to White change the text to add members and uh change the font size to 16 points and now let's go to the edit template edit a copy and I'm doing this so that I I want the button to be a rounded button so let's in the Border let's add a property called Corner radius of Five Points so doing this uh we get a rounded button which matches the theme next uh I will set a margin of uh left margin for the team member label as well so that it aligns with the user control and the button last uh I will remove the border and uh background brush for the list View and also I will change the color of a rectangle that we have uh to a lighter shade of gray so that it does not pop that much so uh all this is done I will move this list view a little bit up and now uh let's see this UI in action so hope you all liked watching this video if you do please give this video a thumbs up like share and do subscribe to my channel till then bye-bye

Channel: VectoArt

Views: 5,134

Keywords: visual studio, User interface, Application Design, visual studio blend, c#, wpf, visual studio blend tutorial, ui design tutorial for beginners, ui design tutorial, wpf tutorial c#, wpf tutorial, Controls in WPF, Custom Control in WPF, User Control, User Control in WPF, xaml ui design tutorial, c# wpf application tutorial, how to create ui design in wpf, wpf application examples in c#, how to make wpf application with visual studio, what is wpf application in c#

Id: se75uhsg3IA

Length: 13min 49sec (829 seconds)

Published: Sun Oct 15 2023