مضى على الشبكة و يوم من العطاء.

كيفية صناعة شاشة تسجيل دخول (log in) الجزء الثاني

shadowshadow is verified member.

{ | مشرف قسم لغات البرمجة | }
.:: طاقم المشرفين ::.
.:: كاتب تقني ::.

السمعة:

بسم الله الرحمن الرحيم
بدون زيادة كلام يلا نبلش على السريع


عندنا كثير من الإضافات مثلا نضيف Text لنوضح للمستخدم ايش يدخل بالزبط (اسم المستخدم / ايميل / رقم هاتف ) وغيرها الكثير
جاهزين يلا نبلش
1- بدنا نضيف label من Toolbox
1711205538066.png
2- بدنا نعدل الخط و text الموجود اصلا فبدنا بإختصار نتحكم فيه بالضغط على label الي ضفناه و نضغط على الجهة اليمنى من الماوس (Right Click)
وبنختار Properties (خصائص)

1711205958503.png
3-طيب بدنا نعدل على text فبنبحث عنه
1711205995020.png
4-وبنرجع نضيف label ل password وبنسوي نفس ما سبق
5-طيب هسا بدنا كمان نعدل على text الموجود في button

1711206094912.png
نفس الاشي بنعدل على text الخاص فيه
1711206120540.png
وهيك بكون الشكل بعد كل هاي التعديلات
1711206142969.png

طيب design مش كثير صح وبرضو لما نجرب نشغل البرنامج وبعد ما نكتب user name لازم احدد textbox الخاص ب password مشان اقدر اكتب فيه يعني بإختصار لازم نخليه اكثر واقعية realistic ;)
طيب يلا نبلش تعديلات وخلينا نبدأ بأنه ينتقل من textbox لثانية من خلال key الموجود بال keyboard وبعض الاضافات الثانية
1-بداية بنحدد textbox

1711206800768.png
2-وبنروح للخصائص الخاصة فيه
3-طيب وبدنا نختار event وهي نفسها إشارة البرق الي فوق


1711207021366.png

4-وبنبحث عن key down لانن منطقياً بدنا بس يضغط على سهم للأسفل ينزل المؤشر لأسفل (textbox الخاص ب password ) بنضغط عليها مرتين (double click)

1711207038602.png

رح ينشئ function خاص فيها ورح ينقلنا لصفحة الخاصة ب code

1711207363191.png

5-طيب هسا بدنا ننقل الموشر ل textbox الخاص ب password في حالتين لما يضغط على السهم او يضغط enter
1711207717544.png

بإختصار بحكي الكود اذا ضغط على enter او على key down فهو بنقل المؤشر ل textbox الي اسمه password (احنا سميناه هيك بالجزء الأول) وبسوي focus للمؤشر

C#:
 if (e.KeyCode == Keys.Enter || e.KeyCode == Keys.Down)
 {
     password.Focus();
 }

6-طيب هسا بنروح ل textbox الثاني (password) ونفس الأشي بنبحث على ال event الخاص فيه وعندنا هون حالتين
الحالة الأولى : لما يضغط enter يشيك على اسم المستخدم وكلمة السر يعني أنه فعليا كأنه ضغط على button
الحالة الثانية : لما يضغط السهم لأعلى (key up ) يرجع المؤشر textbox الأول (user name)


1711208264840.png
الكود بالحالة الثانية :

1711208284144.png
C#:
if (e.KeyCode == Keys.Up)
{
    username.Focus();
}
الكود بالحالة الأولى :
1711208361813.png
C#:
 if (e.KeyCode == Keys.Enter)
 {
     button1_Click(this, new EventArgs());
 }
وهيك بنحكيله انه لما يضغط enter ويكون المؤشر في password يعتبر button1 تم الضغط عليه🤗
وهيك بصير البرنامج اكثر واقعية


طيب في برضو مشكلة انه form بتظهر بمكان عشوائي يلا نخليها بالنص او اي مكان محدد
1- بتحدد على form من خلال الضغط عليه

1711208483357.png

2-وبنرجع على Properties

1711209081126.png

3-بندور على start position

1711209091673.png

4-وبنعدلها وبنخليها center screen

1711209131876.png

5-طيب بما انه احنا بخصائص form خلينا نغير text الخاص فيها

1711209237681.png

6-ونخليه log in
1711209254351.png

وهيك بطلع معنا الشكل بعد كل هاي التعديلات

1711209291776.png

لسا مش راضي ك design معك حق يلا نعدلو شوي :sneaky:
1-خلينا نغير اللون الخاص ب form


1711209347645.png
2-واختار اي لون انت بتحبه

1711211965359.png

طيب الخط مش عاجبك او صغير بسيطة يلا نغيره
1-أول اشي بنحدد label الي بدنا نعدلهم


1711212007618.png

2-وبنختار من الخصائص font

1711220422407.png

3-وبنضغط عليه بتظهرلنا قائمة بنقدر نعدل فيها على كيفنا

1711220793157.png

4-وخلينا نغير موقع label
1711220826193.png
برضو لو بدك تعدل على خط button بتسوي نفس ما سبق
وهاي النتيجة النهائية
1711220866231.png

وهيك بنختم الجزء الثاني وقريبًا إن شاء الله منكمل باقي الأجزاء والمواضيع
 

المرفقات

  • 1711205971255.png
    1711205971255.png
    23.3 KB · المشاهدات: 138
  • 1711206797766.png
    1711206797766.png
    2.3 KB · المشاهدات: 150
التعديل الأخير بواسطة المشرف:
موضوع جميل يا شادو والله
استمر يا بشمهندس عسى الله أن ينفع بك ❤️
 

آخر المشاركات

عودة
أعلى