אפליקציה ראשונה

MainPage.xaml
דף מורכב מאוסף פקדים, לכל פקד יש תפקיד ויכולות מוגדרות.
את הפקדים מגדירים באמצעות XAML, XAML זה קובץ XML.
 נוסיף לדף שלושה פקדים:
פקד TextBlock - פקד שמציג מידע טקסטואלי.
פקד TextBox – תיבת טקסט, מאפשר למשתמש להקליד טקסט.
פקד Button -  פקד פקודה, מאפשר למשתמש לבצע פעולה מסוימת.
קוד ברירת המחדל של הדף נכיל את התגית Page, מספר הגדרות של הדף ואת התגית Grid.
נוסיף את הקוד הבא לחלונית ה-XAML בתוך התגית Grid:
 

   1:  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

   2:          <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" >

   3:              <TextBlock Name="txtDisplayData" FontSize="30"></TextBlock>

   4:              <TextBox Name="txtData" FontSize="30"></TextBox>

   5:              <Button Name="btnClick" Content="Click Me" Click="btnClick_Click" FontSize="30" HorizontalAlignment="Center"></Button>

   6:          </StackPanel>

   7:      </Grid>

ניתן לבדוק כיצד נראה ממשק המשתמש על מכשירים שונים ועל מסכים בגדלים שונים.
בצד שמאל של המסך ישנה חלונית הנקראת "Device preview" המאפשרת בחירה של סוג מכשיר וגודל תצוגה:

MainPage.xaml.cs
קובץ ה-C# מכונה גם קובץ ה-code behind.
בקובץ זה נקודד את הלוגיקה של הדף.
קוד ברירת המחדל:
 

   1:  public sealed partial class MainPage : Page

   2:  {

   3:          public MainPage()

   4:          {

   5:              this.InitializeComponent();

   6:          }

   7:  }

 
נוצרת מחלקה ששמה כשם הדף שיורשת את המחלקה Page.
במחלקה מוגדר בנאי המאתחל את רכיבי הדף באמצעות קריאה למתודת הבסיס InitilizeComponent.
המילה השמורה sealed מורה שזו מחלקה אחרונה בהיררכיה ולא ניתן לרשת אותה.
למה זה טוב? משפר ביצועים בזמן ריצה.
המילה השמורה partial מלמדת שהמחלקה MainPage מחולקת למספר קבצים.
למה זה טוב? כי זה מאפשר לכתוב את כל הקוד האוטומטי שהעורך הגרפי מוסיף בתוך מחלקה אחרת ומשאיר במחלקת ה-Code behind רק את הקוד שאנו נכתוב ובכך נקבל "נקי" וברור יותר.
נוסיף את הקוד הבא מתחת לבנאי:
 

   1:  private void btnClick_Click(object sender, RoutedEventArgs e)

   2:  {

   3:      txtDisplayData.Text = txtData.Text;

   4:  }

הרצה
בשלב זה ניתן כבר להריץ את האפליקציה שיצרנו.
תחילה נריץ על PC.
לאחר מכן נריץ על אמולטור של טלפון חכם.
לאחר מכן נוכל להריץ גם על טלפון חכם עצמו ללא אמולטור (למי שיש טלפון עם Windows 10).
לבסוף נריץ גם על Raspberry PI.
 
הרצה על PC
לחיצה על המקש F5 או באמצעות העכבר על    מריצה את האפליקציה על מחשב ה- PC המקומי:

הקלידו את שמכם ב-TextBox ולחצו על הפקד “Click Me”:

הרצה על אמולטור
לפני הרצה על אמולטור יש לבחור אמולטור:

לחיצה על החץ הימני בכפתור "Start Debugging" מאפשרת לבחור אל איזה אמולטור נריץ את האפליקציה.
ניתן כל פעם לבחור אמולטור אחר לבדיקה:

בעיה .... חלק מהמסך מהפקדים חורגים מגבולות המסך, לא אמור להיות כך.
למה לא אמור להיות כך?
משום שאם האפליקציה אמורה לרוץ על כל סוגי הפלטפורמות היא אמורה גם להתאים לכל סוגי הרזולוציה.
האם זה פתיר? ברור.
איך פותרים? 
נקדיש לכך פרק שלם בהמשך.
 
הרצה על מכשיר
יש ברשותכם טלפון חכם המריץ Windows 10?
הרווחתם, השקף הזה מיועד בשבילכם.
בחירה באפשרות "Device" תאפשר לבדוק את האפליקציה ישירות עליו:

על מנת להריץ המכשיר חייב להיות מחובר באמצעות כבל USB.
בנוסף עלינו להיות במסך ההתחלה של המכשיר.
על מנת להריץ על מכשיר יש להגדיר זאת בשני מקומות:
יש לבחור "Device" בחלון "Start Debugging".
בחלונית ה- CPU יש לבחור "ARM".

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

 
 

 הורדת המצגת
הורדת דוגמאות קוד