מדריך Silverlight – תוכנית ראשונה

בפרק זה ניצור אפליקציית Silverlight ראשונה. האפליקציה שלנו תכיל כפתור אחד ותציג הודעה כאשר נלחץ על הכפתור.

ראשית נפתח את סביבת הפיתוח:

לחצו על כפתור Start, בחרו ב All Programs, בחרו Microsoft Visual Studio 2010 Express ואז Microsoft Visual Web Developer 2010 Express.

כעת נפתח פרויקט חדש ע"י לחיצה על New Project ונבחר באפשרות Silverlight Application. ניתן שם לפרויקט FirstSilverlightApplication ונלחץ OK.

כעת יש לבחור האם נרצה ליצור פרויקט נוסף מסוג ASP.NET שיארח את אפליקציית ה Silverlight שלנו. נוותר על כך ע"י הורדת הסימון מהאפשרות "Host the Silverlight application in a new Web site", ולחיצה על כפתור OK.

מצב הפרויקט בעת הפתיחה הראשונה אמור להראות כמו בתמונה הבאה

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

כעת נתמקד בחלק של קוד הXAML

נרצה להוסיף כפתור בגודל 150 על 40 בעל התוכן "Hello Silverlight World", בנוסף נרצה להירשם לאירוע לחיצה על כפתור (Click).
נעשה זאת ע"י הוספת השורה הבאה בתוך האלמנט Grid:

<Button Content="Hello Silverlight World"
        Width="150"
        Height="40"
        Click="Button_Click" />

שימו לב: מומלץ שתכתבו זאת בעצמכם, ללא הדבקה מהמדריך כדי לראות כיצד סביבת העבודה עוזרת לכם בהשלמה האוטומטית.

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

כעת נרצה להוסיף קוד לאירוע Button_Click. נלחץ עם כפתור ימני על הכיתוב "Button_Click" ונבחר באפשרות "Navigate to Event Handler"

נקבל את קטע הקוד שמשויך לחלון האפליקציה שלנו, עם פונקציה בשם Button_Click ריקה

נוסיף לפונקציה את השורה:

MessageBox.Show("Button clicked!");

ונריץ את האפליקציה ע"י לחיצה על כפתור Play (משולש ירוק). ניתן גם להפעיל את האפליקציה ע"י לחיצה על מקש F5.

האפליקציה כעת רצה בתוך דפדפן ומציגה את הכפתור שלנו:

לחיצה על הכפתור תציג את ההודעה "!Button Clicked"

מזל טוב! יצרתם את אפליקציית Silverlight הראשונה שלכם בהצלחה!

בפרק הבא נתחיל לצלול לתוך הפרטים של שפת XAML .