פקדי מיכל - Containers

תמלול ההרצאה: פקדי מיכל - Containers

הטקסט המלא של הדקות הראשונות בהרצאה «פקדי מיכל - Containers» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:03

   אנחנו עוברים לקבוצה אחרת של רכיבים ויזואליים שנחשבים קונטיינרס, כלומר מיכל. בואו קודם כל נפתח פרויקט חדש, קונטיינר קונטרולס.

2. 00:23

   יש לנו פה טופס, נציב את הטולבוקס ונסתכל שיש לנו סרגל שנקרא קונטיינרס. בואו נסתכל מה הרעיון בקונטיינרס ונראה מספר קונטיינרים נפצים שמשתמשים איתם הרבה פעמים.

3. 00:43

   קונטיינר זה סך הכל רכיב שבתוכו אפשר לשים רכיבים אחרים. באחד הסרטונים אנחנו כבר ראינו שימוש בגרו בוקס, גרו בוקס זה קונטיינר. מה שהגרו בוקס נותן לנו זה מסגרת, בואו ניקח כאן בוקס full name ונבקש מהמשתמש מידע לגבי השם המלא שלו.

4. 01:09

   אז בוא נניח שכאן אנחנו רוצים enter full name ואז יש לנו צורך לקבל first name ו-last name, הנה label לצורך.

5. 01:22

   first name, הנה תיבת טקסט לגבי first name, שכפל אותם, ctrl k, ctrl c, יש לנו פה last name, וככה אנחנו יכולים להגדיר בעצם אזור נפרד בטופס לצורך הפרדת UI מ-UI אחר, user interface אחר.

6. 01:57

   בואו ניתן להם את השמות, זה lbl first name, יש לנו txt first name, יש לנו lbl last name, יש לנו txt last name אז קונטיינר ראשון זה היה הקונטיינר הזה שמאפשר לנו לבצע חלוקת משנה של הדף קונטיינר הבא בתור זה פאנל פאנל גם הוא מאפשר להכיל מספר פריטים גם הוא יכול להוות איזושהי מסגרת אבל אנחנו רואים שקודם כל אין לו

7. 02:56

   איזושהי כותרת משלו כמו לגורו בוקס אבל אבל יש משהו נוסף שקיים בפאנל ולא קיים לנו בגו בוקס. מה יקרה אם בתוך הפאנל אנחנו עכשיו מגדירים סדרה של ערכים או רכיבים, אבל שמספר הרכיבים שהגדרנו בתוך הפאנל הוא גדול יותר מהממדים של הפאנל.

8. 03:25

   אם אנחנו עושים את זה, אז אנחנו יכולים להגדיר לפאנל שיהיה לו מה שנקרא גלילה. בואו נלך ל-Auto-Scroll, True, ואנחנו רואים שאנחנו יכולים לבצע איזושהי גלילה עבור הפאנל.

9. 03:48

   זאת אומרת שאם אנחנו משתמשים בפאנל אנחנו יכולים על שטח מסוים להגדיר הרבה יותר UI, הרבה יותר User Interface מאשר השטח הזה מאפשר. בגלל שאנחנו לוקחים את הגלילה ואפשר כרגע לגלול ולראות עוד דברים שנמצאים בתוכו.

10. 04:10

    לפאנל יש את המאפיין Border Style שבעזרתו אנחנו יכולים להגדיר לדוגמה Fixed, ואז רואים אותו בצורה כזאת. בואו נריץ את התוכנית ונראה שאפשר לראות בצורה קצת יותר ברורה את האזור עצמו של הפאנל.

11. 04:30

    אז גם הוא נחשב קונטיינר, שימו לב שכל אחד מהקונטיינרים אם אני מזיז אותו אז כל מה שנמצא עליו זז גם כן והמיקומים של הרכיבים שבתוך קונטיינר נקבעים ביחס לקונטיינר עצמו.

12. 04:46

    הרכיב הבא שאנחנו הולכים לראות נקרא tab control. ראב קונטרול זה פשוט מאוד רכיב שמאפשר לנו להגדיר כרטיסיות. בואו רגע ניפטר ממנו ונשים אותו כאן ואז נפתח אותו ואנחנו רואים שיש לנו אפשרות להגדיר מספר כרטיסיות.

13. 05:11

    אנחנו יכולים ללכת ולהוסיף עוד כרטיסיות. איך עובדים עם הרכיב הזה? קודם כל אני שם עליו רכיבים והרכיבים אוטומטית הולכים להיראות בכרטיסייה שגררתי את הרכיבים עליה.

14. 05:26

    אני כרגע נמצא בכרטיסייה הראשונה, אז הרכיבים האלה הולכים להיות בכרטיסייה הראשונה. אם עכשיו אני מבצע קליק לכרטיסייה השנייה בדיזיינר, בדיזיין טיים, ועכשיו אני הולך לכרטיסייה השנייה ושם רכיבים משל חדשים, אז כשיראו את הכרטיסייה השנייה אלו הרכיבים

15. 05:44

    שיראו אותם. בואו נוסיף עוד כרטיסייה. כל מה שאנחנו צריכים לעשות זה לבחור את הרכיב טאב קונטרול. שימו לב שיש הבדל בין זה שאני לוחץ באזור הזה ובוחר את כל הטאב קונטרול, לבין זה שאני לוחץ ובוחר כרטיסייה ספציפית.

16. 06:05

    אז אני כרגע בוחר את כל ה-Tab Control ואני הולך לאוסף שנקרא Tab Pages. באוסף הזה יש לנו כרגע שני טאבים, טאב זה בעצם כרטיסייה. אנחנו יכולים לדוגמה ללכת ל-Tab ולתת איזושהי כותרת טקסט.

17. 06:25

    בואו נניח שאנחנו נמצאים ב-Tab אחד וזה Details, וטאב מספר 2 הולך להיות תמונות. זה יהיה Images ואנחנו יכולים להוסיף עוד טאב ובטאב הזה זה יהיה Hobbies.

18. 06:54

    תחביבים, נבצע אוקיי ונלך לטאב ה-Hobbies והפעם אנחנו רוצים להגדיר נניח תחביבים שונים שהמשתמש יכול למלא. אם אנחנו מריצים את זה אז אנחנו יכולים לראות שאפשר לטייל בכרטיסיות והמשתמש יכול לבחור וככה אפשר להראות הרבה תוכן באזור מועט, בצורה של כרטיסיות.

19. 07:30

    בואו נחזור בחזרה. אוקיי, כמה דברים נוספים שאפשר להגדיר מבחינת ממשק המשתמש של הכרטיסיות. דבר ראשון, יש לנו כאן Size Mode, מה המצב של הגודל.

20. 07:51

    יש לנו אפשרות לדוגמה להשתמש ב-Fixed, וזה אומר שהטאבים כרגע תופסים את כל הרוחב שהגדרתי להם. בואו נריץ, נראה איך זה בריצה, שזה בעצם אמור להיות אותו הדבר, אבל אם אנחנו רוצים שהכרטיסיות יתפסו את כל השטח שיש להם, אין שום בעיה והולך להיות פיקסט.

21. 08:10

    אפשרות נוספת שיש לנו זה המיקום שלהם. כרגע הם נמצאים בטופ, אנחנו יכולים לדוגמה ללכת לבוטום והכרטיסיות עוברות להיות למטה, הכותרות שלהם, או בלפט, אבל כמובן אנחנו לא רואים את הכיתוב, או ברייט, אם הכיתוב היה אולי פחות מלל היינו רואים את זה, נשאיר את זה בטופ שזה הכי סטנדרטי.

22. 08:37

    יש לנו את האפירנס שאנחנו יכולים לשנות לכפתורים ואז הכפתור הלחוץ זה בעצם הכרטיסייה שכרגע בחרנו. בואו נריץ את זה ונראה שיש לנו פה סוג של לחצנים ששולטים על הכרטיסייה הפעילה כרגע ויש לנו flat patterns אולי נחזיר את זה למצב של size mode normal ונראה את זה בצורה קצת יותר אסתטית.

23. 09:14

    ו-flat patterns אומר לחצנים שהם במצב של flat, גם זה איזשהו UI מסוים. בואו נחזיר את זה למצב של כרטיסיות סטנדרטיות, נורמל, וזה היה ה-Tab Control.

24. 09:40

    הדבר הבא שאנחנו הולכים לראות זה Split Container. Split Container לצורך ההדגמה אני רוצה לבנות טופס חדש.

25. 09:54

    אז מה שנעשה זה פשוט מכה שימני על הפרויקט Add Windows Form. נקרא לו Split Container Form ובואו נניח שיש לי את הטופס הזה.

26. 10:16

    עכשיו נניח שאנחנו רוצים להציג List Box שנמצאת בצד השמאלי של הטופס. אז מה בדיוק הבעיה?