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

בפרק זה נדבר על מספר סוגים של מברשות (Brush) שקיימות ב Silverlight.

מה זה Brush?

Brush הוא אובייקט שיודע לצבוע שטחים בכל גודל, בדומה למברשת פיזית שיכולה לצבוע קיר בכל גודל. ישנם תכונות רבות שהטיפוס שלהם הוא Brush וניתן להציב בהם איזשהו אובייקט מברשת שנגדיר. תכונות נפוצות מסוג Brush הן: Background ו Foreground של פקדים, Stroke ו Fill של צורות ועוד.

המברשת SolidColorBrush

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

<Rectangle Width="200"
            Height="100"
            Fill="Red" />

נוצר לנו אובייקט מאחורי הקלעים מטיפוס SolidColorBrush.

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

<Rectangle Width="200"
            Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

כמובן שאין סיבה לבחור בדרך הארוכה אם הדרך הקצרה עובדת.

התוצאה בכל מקרה תהיה זהה:

המברשת LinearGradientBrush

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

לדוגמא, הקוד הבא מגדיר מברשת בעלת שלושה צבעים. המברשת מתחילה בצבע אדום, הצבע מתחלף בהדרגה עד שבאמצע הדרך (50%) מגיע לכחול וכך ממשיך עד שבסופה (100%) נהיה ירוק.

<Rectangle Width="200"
            Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Offset="0"
                    Color="Red" />
      <GradientStop Offset="0.5"
                    Color="Blue" />
      <GradientStop Offset="1"
                    Color="Green" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

התוצאה:

נעיר כי השינוי בצבע בדוגמא הזו נעשה מהפינה השמאלית עליונה עד הנקודה הימנית תחתונה. ניתן לשלוט בכיוון השינוי ע"י התכונות StartPoint, EndPoint.

המברשת RadialGradientBrush

המברשת RadialGradientBrush היא למעשה מאוד דומה למברשת LinearGradientBrush. גם למברשת זו יש תחנות בעלות צבע ואחוזים, ההבדל המרכזי הוא שבמברשת זו נקודת ההתחלה היא ממרכז השטח כלי חוץ, בצורה מעגלית, במקום בקווים ישרים.

להלן דוגמא לשימוש במברשת זו:

<Rectangle Width="200"
            Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush>
      <GradientStop Offset="0"
                    Color="Red" />
      <GradientStop Offset="0.5"
                    Color="Blue" />
      <GradientStop Offset="1"
                    Color="Green" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

התוצאה: