רוצים לראות יותר מ-HWzone בתוצאות של Google?הוסיפו אותנו כמקור מועדף ב-Google
היכרות עם טכנולוגית ה-WPF
טכנולוגית ה-WPF (ר"ת עבור Windows Presentation Foundation) קיימת כבר קרוב ל-5 שנים, ולמרות זאת מעטות התוכנות אשר משתמשות בה. בעזרת שימוש בטכנולוגיה זו תוכלו גם אתם לגרום לתוכנה שלכם להראות כחלק ממערכות ההפעלה ווינדוס 7 או ווינדוס וויסטה. מערכות הפעלה אלו הציגו קו עיצובי שונה לחלוטין ממערכת ההפעלה ווינדוס XP, אך מרבית התוכנות עדיין לא השלימו את הפערים ונראות כנטע זר במערכות ההפעלה המודרניות. בעזרת טכנולוגיה ה-WPF תוכלו ליצור ממשקי משתמש מתוחכמים ויפים בקלות רבה. מטרת מדריך זה היא לעודד מתכנתי .NET לעבוד בטכנולוגית ה?WPF, ובכך לשפר את ממשקי המשתמש אשר הם בונים.
 |  |
תוכנה ללא WPF | תוכנה עם WPF |
בסיום המדריך ניצור תוכנה פשוטה זו:
הערה: האנימציה בסרטון מקרטעת בגלל תוכנת ההקלטה, במחשב האנימציה חלקה לחלוטין, כפי שתוכלו לראות בסוף המדריך.
דרישות מקדימות
על מנת לבצע את המדריך שלנו, יש למלא אחר הדרישות הבאות:
- התקנה של Visual C# 2010 Express – להורדה
- התקנה של Microsoft Expression Blend – להורדת גרסת נסיון ל-60 יום
- ידע בסיסי ב-C#
מה זה WPF
WPF זוהי טכנולוגיה שפותחה על ידי מיקרוסופט ושוחררה כחלק מ?.NET Framework 3.0 ייחודה של WPF לעומת התצוגה הישנה לה היינו רגילים בתקופת XP היא בכך שישנה הפרדה מלאה בין הקוד (C# או Visual Basic) לבין עיצוב התוכנה (נכתב ב-XAML). בעזרת ההפרדה הזאת ניתן ליצור ממשק משתמש מתוחכם, נעים ויפה במעט מאוד שורות קוד. כאמור ממשק המשתמש נכתב בשפת XAML (מבוטא 'זאמל'), שפה המזכירה את שפת ה-XML. ל-XAML ישנן אפשרויות ופקודות רבות, ועל מנת שהמדריך שלנו יהיה קל וברור, בחרתי להשתמש בתוכנת Blend של מיקרוסופט. תוכנת ה-Blend בעצם יוצרת את קוד ה?XAML בהתאם לעיצוב שנבצע בה. ניתן לראות את ההפרדה הברורה שיש בין עיצוב ממשק המשתמש (נעשה ב-Blend ויכול להתבצע גם על ידי אדם שאינו מתכנת), לבין כתיבת הקוד (נעשה ב-Visual Studio).
האנימציה
ראשית נתחיל מעיצוב ממשק המשתמש. נפתח את Blend ונבחר ב?New Project.
 |
במסך הבא נבחר את שם התוכנה (אצלנו היא נקראת simpleWPF), את תיקיית היעד ואת השפה בה נרצה לתכנת (במדריך זה נשתמש בשפת #C).
 |
כעת מוצג בפניכם המסך הראשי של Blend.
הנה הסבר קצר על חלוקת המסך:
 |
כפי שניתן לראות בתמונה, המסך הראשי של Blend מחולק לחמישה חלקים עיקריים:
החלק הראשון – זהו סרגל הכלים, מחלק זה ניתן להוסיף עצמים שונים אל ממשק המשתמש שלנו.
החלק השני – בדרך כלל יהיה פתוח על טאב ה-Project בו תוכלו לראות את הקבצים השונים בפרויקט שלכם. מחלק זה גם משנים את ה-Triggers בהם נשתמש בהמשך.
החלק השלישי – בחלק זה ניתן לראות בתצוגת עץ את היררכיית העצמים בפרויקט שלנו. (לעיתים ב-WPF ישנו עצם בתוך עצם, ובעזרת החלון הזה ניתן להבין מי מכיל את מי). בנוסף בחלון זה ניתן לערוך את האנימציות שניצור בהמשך.
החלק הרביעי – חלק זה בעצם מציג לכם כיצד יראה הפרויקט שלנו. שימו לב לשלושת הכפתורים האנכיים בין חלקים ארבע וחמש, מומלץ ללחוץ על הכפתור השלישי (Split) על מנת לראות בזמן אמת את קוד ה-XAML אשר Blend יוצר עבורנו.
החלק החמישי – כאן ניתן לשנות את המאפיינים השונים של כל עצם (בדומה ל-Visual Studio), ובנוסף גם ניתן לקשר כאן אירועים (Events).
כעת אפשר להתחיל לעצב את ממשק המשתמש. לחצו על התוית Window בתצוגת העץ באזור 3 (מופיע מעל LayoutRoot) ושימו לב שהופיעו מאפיינים שונים של החלון באזור 5. כעת כל אחד יכול לעצב כראות עיניו, אני השתמשתי בהגדרות הבאות:
 |
לפי הגדרות אלה החלון יוצא מעט שקוף והרקע הוא גרדיאנט בין תכלת ללבן. (שימו לב כי השקיפות מסירה את כפתור הסגירה, מזעור ומסך מלא ואנו מקבלים חלון אותו אנחנו יכולים לעצב בכל דרך שנבחר ללא תבנית מסוימת).
כעת נוסיף Label לחלון (נעשה על ידי לחיצה ארוכה על ה-T בסרגל הכלים ובחירה ב-Label). כך זה נראה:
 |
חשוב לתת ל-Label ולכל עצם אחר שנוסיף שם על מנת שנוכל להשתמש בו בקוד ה-C#.
כאמור Blend יוצרת בשבילנו את קוד ה-XAML בהתאם להעדפות שנגדיר, אולם ניתן לשנות את קוד ה-XAML ולראות כיצד התוצאה תושפע ישירות על המסך:
 |
בצורה דומה, נוסיף כעת גם Button וגם TextBox. יש לתת לשניהם שמות. התוצאה תראה כך:
 |
כעת ניצור את האנימציה, על מנת ליצור אנימציה יש ללחוץ על כפתור ה-"+":
 |
הכניסו שם לאנימציה שלכם, ולחצו OK. כעת אתם נמצאים במצב עריכת אנימציה הנראה כך:
 |
ניתן לשים לב שיש מסגרת אדומה סביב החלון שלנו מה שמסמל שאנחנו במצב הקלטה. שימו לב לחלון ה-Timeline שנפתח. בחלון זה אנו עורכים את האנימציה. עריכת אנימציה ב-Blend היא פעולה פשוטה וקלה: אנו מסמנים את המצב ההתחלתי של העצם, המצב הסופי של העצם, פרק הזמן שנבחר לאנימציה, ו-Blend יוצרת אנימציה חלקה בין שני המצבים הללו! על מנת לבצע את האנימציה ראשית נסמן את העצם עליו אנו מעוניינים לבצע את האנימציה – במקרה שלנו ה-Label. כעת כאשר ה-Label מסומן נקבע את המצב בו הוא נמצא כרגע, כמצב ההתחלתי. נלחצן על הכפתור Record Keyframe (מסומן באדום בתמונה למעלה) ונראה כי נוצר לנו עיגול על ה-Timeline:
 |
כעת נזיז את הקו הצהוב לנקודת הזמן הבאה בה נרצה להוסיף מצב. במדריך זה אני אבצע אנימציית של סיבוב הטקסט 360 מעלות. לשם ביצוע אנימציה זו יש להוסיף מצב ביניים בה הטקסט יהיה הפוך ב?180 מעלות (הסיבה היא שאם נהפוך את הטקסט ישירות ב?360 מעלות, המצב ההתחלתי יהיה זהה למצב הסופי וכך כאשר Blend תשווה ביניהם היא לא תדע איזה אנימציה לבצע). לכן ניצור מצב ביניים לאחר שתי שניות, נזיז את הסמן הצהוב לזמן שתי שניות נהפוך את ה-Label ב-180 מעלות ונלחץ על Record Keyframe:
 |
כעת נסיים את הסיבוב. נעביר את הסמן הצהוב לשניה 4, נחזיר את הטקסט לכיוונו המקורי ונלחץ על Record Keyframe:
 |
סיימנו את האנימציה! עכשיו ניתן לצאת ממצב ההקלטה על ידי לחיצה על ה-Close Storyboard ליד לחצן הפלוס שלחצנו מקודם. אם נריץ את התוכנה נשים לב כי האנימציה מתבצעת ברגע שהתוכנה עולה. אנו מעוניינים שהיא תתבצע רק ברגע שנלחץ על הכפתור ולכן נבטל זאת. ב-Blend נלחץ על כפתור ה-Triggers ולאחר מכן על Window Loaded:
 |
נלחץ על המינוס ליד פקודת ההרצה של האנימציה שלנו. וכעת כאשר נפתח את התוכנית האנימציה לא תפעל, אלא רק כאשר נקרא לה.
בוא נכתוב גם קצת קוד במדריך הזה!
אנו מעוניינים כי ברגע שנלחץ על הכפתור הטקסט ישתנה למה שכתבנו בתיבת טקסט והאנימציה תבוצע. ניתן לבצע זאת ישירות דרך Blend, אך אני מעוניין להדגים את ההפרדה בין עיצוב ממשק המשתמש לבין הקוד ב-WPF ולאכן נבצע זאת ב-#C. על מנת לבצע פעולות כאשר הכפתור נלחץ, נבחר בכפתור ונלחץ על סימן הברק בחלון המאפיינים. לאחר מכן, נלחץ פעמיים על תיבת הטקסט ליד Click ונשים לב כי נפתח לנו עורך #C בתוך Blend.
 |
ניתן לכתוב את קוד ה-#C גם בתוך Blend, אך מומלץ לסגור את Blend ולפתוח את הפרויקט ב-Visual Studio שם נכתוב את הקוד. תוכלו לראות כי אותם השינויים שביצענו ב-Blend עובדים גם ב?Visual Studio. כעת נכתוב מעט קוד: ערכו ב-Visual Studio את הקובץ MainWindow.xaml.cs בהתאם לשינויים הבאים:
הוסיפו בראש הקובץ את השורה אשר תאפשר לנו לעבוד עם אנימציות:
using System.Windows.Media.Animation;
כעת הוסיפו בפונקציית myButton_Click את השורות הבאות:
if (this.myTextBox.Text.Length == 0)
{
MessageBox.Show(@"Please Enter Text", @"Error");
return;
}
this.myLabel.Content = this.myTextBox.Text;
(this.FindResource(@"myAnimation") as Storyboard).Begin();
זהו קוד #C סטנדרטי לחלוטין. תחילה אנו בודקים האם המשתמש הכניס טקסט לתיבת הטקסט, במידה ולא אנו מציגים לו הודעה. לאחר מכן, אנו משנים את תוכן ה-Label לטקסט שהמשתמש הכניס ומפעילים את האנימציה בצורה הבאה – תחילה אנו מוצאים את האנימציה על ידי השם שנתנו לה בהתחלה, לאחר מכן אנו עושים לה המרה (Casting) ל-Storyboard (הפונקציה FindResource מחזירה object) וקוראים למתודה ()Begin.
הערה: יש להחליף את כל השמות שבחרנו (מתחילים ב-my) בשמות אותם אתם בחרתם.
 |
סיכום
מדריך זה הוא באמת מדריך על קצה המזלג. ראינו מספר אפשרויות שניתן לבצע ב-WPF (כמו שימוש בגרדיאנטים ואנימציות), אולם ישנם אפשרויות רבות נוספות אותן ניתן לבצע ב-WPF. ניתן לראות כי הדוגמה שיצרנו בכמה דקות, למרות פשטותה, מראה את הפוטנציאל הטמון בטכנולוגיה של מיקרוסופט. אנו מקווים כי למדתם מהמדריך, ושנזכה לראות בעתיד תוכנות יפות ולא אפורות ומשעממות כפי שהורגלנו.
להורדת קטעי הקוד המלאים עבור התוכנה
הערה: ניתן להריץ את התוכנה בקלות על ידי הפעלת הקובץ SimpleWPF.exe בספריית bin\Debug.
