מדריך Windows Phone

מדריך Windows Phone – שימוש ב Shapes

‏ • Sela

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

ישנם מספר מחלקות צורות מסוגים שונים, לדוגמא: Rectangle, Ellipse ועוד. ההבדל בין המחלקות השונות הוא סוג הצורה שהן מציירות. בנוסף, ישנם מספר תכונות שמשותפות כמעט לכל הצורות, כגון Fill, Stroke ו StrokeThickness.

הפקד Rectangle

הפקד Rectangle משמש לציור מרובע. לשם קביעת האורך והרוחב של המרובע יש להשתמש בתכונות Width ו Height. צבע הפנים של המקובע נעשה ע"י שימוש בתכונה Fill, ואילו צוות המסגרת נעשה ע"י שימוש בתכונה Stroke. בנוסף, ניתן לשלוט בעובי המסגרת באמצעות התכונה StokeThickness.

להלן דוגמא לציור מרובע:

<Rectangle Width="100"
Height="50"
Fill="Red"
Stroke="Blue"
StrokeThickness="5"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

הפקד Ellipse

הפקד Ellipse משמש לציור אליפסה. ממדי האליפסה נקבעים לפי גודל המלבן החוסם אותה, לכן נעשה שימוש ב Height ו Width. כדי לקבל עיגול מושלם נקבע את ערך ה Height להיות שווה לערך ה Width. בנוסף מילוי האליפסה נעשה באמצעות התכונה Fill והמסגרת באמצעות התכונה Stoke.

להלן דוגמא לציור עיגול:

  <Ellipse
   Width="150"
   Height="150"
   Stroke="White"
   StrokeThickness="8"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

הפקד Line

הפקד Line משמש לציור קו בודד. הקו נקבע לפי שתי נקודות אשר נקבעות באמצעות התכונות X1, Y1 ו X2, Y2. צבע ועובי הקו נקבעים בעזרת התכונות Stoke ו StokeThickness בהתאמה. לקו אין צבע פנים.

להלן דוגמא לציור קו:

  <Line
   X1="10"
   Y1="10"
   X2="150"
   Y2="150"
   Stroke="White"
   StrokeThickness="8"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

הפקד Polyline

הפקד Polyline מאפשר לצייר קו שבור שאינו סגור. הדרך להגדיר את הקו היא ע"י הגדרת מערך של נקודות באמצעות התכונה Points. הקו יעבור בין הנקודות השונות לפי הסדר.

להלן דוגמא לציור קו שבור:

  <Polyline
   Points="10,200 160,10 210,210"
   Stroke="White"
   StrokeThickness="8"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

הפקד Polygon

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

להלן דוגמא לציור קו שבור סגור:

  <Polygon
   Points="10,200 160,10 210,210"
   Stroke="White"
   StrokeThickness="8"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

הפקד Path

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

להלן דוגמא לציור קו עקום באמצעות Path:

  <Path
   Data="M10,100 C 100,0 200,200 300,100 z"
   Fill="#CCCCFF"
   Stroke="Red"
   StrokeThickness="4"
/>

והתוצאה:

מדריך Windows Phone – שימוש ב Shapes

תגיות: , , , ,

arikp

אריק פוזננסקי הוא יועץ בכיר ומרצה בסלע. הוא השלים שני תארי B.Sc. במתמטיקה ומדעי המחשב בהצטיינות יתרה בטכניון. לאריק ידע נרחב בטכנולוגיות מיקרוסופט, כולל .NET עם C#, WPF, Silverlight, WinForms, Interop, COM/ATL, C++ Win32 ו reverse engineering.

תגובות בפייסבוק