תכנות אסינכרוני, תקשורת ופיתוח אפליקציות ל- Windows 8.1 ואפליקציות ל- Windows Phone 8

1. תכנות אסינכרוני, תקשורת ופיתוח אפליקציות ל-Windows 8.1 ואפליקציות ל-Windows Phone 8 Graphics And Animation

2. Graphics And Animation Understanding Graphical Rendering Services Shapes Brushes Transformations Drawings and Geometries Animation

3. Understanding Graphical Rendering Services • פרק זה עוסק ביכולות בגרפיות של WPF. • WPF מציגה תשתית מקיפה, ניתנת להרחבה, ובעלת גמישות רבה של יכולות גרפיות. • יתרונות WPF בגרפיקה: • device-independent pixel – אין תלות בחומרה - יחידה בסיסית של מדידה היא "פיקסל עצמאי" או פיקסל "לוגי" שגודלו 1/96 אינצ' ללא קשר לרזולוציית המסך בפועל, כל פיקסל מותאם ליחידות ה- DPI (Dots Per Inch ) של המערכת (פיקסל פיזי). • double-precision floating-point – מערכת הקואורדינטות נמדדת באמצעות הטיפוס Double ולא Int ולכן מקבלים דיוק הרבה יותר גבוה (תכונה הנתמכת על ידי כרטיסי המסך החדישים). • תמיכה ב- scRGB - שימושי ביותר באלגוריתמים לעיבוד תמונה, בשימושיים מדעיים ורפואיים. • גרפיקה מתקדמת ותמיכה באנימציה, ניהול סצנות אנימציה, עיבוד תמונה, ועוד... • האצת חומרה - WPF מנצלת חומרה גרפית כדי לצמצם את השימוש במעבד.

4. Understanding Graphical Rendering Services • WPF מספקת שלוש גישות שונות לעיבוד גרפי: • Shapes – ב- WPF מוגר מרחב השמותSystem.Windows.Shapes אשר מגדיר מספר קטן של מחלקות לעיבוד אובייקטים גיאומטריים דו ממדיים (מלבן, אליפסה, פוליגון, קו וכו '). מחלקות אלו הן פשוטות וקלות מאוד לשימוש • Drawing and Geometries- עיבוד אובייקטים גראפיים באמצעות מחלקות נגזרות של המחלקה המופשטת System.Windows.Media.Drawing .על ידי שימוש במחלקות כגון GeometryDrawing או ImageDrawing ניתן לעבד נתונים גרפיים בשיטה שהיא לא עשירה כל כך ביכולות אולם חסכונית במשאבים. • Visuals- השיטה המהירה והקלה ביותר לעיבוד מידע גרפי ב-WPF על ידי שימוש במחלקות היורשות את המחלקה System.Windows.Media.Visual. אין תמיכה ב- XAML. • ההבדל בין הגישות הוא בשלושה ממדים: פשטות הפיתוח, שימוש בזיכרון וביצועים. • באפליקציה גראפית מבוססת WPF יכולים להתקיים אלפי אובייקטים גראפיים ולכן לבחירת השיטה יש השפעה ניכרת. • ישנם מיקרים שבאותה אפליקציה נשתמש בשלושת הגישות מקביל.

5. Understanding Graphical Rendering Services לדוגמה: • Drawings and Geometries יותר נוחים לתכנות מודלים וקטוריים, אבל דורשים יותר קוד על מנת לתכנת אינטראקטיביות עם המשתמש. • Visual – מאוד נוח ומהיר כאשר זקוקים לצייר כמות גדולה מאוד של נתונים.

6. Shapes • השיטה הפשוטה ביותר לצייר אלמנטים דו ממדיים, בשל פשטותה מכונה גם drawing primitives. • משתמשים בה במחלקות פשוטות המייצגות מלבנים, אליפסות, קווים, פוליגונים היורשות את המחלקה הבסיסית Shape . • מספר קטן של מחלקות נגזרות.

7. Shapes מחלקת הבסיס של כל המחלקות שיש להם אספקטים ויזאליים (פקדים למשל, אובייקטים גראפיים, רכיבי Layout), מגדיר, בין השאר, את "מנוע הציור" (Rendering), איפשור לכידת אירועי עכבר (hit testing), גבולות הפקד (Bounding) ... מוגדרת במרחב השמות System.Threading, כל המחלקות היורשות ממנה הם STA – Single Thread Apartment. המחלקות היורשות אותה יכולות להתקיים רק ב- thread שבה הם נוצרו ולכן הם Thread Unsafe. מחלקת חובה עבור תמיכה ב- dependency properties. סוג שונה ומתוחכם של מאפיינים (שהוא לא בדיוק מאפיין אמיתי) שימושי במיוחד בהגדרות Style, Change Notification, Data Bindingוכו'.משפר ביצועים ומאפשר הוספת פונקציונאליות תוך חיסכון במשאבים. הוספת תמיכה ביכולות בסיסיות של אלמנטים ויזואליים ללכוד או להעלות אירועים, הפצת האירוע לגורמים נוספים (Routed Event), הגדרות Layout של הפקד, והגדרת פוקוס. מחלקת הבסיס של כל הצורות הגיאומטריות מרחיב ומשכלל את היכולות של UIElement, מסויף תמיכה בסגנונות, tooltips, אנימציה, יכולות נוספות של Data Binding .....

8. Shapes Rectangles And Ellipse דוגמת קוד: RectangleAndEllipse

9. Shapes Rectangles And Ellipse דוגמת קוד: RectangleAndEllipseInCode

10. Shapes ViewBox מאפשר לאלמנטים גרפיים לשנות את גודלם ביחס לשינוי גודל החלון בו הם מוצבים ולשמור על קנה מידה ביניהם. דוגמת קוד: ViewBoxSample

11. Shapes Line and Polyline דוגמת קוד: LineAndPolyline

12. Shapes Polygone דוגמת קוד: PolygoneSample

13. Brushes • "מברשות" משמשות למילוי שטחים או קוים (background, foreground, border, fill ,stroke) • שינוי "מברשת" גורם לצביעה אוטומטית של הצורה (אירוע מודיע לצורה על השינוי) • מברשות תומכות בשקיפות (Transparency) או בשקיפות חלקית (Partial Transparency). • במרחב השמות System.Windows.Media מוגדרת מחלקת הבסיס של כל המברשות, המחלקה Brush. • במחלקהSystemBrushes מוגדרות אוסף של מברשות סטנדרטיות מוכנות לשימוש. • ישנם 7 סוגי מברשות שונים, כל מברשת מציגה Pattern אחר,בשלב זה רלבנטיים עבורנו 4 בלבד.

14. Brushes מברשות נוספות:DrawingBrush, VisualBrush, BitmapCacheBrush

15. Brushes צבעים • מברשות מתבססות על צבעים (ברובם), צבעים מוגדרים באמצעות המבנה Color המוגדר במרחב השמות System.Windows.Media. • ב-Color מוגדרות מספר מתודות סטאטיות מעניינות: לדוגמה: Color color = Color.FromRgb(200, 13, 75);

16. Brushes • המחלקה Colors מכילה פלטת צבעים מוכנה המכילה כמה מאות צבעים: • המחלקה SystemColors מכילה פלטת צבעים המורכבת מצבעי המערכת:

17. Brushes SolidColorBrush • הגדרת מברשת על ידי בחירת צבע מוכן: Rect.Fill = new SolidColorBrush(Colors.AliceBlue); • הגדרת מברשת המתבססת על צבע מערכת: Rect.Fill= SystemColors.ControlBrush; • קביעת מברשת על בסיס שלושת צבעי RGB: • ב- XAML: int red = 10; int green = 145; int blue = 35; Rect.Fill = new SolidColorBrush(Color.FromRgb(red, green, blue)); <Rectangle Name="rect" Width="200" Height="200" Fill="Blue"></Rectangle> <Rectangle Name="rect" Width="200" Height="200" Fill="#FF2B44"></Rectangle>

18. Brushes LinearGradientBrush בקוד:

19. Brushes LinearGradientBrush ב-XAML

20. Brushes RadialGradientBrush בקוד

21. Brushes RadialGradientBrush ב-XAML

22. Brushes טעינת התמונה מהמשאבים של התוכנית ImageBrush בקוד: מתיחת התמונה סידור ה-"אריח" הגדרת המיקום של האריח

23. Brushes ImageBrush ב-XAML:

24. Transformations • Transformation – שינוי צורה, מאפשר לשנות את הדרך בה מצויר האובייקט הגראפי על ידי שינוי מערכת הקואורדינטות הקשורות לאובייקט ובאמצעות מספר מחלקות מוכנות. • מחלקת הבסיס של כל מחלקות ה- Tranformation היא המחלקה Transform המוגדרת במרחב השמות System.Windows.Media. המחלקה TranslateTransform • מאפשר לבצע הסטה של האובייקט הגראפי/פקד ממקומו המקורי. • מגדירים את גודל ההסטה באמצעות X,Y. המיקום המקורי המיקום החדש לאחר ההזחה

25. Transformations TranslateTransform - XAML: בקוד: הזזת המלבן הזזת המלבן

26. Transformations RotateTransform מאפשר לסובב אובייקט גראפי/פקד. מגדירים את מיקום ציר הסיבוב באמצעות X,Y ואת זווית הסיבוב באמצעות Angle. XAML: קוד: סיבוב המלבן סיבוב המלבן

27. Transformations ScaleTransform הגדלת או הקטנת אובייקט גראפי/פקד, מאפשר להגדיל ע"פ קנה מידה, למתוח או לכווץ. מיקום האובייקט לאחר ההגדלה/הקטנה על ידי X,Y. סדר גודל הקטנה/הגדלה על ידי ScaleX, ScaleY – הערך 1 מייצג 100%. XAML: הגדלת המלבן

28. Transformations Code: הגדלת המלבן

29. Transformations SkewTransform • עיקום, עיוות, פיתול; • שיפוע, לכסון, עיקום. • מייצר אילוזיה של 3D.

30. Drawings and Geometries • עד כה ראינו ביכולות הפשוטות של ציור 2D. • על מנת ליצור סצנות 2D עשירות ומורכבות יותר עם תמיכה בגרפיקה וקטורית. • המחלקה Path יורשת את המחלקה Shape (כמו כל הצורות שראינו עד כה). • המחלקה Path היא קונטיינר של צורות פשוטות ומורכבות. • למחלקה Path מאפיין חשוב בשם Data , המאפיין מכיל את אובייקט יחיד ממחלקה היורשת את המחלקה Geometry: • RectangleGeometry • EllipseGeometry • PathGeometry • CombinedGeometry • LineGeometry • GeometryGroup

31. Drawings and Geometries Simple Geometry דוגמת קוד: 01PathSample

32. Drawings and Geometries Geometry Group דוגמת קוד: 01PathSample

33. Drawings and Geometries Combined Geometry דוגמת קוד: 01PathSample

34. Animation • באמצעות אנימציה נוכל לייצר ממשק משתמש דינאמי. • שימושי מאוד במשחקים, אולם גם במערכות מידע. • שני סוגים של מנגנוני אנימציה: • Timer Based Animation • Property Based Animation

35. Timer Based Animation • דומה מאוד למנגנון האנימציה מבוסס טיימר כפי שהיה מקובל ב- Windows Forms. • מנגנון המתבסס על המחלקה DispatcherTimer שמוגדרת במרחב השמות System.Windows.Threading. הגדרת אובייקט Timer הגדרת פרק זמן טיפול באירוע אקטיבציה של הטיימר

36. Property Based Animation • מודל המאפשר לך להתמקד בהגדרת האנימציות מבלי לדאוג לדרך שבה הם יבוצעו. • מתמקד במה ישתנה ולא באיך ישתנה. • כל רכיב אנימציה משפיע על מאפיין אחד בלבד. • חייבים להתאים את רכיב האנימציה לטיפוס של המאפיין שרוצים לשנות. • מרחב השמות System.Windows.Media.Animation מכיל אוסף מחלקות אנימציה מבוססות מאפיינים, נותנות מענה כמעט לכל הטיפוסים עליהם נרצה לבצע אנימציה.

37. Property Based Animation • DoubleAnimation – אנימציה למאפיינים שהם מטיפוס Double: Width, Height, Opacity ......

38. Property Based Animation • ColorAnimation – אנימציה למאפיינים שמבוססים על צבע:

39. Property Based Animation • אנימציה כפולה (מתבצעת בו בעת):

40. Property Based Animation Storyboard מאפשר לרכז מספר פעולות אנימציה. מאפשר לשלוט על ה- Playback של האנימציה. מאפשר להגדיר אנימציה ב-XAML על ידי Trigger.

41. Property Based Animation הגדרת Storyboard אנימציה ראשונה Storyboard הגדרת אובייקט יעד הגדרת מאפיין יעד אנימציה שניה

42. Property Based Animation Storyboard With XAML

43. את הסילבוס, חומרים, מצגות ניתן להוריד ב: www.corner.co.il