WPF C# | Login UI | UI Design in Wpf C# (Jd's Code Lab)
Vložit
- čas přidán 10. 07. 2024
- Hey Guys,
In this tutorial, we will design Login UI.
0:00 Intro
0:06 End Result (Goal)
0:48 Getting Started
04:22 Custom TextBox with Placeholder Animation
13:02 Password Box (with Hide and Show password button)
25:44 Navigate from one Login page to Dashboard page
26:54 Page Slide Up Animation
28:41 Textblock Animation
Become a member to get access to perks:
/ @jdscodelab
Please don't forget to Like, Subscribe & Share.
/ @jdscodelab
Also, check out:
1) Other UI Designs in Wpf:
• WPF UI Designs C#
2) Custom Controls in WPF:
• Wpf User Controls - Věda a technologie
A kind request,
Support me on Patreon (www.patreon.com/jdscodelab) as it will benefit me financially during this pandemic and also motivate me to provide you with better content and early access to my videos.
And don't forget to Like, Subscribe & Share my videos.
Click here to Subscribe Now: czcams.com/channels/k2GyexoK16XiKkrXLD_O2Q.html
Your support is what encourages me to keep moving forward.❤️
Thanking you for your support so far (:
thanks amazing video
Glad you liked it!
beautiful design.
thank you🙂❤
Welcome 😊
thx for doing it as section
thanks brother...its awesome form u designed.
You are welcome 👍
Hey there! Can you make a tutorial on when you log in that login credentials or email must be on a repository to work and I don't need to update the scripts in my project but automatically checks if the email has access itself?
thank you sir
Welcome 👍
We need to change the order of Placeholder Textblock because, if the Text property is initialized from the code behind or from the xaml, the content of both controls will overlap.
To fix this issue I moved the Title Textblock below the TextBox control and assigned a higher ZIndex value to the TextBox control.
Is there any better way to fix this?
Most probably this should not be the case since we are using trigger on Text Value property to avoid such overlapping issue. Even though if somehow that issue occurred then your code above is good to fix.
how to get the hide password image text?
how to change the font size about the search window which used ctrl+f ? my eyes almost broken
Check this out:
docs.microsoft.com/en-us/visualstudio/ide/how-to-change-fonts-and-colors-in-visual-studio?view=vs-2019
Hey JD, I have a question, the page slide up animation only works in login page and not in dashboard page even though I typed Style="{StaticResource {x:Type Page}}"
in both the pages. Thanks!!
Hi, make sure you created style in App.xaml and also don't have key associated with the style then try accessing the style like you did.
Sorry, I just rechecked and the animation was not noticeable as my text wasn't aligned center.
can i have a copy of PathGeometry figures of the icons?
JD, for the first, thanks for great vid.
--
i have a question. I started with WPF, but im little bit confused because im stuck at 9:30 - i cant display email textbox (i can see him in designer, i can display him via mainFrame.Navigate). Any idea? i checked code and i didnt see difference. Any suggestion? Thx for your time.
You missed some code or some error while coding re check the whole textbox custom control
@@JDsCodeLab I tried create textbox in xmlns:local - it works :) but found problem - missing InitializeComponent () at TextboxwithPlaceholder .... Thx again for help, i appreciate it :)
Hello, thank you for the video. However I have trouble accessing the user and password fields. I tried to add
and the backend code as testingBox1.Text and it cannot be done. Please help. thank you
Hi, instead of accessing Text property you need to access .Email or .Password.
@@JDsCodeLab When I use the code on the .xaml file. x:Name = "..." it throws an error Type is not defined
Can you make a detailed video about MVVM of WPF? Thanks
@Nevrus Tv Sure thing! I will try to explain in one of my upcoming videos.
You might have noticed most of my videos are in MVVM pattern where i do all the logics in ViewModels and later bind the properties to our desired element in XAML. 👍
Anyone with the value of Data at 29:59? I am missing something.
On 9:00, a can't find the TextBlockWithPlaceHolder on the ToolBox.
it just not apear for me.
Any Idea?
Did you add reference for custom control?
@@JDsCodeLab no I didn't. Thank you bro 👊
@@muriloteixeira5541 how can I add reference to my custom control?
@@RobertCastilloC You need to build the solution. Press Ctrl + Shft + B.
Then, the custom Control will be available on your ToolBox
@@muriloteixeira5541 thanks a Lot, it works now
Hi, how can I get the data that the user enters and pass it to ViewModel
-after 50 minutes I solved the problem
How to navigate from page using MVVM?
github.com/jdscodelab/wpf-tutorials/tree/master/NavigationMVVM
@@JDsCodeLab Thank you!
Thank you
Is it part of chat UI design?
No @Vinay.
Hi JD,
this is my second day trying and cant make it work. I am getting an error "Cannot find source for binding with reference 'ElementName=_this'. BindingExpression:Path=PlaceHolder; DataItem=null; target element is 'TextBlock' (Name='title'); target property is 'Text' (type 'String'). Cannot find source for binding with reference 'ElementName=_this'. BindingExpression:Path=Text; DataItem=null; target element is 'TextBox' (Name='email'); target property is 'Text' (type 'String')" I have follow the tutorial but cant find the error. thank you for your help.
Hey, Omar.
Check following:
1) Did you define the dependency property for PlaceHolder in codebehind at 11:35.
2) Check if you did same for Text property here 12:18.
From what i understand you made some mistake in the above areas only. Compare both your dependemcy properties code with this (imgur.com/qs2zMNJ)
and also compare this (imgur.com/HyIeeqZ) with your textbox style.
I hope this solves your issue.👍
i don understand why we do this "email.Text = passbox.Password;
" the email is supposed to be only for the email then why are we assigning the password value to the email
Hi, Robert. Actually passbox. Password is confidential we should never disclose it. Since we want to view the password the passbox does not support that. So we are transferring its value to email.Text and reusing the email textbox for showing password.👍
@@JDsCodeLab thanks for clarifying
Hi Junaid, Can you please share the Path Geometry of the showpass button?
Thanks brother
Hallo, this is a nice tutorial. But I need also back to loginUI after Dashboad opened.
Hello,
I've been given an error at around: 8:27 because of a (animated?) fontsize error.
It says it can't find the path and it claims to have ''special characters".
if I comment the 2 'animated' lines out it works fine.
Do you have any idea what this might be?
Send me the screenshot of the error. Most probably there might be a typo nothing much.
@@JDsCodeLab You are right. It was a typo. Thanks!
Also, can you post this code on Github?
I've been struggling with what to copy / paste sometimes. The screen is too small to have many reference points :/
Will do soon👍
@@JDsCodeLab Hello JD,
I was wondering if you have the time to post the code somewhere soon : )
Hi there. Yes i am going to upload the source codes but after this weekend. Kind of busy with job but will do for sure.👍
Hello, is there anyway i can use svg in WPF ?
Hi, extract the figure from svg file and and then use that figure in
@@JDsCodeLab Thanks
Hey JD, can u help me?
How i can verify how many "length" have a TextBoxWithPlaceHolder field "password"?
if (txtPass.Text.Length < 4 || txtPass.Text.Length > 25) [
Hi, Fabio.
You can get password length by txtPass.Password.Length.👍
Okay, how do I get the values from the Password field?
Set x:Name="txtPassword" for the password field then in code behind: you can get the password from txtPassword.passbox.password
@@JDsCodeLab thx bro
If I want to get the value from TextBoxWithPlaceHolder and use it in a conditional if, how I do it?
You want the value in ViewModel or code-behind?
#1. If you want value in code-behind you can assign name to the control and then you can access its value property and use it in condition statements.
#2. Or if you want to access the value in ViewModel and then check for conditions etc. You will need to create a public property in ViewModel and then assign this property to the Usercontrols Value property with Mode as Two way.
I hope this helps.👍🏻
@@JDsCodeLab Yes, it works, thanks.
Welcome👍🏻
@@JDsCodeLab Hello, I have a question. I got the email from the UserControl, but I can't get the Password from UserControl. Is there anything setup to get password value ?
Cool... can you write MakeUp Extension Class for the Text of the Title so that the UserControl can be used anywhere with another Title ? Please
Hi, LeRocher. Do you mean the Username Title?
Hi thanks for the answer.
I mean If I want to add to the Page another textbox for Username I want to use the same UserControl. But I not possible because email textblock has already Email as Text
Oh, i got you now. Do one thing my friend add a dependency property of type string name it Title in Usercontrol's code behind and bind it to the Email title's Text property.
Then you can set Title="Your title here".
Let me know when done. If not then i will try to write the code and share with you here.👍
I've got a problem by clicking on Email TextBox, it is assumed that clicking at any part of the word "Email" the cursor automatically is placed at the start. This doesn't happen in my case, only by pointed and clicking with the cursor at the start of the textbox works(almost forced). Why could that be happening? please help.
Hi Ludwig, did you add the TextBlock before TextBox in TextBoxWithPlaceHolder.xaml file?
Most probably the case is you entered "Email" in Text property of TextBox itself. I suggest you start comparing the code from here: czcams.com/video/1-opr7BFOT0/video.html. As far as i can understand you missed some trigger or Title TextBlock element. Let me know if this doesn't solve the issue. 👍
@@JDsCodeLab Hi I checked but it is the same. It actually works but the problem is that it only works when clicking next to the E of Email, if I click anywhere else nothing happens
Check if you set the HorizontalAlignment to Left instead of TextAlignment.
@@JDsCodeLab That's it, the video was a little fast in that part sorry thanks. Subscribed.
Thanks for subscribing Ludwig. Will try to keep the speed consistent.👍
so i tried adding a temporary email and pass with this code:
private void Button_Click(object sender, RoutedEventArgs e)
{
if(txtEmail.Text == "test@test.com" && txtPass.Text == "test")
{
mainWindow.mainFrame.Navigate(new Uri("/pages/dashboard.xaml", UriKind.RelativeOrAbsolute));
MessageBox.Show("Successfully logged in.");
}
else
{
MessageBox.Show("Wrong email or password, please try again.");
txtPass.Text = "";
txtEmail.Text = "";
txtEmail.Focus();
}
but the thing is it doesnt matter if the email/password is correct it just keeps showing the error message r u able to help me with that?
by error message i mean the "Wrong email or password" messagebox
The placeholder isn't working....I got error "The type of Placeholder is not same as Text" or empty text
Hey, compare your placeholder code again with mine. And check of you have specified correct type for Style.
@@JDsCodeLab it's same, different only names:
public string PlaceHolder
{
get { return (string)GetValue(PlaceHolderProperty); }
set { SetValue(PlaceHolderProperty, value); }
}
public static readonly DependencyProperty PlaceHolderProperty =
DependencyProperty.Register("PlaceHolder", typeof(string), typeof(LogRegTextBox));
How did you do that 26:00 because it doesn't see
Hi, Emine. Kindly elaborate.
welcome , i want source code please
at 15:59 u have a wrong code. It should be This.Text = Passbox.password.