וובמאסטר - תיכנות ובניית אתרים

מדריך WPF – שימוש ב Shapes

arikp ,‏ מכללת סלע‏ ‏/‏ 28 יולי, 2011
F+
F-

בפרק זה נחזור לדבר על נושאים קצת יותר גרפיים. אחרי הכול, .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"
/>

 

והתוצאה:

מדריך WPF – שימוש ב Shapes

 

הפקד Ellipse

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

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

<Ellipse Width="50"
         Height="50"
         Stroke="Black"
         StrokeThickness="4"
/>

והתוצאה:

מדריך WPF – שימוש ב Shapes

 

הפקד Line

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

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

<Line X1="10"
     Y1="10"
     X2="50"
     Y2="50"
     Stroke="Black"
     StrokeThickness="4"
/>

והתוצאה:

מדריך WPF – שימוש ב Shapes

 

הפקד Polyline

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

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

<Polyline Points="10,110 60,10 110,110"
         Stroke="Black"
         StrokeThickness="4"
/>

והתוצאה:

מדריך WPF – שימוש ב Shapes

 

הפקד Polygon

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

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

<Polygon Points="10,110 60,10 110,110"
         Stroke="Black"
         StrokeThickness="4"
/>

והתוצאה:

מדריך WPF – שימוש ב Shapes

 

הפקד Path

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

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

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

והתוצאה:

מדריך WPF – שימוש ב Shapes

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות