בניית פקד חדש - User Control
Random) ומגדירים אותו ל-ForeColor.public) שמעבירים את הערך לרכיב הפנימי: MultiLine, Font, BackColor, Text.פרקי ההרצאה: בניית פקד חדש - User Control
תמלול ההרצאה: בניית פקד חדש - User Control
הטקסט המלא של הדקות הראשונות בהרצאה «בניית פקד חדש - User Control» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים למצב בו אנחנו רוצים לבנות קונטרולים חדשים בעצמנו. למה אנחנו מגיעים למצב כזה? למה אנחנו צריכים לבנות בעצמנו קונטרולים?
אז כמו שראינו, יש כאן בסרגל כלים המון המון פקדים. אנחנו רואים כאן את הפקדים הנפוצים שמשתמשים איתם הרבה, קונטיינרים, תפריטים וסרגלים, פקדי דאטה.
עברנו על המון המון נפוגים של פקדים. אבל יכול להיות מצב שקיים צורך במשהו שאין אותו. בואו ניקח דוגמא. נניח שאנחנו רוצים לבנות איזושהי תיבת טקסט.
אז אין שום בעיה, יש לנו תיבת טקסט משלנו. כרגע שמנו פה איזושהי תיבת טקסט. אבל מה שאנחנו רוצים לעשות בתיבת טקסט זה כאשר היוזר לוחץ על מקשים בתיבה, בוא נניח מתחיל לכתוב, אז התיבה עצמה משנה את הצבע גופן שלה.
כלומר, כל הטקסט שרואים כאן, כולו מתחיל להשתנות, וכל פעם כל לחיצה מקבל צבע אחר. בסדר, איך היינו עושים דבר כזה?
אז כמובן אנחנו צריכים ללכת לאירוע טקסט צ'יינג'ד, דאבל קליק, וכל לחיצה על מקש אירוע טקסט צ'יינג' מתחיל להתבצע.
ומה שאנחנו רוצים לעשות באירוע טקסט צ'יינג' זה לייצר צבע רנדומלי, בואו ניקח פה משתנה random rnd שווה new random, אחרי שאפילו נכנסים אותו פה פעם אחת, אחרי שלקחנו צבע רנדומלי אנחנו רוצים, או משתנה רנדומלי, אנחנו רוצים לייצר שלושה גוונים red, green ו-blue, red rnd next של 0 עד 256, כי אם אני רוצה לייצר איזשהו צבע רנדומלי
אני צריך את שלושת הגוונים האלה, רד, גרין ובלו. בואו ניקח את זה, גרין. ואחרי שיש לי שלושה גוונים רנדומליים, אני מייצר קולור וקורא לפונקציה שנקראת FromRGB, נותן לה רד, נותן לה גרין ונותן לה בלו והנה יש לי צבע רנדומלי.
אם יש לי צבע רנדומלי, אני יכול לבוא לטקסט בוקס ולהכניס לתוך ה-4Color את הצבע הרנדומלי שמצאתי. בואו נריץ, נראה קודם כל שזה עובד.
טופס רץ, אני מתחיל לכתוב בתוך התיבת טקסט, קול, מקש, אני רואה שיש לי פה צבע רנדומלי אחר, מדליק, נניח שזה מה שאני רוצה עבור תוכנת ילדים שאני כותב.
אבל הבעיה היא שאני לא רוצה רק תיבת טקסט אחת, כי אם הייתי רוצה רק תיבת טקסט אחת בכל התוכנית שמתנהגת בצורה כזאת, אז ברור שהקוד שעשינו מקודם זה היה הקוד הנכון לביצוע.
אבל כאשר אני רוצה את זה בעוד כל מיני תיבות טקסט, שקיימות לי בטופס הזה וגם בטפסים אחרים יכול להיות שאני רוצה להשתמש עם תיבות טקסט כאלה.
אז אם אני אעשה את זה בשיטה שעשינו אנחנו נצטרך ללכת ולחזור על הקוד ואנחנו לא רוצים לחזור על קוד. אז בואו נסתכל רגע מה אנחנו בעצם רוצים לבנות כאן.
מה שאנחנו רוצים לבנות כאן זה תיבת טקסט חדשה שלא הייתה קיימת לפני כן. בייסיקלי אנחנו רוצים לבנות רכיב חדש שלא היה קיים לפני זה דומה לרכיב קודם אבל הוא מתנהג טיפה אחרת.
אז אחת השיטות לעשות את זה שהיא מאוד נפוצה ומאוד פשוטה לביצוע זה יצירה של קונטרול חדש. וזה מתבצע על ידי User Control, כלומר קונטרול שאנחנו בתור מתכנתים בונים.
איך אנחנו עושים את זה? כל מה שאנחנו צריכים לעשות זה לגשת לפרויקט שלנו, מקש ימני Add New Item, או אני יכול אפילו לראות את זה כאן, גם אם הייתי הולך לניו אייטם וגם עם יוזר קונטרול אני רואה שבעצם יש לי פה אפשרות לבחור יוזר קונטרול נותן לו שם משמעותי לדוגמה happy text box מתאר תיבת טקסט שמחה כזאת נבצע
add ומה שאנחנו עכשיו מקבלים זה בעצם משטח כזה וכל הפקדים שהיו זמינים עבורנו לגרירה על טופס עכשיו זמינים עבורנו לגרירה על המשטח הזה שהוא לא טופס בעצמו אלא הוא user control.
אנחנו יכולים לעצב את הגודל שלו ולקחת אלו פקדים שאנחנו רוצים. שימו לב שאני יכול לגרור לכאן כל מיני פקדים, לא רק פקד אחד.
אני יכול ליצור לעצמי מהם יחידה אחת שבנויה מכל הפקדים האלה. בסדר, אנחנו לא רוצים לגרור את כל אלה כי אנחנו רוצים לעבוד עם הדוגמה שמקודם עשינו.
אז כל מה שאנחנו צריכים לעשות זה לגרור טקסט בוקס אחת לתוך היוזר קונטרול ולהגדיר שהמימדים של התיבה שלנו הם אותם המימדים של היוזר קונטרול עצמו.
איך אנחנו עושים את זה? בואו נגדיר בצורה כזאת שהיוזר קונטרול מכיל בדיוק את התיבה לגמרי. בואו קודם כל נחפש את המיקום של ה-location של התיבה, נגדיר 0,0, זה אומר שהתיבה תהיה בדיוק בהתחלה ונראה מה המימדים של התיבה מבחינת סייז.
אנחנו רואים שזה 163 על 20 אז בואו נשנה את זה בשביל שיהיה עגול 160 על 20 ואז נוכל ללכת לקונטרול עצמו. שימו לב שאני כרגע תופס את הקונטרול ואז אני מקבל מאפיינים ששייכים לקונטרול החדש שאנחנו בונים ולא לרכיבים שנמצאים בתוכו.
גם כן 160 והייט 20 בדיוק כמו התיבה. זה המימדים ההתחלתיים שלו. זאת אומרת צמצמנו אותו כך שהוא יהיה בול כמו המימדים של התיבה שבתוכו. עכשיו אנחנו צריכים לגשת לתיבה עצמה.
בואו נבחר אותה. נלך בתיבה למאפיין טקסט צ'יינד שהיה לנו מקודם ואת קורול התוכן שאנחנו כתבנו ניתן עכשיו לתיבה.
דרך אגב, אני רואה שלא נתתי שם לתיבה וזה לא אוקיי לתיבת הטקסט. בואו נלך וניתן ל-TXT data, לא משנה לי איזה data זה.
ועכשיו אנחנו יכולים לגשת לכאן ולשנות גם את האירוע הזה ל-TXT data. קונטרול נקודה אנטר משנה לנו את זה גם ברישום. בואו נחזור לטורפס.
נעתיק את הקוד שהיה לנו מקודם. ראשית יש לנו את ה-RND. נשים אותו פה, נחזור לטופס, נעתיק את כל הקוד הזה, נשים אותו פה, נשנה את זה ל-txt data, ניפטר ממרחבי שמות שאנחנו לא משתמשים איתם, ומה שאנחנו רואים כרגע זאת הקלאף של ה-user control שקראנו לה happy text box, היא יורשת מהמחלקה user control וזה הדברים
שיש בתוכה. אוקיי, בואו נסתכל רגע על הטופס עצמו וניפטר מכל תיבות הטקסט שקיימות כאן.
נתפוס את כל תיבות הטקסט, נעשה לכולם delete, נחזור לקוד, ניפטר גם מהאירוע עצמו, אנחנו לא צריכים אותו עכשיו, ומה שאנחנו כן רוצים לעשות אבל זה לשים על הטופס שלנו את התיבת טקסט שאנחנו הגדרנו.
בואו נפתח פה את הטופס. איפה התיבת טקסט נמצאת? אז כל מה שאנחנו צריכים לעשות זה ctrl+shift+b ולבנות את התוכנית שאנחנו כותבים כרגע.
בואו נעשה ctrl+shift+b, פתאום אנחנו רואים שיש לנו כאן Happy Text Box User Control Components. בואו נגרור אותה ונראה תיבת טקסט תמימה לחלוטין, פשוטה לגמרי.
אנחנו יכולים לגרור ולראות שאנחנו יכולים לשים כמה כאלה. נשמור, בואו נריץ. אני מריץ את האפליקציה ואני רוצה להתחיל לכתוב בתוך אחת מהן.
שימו לב שאני רואה שהיא משנה את הצבע בצורה רנדומלית לצבעים רנדומליים, גם השנייה וגם השלישית. לא שכפלנו את הקוד, כתבנו רכיב חדש שככה הוא מתנהג.
אחלה. בואו נראה עוד כמה דברים. קודם כל, מה השמות שלהם? אז אני רואה שהראשון שגררתי, אוטומטית המערכת נותנת לו את השם Happy Text Box 1, השני Happy Text Box 2, השלישי Happy Text Box 3, כלומר, Visual Studio אוטומטית
לוקחת את השם של היוזר קונטרול ומוסיפה מספר לידו. אנחנו יכולים כמובן לגשת ולתת שם אחר, לדוגמה, txt first name וזה יהיה txt last name.
אין בעיה. האם אנחנו יכולים לשנות את הגודל של הרכיב? בואו נסתכל, נתפוס את תיבת הטקסט, אבל שימו לב ששיניתי את הגודל של הרכיב ותיבת הטקסט לא גדלה ביחד איתו.
אוקיי, איך אנחנו מטפלים בזה? אז בואו נחזור בחברה ל-happy text box, והפעם אנחנו רוצים לתפוס את תיבת הטקסט, ומה שאנחנו רוצים לעשות זה דוקינג. במידה ואנחנו עושים דוק, אז הרכיב מוצמד על כל הטופס.
אם עשינו איזשהו שינוי ב-user control, כדאי מאוד לבצע סייבינג ואז ctrl+shift+b לצורך בנייה של כל האפליקציה ואז לחזור בחזרה לטופס ולפעמים אנחנו גם צריכים ללכת ולמחוק את מה שעשינו מכדי שהשינויים ייתפסו.
אז בואו ניפטר מכל מה שהיה פה מקודם ונגרור עכשיו תיבה חדשה, נגדיל אותה ונראה שהפעם הכל בסדר, התיבה הגדלה. מה קורה אם אנחנו רוצים לבצע דברים נוספים?
לדוגמה, אני רוצה לאפשר לתיבה להיות מולטי ליין. עכשיו, שימו לב שהתיבת טקסט אין לי גישה אליה. יש לי גישה אך ורק ליוזר קונטרול עצמו ולא לרכיבים שבתוכו.
אני רוצה לומר שברצוני לאפשר למשתמש לבצע מולטי ליין כן או לא עבור תיבת הטקסט זה אומר שאנחנו עכשיו צריכים ללכת ולחשוף מתוך היוזר קונטרול איזושהי תכונה מסוימת איך עושים את זה בואו נלך לקוד של היוזר קונטרול ואנחנו חושפים תכונות על ידי פרופרטיז פרופרטי הוא public אנחנו
צריכים לחשוב מה סוג הנתונים של הפרופרטי אז בואו נסתכל רגע על תיבת הטקסט עצמה נלך לתכונות שלה ונחפש מולטי ליין ונראה שתכונת מולטי ליין שמאפשרת לכתוב מידע במספר שורות היא בוליאנית ואומר שאנחנו צריכים עכשיו לבנות פרופרטי בוליאני בתוך היוזר קונטרול שלנו.
בואו נקרא לו מולטי ליין ונגדיר פה get set ונחשוף את הערך של המולטי ליין של תיבת הטקסט שבתוכו txtdata.multi line