How to Create a Modern Login Window in WPF using C# | C# Tutorial

[Music] [Music] hello everyone in this video let's create a login form using wpf with material ui by the way if you're new here be sure to subscribe to our channel so let's get started open visual studio in my case it's 2019 you can go with yours create a new project or continue with your own select the project type as wpf app with c-sharp let me name the project as login wpf [Music] then press create to get a modern ui let's install the material design themes package go to the solution explorer and right click on the project then select manage new get packages after the new get package manager opens navigate to browse [Music] and search for material [Music] select this package [Music] choose version is 4.1.0 and click install [Music] click ok in the preview changes pop-up wait for the installation to complete [Music] visit this site to copy the initial code snippets you can find the following link in the description scroll down to getting started section select and copy this code snippet [Music] then go back to visual studio and open app.xaml and paste the copied code snippet here [Music] go back to the site again and copy this line of code [Music] and paste it here in the main window next let's change some properties of the window change title to login height 760 width for 50. now add this code to change the font color next delete the grid and replace it with a material design card then follow the properties under the material design card add uniform corner radius 15. background dynamic resource material design paper margin 25. go back to window and include these properties [Music] background x colon null in between curly brackets allows transparency true [Music] window style none window startup location center screen so this will replace the windows default form to a material design card next let's create a pop-up box to include some actions like theme switching and exit app so create a material dialog host and set close on click away to true name dialog host create a stack panel [Music] and then create a pop-up box with these properties horizontal alignment right margin 0 20 20 0. placement mode bottom and align right edges stays open false height 25 then create a stack panel within the pop-up box margin 16 10 0 6 orientation horizontal horizontal alignment center now add a text block vertical alignment center [Music] text dark mode then add a toggle button cursor hand tool tip enable dark mode [Music] margin 12080 name theme toggle [Music] is checked binding is dark theme [Music] click toggle theme [Music] include both of the elements inside the stack panel now let's take a look at how the preview looks next create a button [Music] tooltip having trouble logging in margin zero eight zero zero content help me then another button with name btn exit tooltip close application content exit application click exit app the pop-up box has been completed so let's go into the next step to display the logo right-click on the project under the solution explorer and select add and click existing item now select your image and then ok [Music] in order to display the logo add an image tag under the pop-up box with margin 0 60 0 5 source your image name height 100 create a text block as the title with margin 0 25 0 5 horizontal alignment center font size 28 font weight bold text welcome back then another text block with font size 17 font weight semi-bold horizontal alignment center text login to your existing account [Music] to enter the username let's create a text box with margin 0 50 0 0 name txt username width 300 font size 18 material design hint enter username [Music] border thickness 2 border brush dynamic resource material design divider style static resource material design outline text box [Music] then add a password box with margin 0 20 0 0 [Music] name txt password width 300 font size 18 material design hint enter password [Music] border thickness 2 [Music] border brush dynamic resource material design divider style static resource material design outlined password box now create a button for login with margin 0 20 0 zero name login btn [Music] style material design flat button material design shadow depth depth 0 height 53 width 300 material design corner radius 10 font size 18 content login finally create a button for sign up with margin 0 20 0 0 name signup btn style material design flat button [Music] material design shadow depth depth 0 height 53 width 300 material design corner radius 10 font size 18 content create account [Music] now let's change the app color scheme to blue so double-click on app.xaml then replace the deep purple to blue [Music] now we have changed the color scheme to blue [Music] so next let's program the theme switching toggle select the toggle button and go to its click event under its properties then double-click the click event to write some codes now import this libraries to your program using materialdesignthemes.wpf next create a public variable name is dark theme create a private only pallet helper object [Music] under the theme toggle button let's get the current theme used in the application next create a condition to check the current theme if condition true then set is dark themed to false and set face theme to light or else set is dark themed to true [Music] and set base theme to dark [Music] to apply the changes let's use the set theme function now we have completed the theme changing toggle go back to the designing view and select button bt and exit and go to its click event under its properties then double-click the click event to write the application exit code to make the window movable let's create a mouse event protected override void on mouse left button down [Music] drag move and done now we are almost done with the program but before we start the program some simple changes have to be done in the application next to margin in the material design card add a material design shadow assist shadow depth equals depth 4. inside the material design pop-up box add an opening stack panel tag and an ending stack panel tag next to the toggle button [Music] alright now let's start the program [Music] so let's see how things work out in the application as always you can download the project file from our website link given in the description [Music] if the video is useful a sub to the channel would be appreciated see you guys in the next video until then peace out oh [Music] [Music] you

Channel: CodeCraks

Views: 53,560

Keywords: tutorial, visualstudio, login, form, c#, csharp, modern, flat, design, howto, how, best, 2019, How to Make Modern Login Form in C# (2021), 2021, window, morden, how to, make, Tutorial in Visual Studio WPF Application, Visual Studio, WPF, Application, Modern User Login Form Material Design Tutorial #2 in Windows Form Application C#, latest, Login Form in C#-Modern Ui Designing, flat design, Login, Registration, Multiple Accounts, How to Create Complete Login and Registration System in WPF, Login in WPF

Id: hu7QG8OEOuk

Length: 16min 29sec (989 seconds)

Published: Sun Nov 14 2021