WPF UI/ Design a Modern Login Form/ Introducing to WPF

hello first of all an apology for being away for so long sometimes work and personal life can be overwhelming well this time we will make this login form with wpf and c-sharp they have been asking me for a long time to do tutorials with wpf and the time has come to do it because i think i have already taught them enough about windows forms well in summary we will create a window with rounded corners gradient border color and gradient and transparent by color with a background image as for the controls we will create circular and pill-shaped buttons text boxes with underline style and with icons we will add a logo and some text blocks all right let's get started with the tutorial here i already have a project created with wpf c-sharp and net framework you can choose the version you prefer well i'll close this window since i won't be using it we add a folder to store the images that we will use in the project in my case the background image logo and the icons for the text boxes in the previous tutorial i mentioned that wpf is better suited to the mvvm pattern so i'll add a folder for each component because maybe later we'll do user authentication using a database and the mvvm pattern okay in the view component we add a window for user login now we go to the main file of the application and change the start window to login view [Music] to design the login form just like in the windows forms we can drag controls from the toolbox window and set properties in the properties window to modify the appearance or subscribe events doing so creates the corresponding xaml code however it is preferable to design the window directly from the xaml editor since it is much more comfortable and you can make more appearance customizations that in some cases cannot be done from the properties window practically you have more freedom and control over the design of the elements that is also why by default the designer workspace is divided into two main parts the design view and the xaml view we can customize the designer workspace as we want through these options that we have here [Music] another thing to note is that the designer view is synchronized with the xaml editor that is the design preview is in real time on the other hand if you have noticed xaml is very similar to html so if you already know html it will be easier for you to get used to xaml since both are markup languages and have defined schemas well let's start designing the login form firstly we will remove the title bar and border of the window for this in the window tag we set the window style property to none we remove the resizing function since in this case it is not necessary then we specify that the starting location of the window is in the center of the screen optionally we change the height of the window to 550. finally we subscribe to the mouse down event to return the drag and move function of the window since removing the title bar from the window loses this functionality if you want you can subscribe to this event from a custom title bar i'll make the form draggable from anywhere [Music] talking a bit about wpf to build a window with a good design you use panels as a container for other child elements the panels are components that control the representation of elements such as their size dimensions position and the arrangement of their contents there are five main types of panels stack panel this panel organizes secondary elements in a single line that can be oriented horizontally or vertically in a stacked way that is it is placed one after the other dock panel allows docking the child elements to where we want them to stay either to the left up right or down grid is the most powerful panel in wpf which allows to define a flexible grid area consisting of columns and rows child elements can be precisely placed in each row and column wrap panel allows to place the secondary elements in a sequential position from left to right or from top to bottom and moves the content to the next line so that it is always visible that is it automatically rearranges the elements when they no longer fit in the panel area canvas is the simplest panel of all since it allows to place the secondary elements explicitly by means of relative coordinates that we specify however none of these panels support drawing a border around their edges so it is also not possible to make the container have rounded corners which is why there is also the border decorator element that allows you to draw a custom border around another element so we will use this decorator border to create the window with rounded corners and gradient border color so we define the border tag [Music] we set the corner radius property for example a value of 50 then we set a background color in my case i'll use a pale dark blue we set the border color and border thickness all right now we have the base of the form with rounded corners now we just need to remove these extra white corners from the window the trick to doing this is to set the background color of the window to transparent we also need to set the allow transparency property to true for it to take effect okay we already have the window with the rounded corners and border we can make the border a gradient color similarly we can set a gradient background color so we removed the border brush set earlier and set the border brush property using tags to create and set a gradient color you could say that this is an advanced way of setting a property of a control well we define a linear gradient brush or if you prefer radial then we set the angle of the gradient this is defined by two dimensional coordinates that is the start and end point of the line by default the start point is 0 0 and the end point is 1 1 which represents a diagonal line so we can change the angle by changing the value to decimal values in this case i'll leave it at the defaults since i want a diagonal linear gradient then we set the colors and an offset along the brush's gradient axis here i already have a define color palette you can use the colors you want [Music] then we set the location in the linear gradient that is from where we want the gradient stop color to start in this case from point zero we do the same for the other colors we want to add for the linear gradient [Music] we set the offset for each gradient color however we want [Music] we do the same thing if we want to set a gradient background color we remove the previously set background property since the same property cannot be set twice and we set the borders background property using tags to set the background in an advanced way in this case i'm going to invert the angle of the diagonal gradient you can set decimal values if you want a different angle [Music] great we can also set an image behind the background color to do this we wrap the defined border with another border [Music] in the same way we set the corner radius property and set an image as the background of the border [Music] as the image source i'll select the background image i added at the beginning of the tutorial to make the image visible we lower the opacity of the background color of the front border we set a value that best suits the image and is pleasing for example an opacity of 50 or 90 you can also make other adjustments to the image for example stretch mode mosaic alignment and among others well let's run the application to see how it turned out [Music] you can change the location of the second color of the gradient to one so that the offset is from the end point we can reduce or increase the thickness of the border and the radius of the corners of the window to our liking in the top right corner the image sticks out a bit so i recommend setting the image border corner radius to a larger value all right now inside both borders we define a grid to organize the child items in a more custom way we then define two rows the first row we set a height of 30 in auto with and the second row with auto size if the height and width are not set explicitly by default it is automatic that is the size will be proportional or will occupy the remaining space as in this case the first row has a height of 30 and occupies the entire width of the window and the second row occupies all the remaining space in the window well now we define another grid to organize the title and the close and minimize buttons but in this case we will define columns for example about four columns as you can see by not specifying the size by default it is automatic and proportional and it also occupies the first row previously defined as the default location well we set the width of the second column to 25 just like the third column in the last column we set the width to 5 since it will only be used as a write margin mode well we define a text block for the subtitle of the window for example login [Music] we set the text color font size and font type [Music] then we specify in which column the text is going to be placed in this case the first column which would be the ordinal position zero we set the vertical alignment to center then we also set a margin of 10 on the left so that the text is not too close to the edge of the window the way to set the margin values is as shown in the image left top right and bottom now we define a button to minimize the window we set a name background color and border thickness to zero [Music] i didn't download a minimize icon image so i'll set a dash symbol as text we also set the font color size and font type we establish the cursor to hand and indicate that it is located in the second column that the ordinal position would be one finally we subscribe the click event to minimize the window [Music] we copy the button to the close window button we change the location to the third column and make the other corresponding adjustments similarly we subscribe to the click event to close the application [Music] great however here is a great detail although in wpf you can do many appearance customizations there is no way to change the background color when hovering over the button nor to change the radius of the corners at least not in a direct way to do so you have to override or modify the buttons default style and template to give the control a custom appearance so let's modify the default style of the button for that we first remove the previously set background color and modify the style of the button [Music] we set the background color of the button using the setter tag [Music] [Music] then we set triggers for the button a trigger is an object that allows to apply changes or perform actions when a certain condition is met for example in this case if mouse hovers over button we change the background color of the button [Music] all right for this to take effect we also need to override the button's default template [Music] we define a border set a width and height of 18 or whatever size you want then we set the radius of the corners for example half the height so that the button is circular then we bind and sync the background color of the button to the background color of the border finally we center the content of the button both vertically and horizontally well we already have the circular button we copy the style and template for the close button and we make the corresponding changes [Music] in order not to repeat the same code in all the buttons or controls it would be better to create a custom template and apply it to the controls that we want and when we want in the next tutorials i will show you how to create control templates okay the background color of the buttons changes correctly when hovering over it [Music] well that's it for the first row of the window now we define a stackable panel to organize the login elements set a width of 250 and indicate that it is located in the second row of the grid [Music] we then specify that the elements stack vertically and finally we set a margin of 35 at the top we define an image for the logo [Music] we define a text block for the main title [Music] we define another text block to show a motivational message here is a good phrase that i copied from the internet since this sentence is long we are going to wrap the text inside the panel and we can also change the alignment to justified or centered [Music] well we finally set a top margin of 5 since it's very close to the title we add another text block for the username label [Music] [Music] now we define a text box to enter the username [Music] [Music] we set the background color to transparent text color to white text insertion cursor color to light gray or the color you prefer we set the border color to dark gray the text box will have an underline style so we set the border thickness to just the bottom if you want you can set the border to the entire outline [Music] in height we set 28 and center the vertical content alignment finally we set a margin of 5 on top [Music] alright now we will add an icon on the left side of the text box there is no property that allows to insert an icon to the text box the solution is to set the icon as the background and then we remove the previously set background and set the background directly from the property we define an image brush and set as image source the icon we want by default the image is stretched over the entire area of the control so we set the stretch mode to none and align the icon to the left the text is written over the icon as the image is the background of the text box to fix this we need to set a padding to the left in this case the icon is 16 pixels wide so i'll add a padding of 20 to the left great you can change the border color when the text box is focused to do this you have to modify the default style and template just like we did with the buttons i won't do it now because the default color matches my color palette well we duplicate the text block and text box for the user's password and make the corresponding changes [Music] since the field is of tight password then we change the text box to a password box to hide the characters [Music] all right now we will add a button for login so as not to do everything from scratch we copy the circular button defined earlier [Music] we set a margin of 50 on top we set a width of 150 and a height of 40 or the size that you prefer to have controls with circular lateral sides you should always set half the height value as the corner radius value finally we set the background color and the background color when hovering over the button [Music] okay to finish we add a text block to ask the user if he forgot his password and another text block to reset the password [Music] finally we can stack these two text blocks horizontally so we wrap both text boxes in a stackable panel in orientation we specify that the elements are stacked horizontally we center the panel and we set a margin of 15 at the top we also set a margin of eight to the left in the reset password text block [Music] ok everything is in order you can make the changes you want i will leave a download link of the project in the video description well that's all in this tutorial i hope you liked it and until next time [Music]

Channel: RJ Code Advance EN

Views: 91,006

Keywords: Windows Form, C#, VB, .NET, Software, HTML, Modern Forms, software, computer, technology, design of modern user interfaces, visual basic, php, java, design flat login, software development, web programming, information systems development, JavaScript, Visual Basic, Software Patterns, Architecture Patterns, Design Patterns, Language Patterns, Software Engineering, Systems, Web pages, mvc, layers, objects, POO, object-oriented programming, mysql, mariadb, .Net Framework, Custom Controls, SQL

Id: pZGcRHgmn8k

Length: 24min 59sec (1499 seconds)

Published: Mon Jun 13 2022