نظرة عامة على الطلاء بالألوان الصلدة و تدرجاتها

مقالة
11/01/2010

يصف هذا الموضوع كيفية استخدام SolidColorBrush, LinearGradientBrushو كائنات الفرشاة RadialGradientBrushفي دهان الألوان الخالصة و التدرجات الخطية و التدرجات الشعاعية.

يشتمل هذا الموضوع على الأقسام التالية.

تلوين مساحة ما بلون متصل
رسم منطقة بلون متدرج
تدرج خطي
التدرجات الشعاعية
تحديد توقف متدرج شفاف أو شفاف-جزئي
الرسم بالصور و الرسومات والمرئيات و الأنماط
موضوعات ذات صلة

تلوين مساحة ما بلون متصل

إحدى العمليات الأكثر شيوعاً في أي نظام أساسي هى رسم منطقة باستخدام Colorخالص. لإنجاز هذا الأمر، يوفر Windows Presentation Foundation (WPF)فئة SolidColorBrush . تصف المقاطع التالية الطرق المختلفة للرسم بواسطة SolidColorBrush.

باستخدام SolidColorBrush في "XAML"

لرسم منطقة بلون خالص في XAML استخدم أحد الخيارات التالية.

حدد فرشاة لون خالص معرّفة مسبقاً بواسطة الاسم. على سبيل المثال، يمكنك تعيين خصائص زر Background إلى "أحمر" أو "MediumBlue". للحصول على قائمة أخرى والفراشى للون خالص معرف، راجع خصائص الثابتة للفئة Brushes. فيما يلي مثال.
```

<Button Background="Red">A Button</Button>
```

اختيار لون من لوح الألوان ٣٢ بت عن طريق تحديد مقادير الأحمر ، و الأخضر ، و الأزرق ليضموا في لون خالص واحد. التنسيق لتحديد لون من لوحة الألوان ال32 بيت هو "#rrggbb"، حيث rr هو رقم سداسى عشرى مكون من خانتين يحدد كمية الأحمر النسبية، و gg يحدد كمية الأخضر، و and bb يحدد كمية الأزرق. بالإضافة إلى ذلك، يمكن تحديد اللون كـ "# aarrggbb " حيث تحدد aa قيمة ألفا أو شفافية اللون. يمكنك هذا الأسلوب إنشاء الألوان الشفافة جزئياً. في المثال التالي Background من Button تعين الى المعتم بشكل كامل- باستخدام منهج سداسي عشري.
```

<Button Background="#FFFF0000">A Button</Button>
```

استخدم خاصية بناء الجملة العلامة لتصف SolidColorBrush. بناء الجملة هذا مطوّل أكثر لكنه يتيح لك تحديد إعدادات إضافية مثل اللاشفافية الخاصة بالفرشاة. في المثال التالي خصائص Background لعنصرين Button يتم تعيينهما كمعتم بشكل كامل يتم وصف لون الفرشاة الأول باستخدام اسم اللون المعرف مسبقاً. يتم وصف لون الفرشاة الثاني باستخدام منهج سداسي عشري.
```

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>  
```

الرسم بواسطة SolidColorBrush في التعليمات البرمجية

لرسم منطقة بلون خالص في التعليمات البرمجية استخدم أحد الخيارات التالية.

استخدم إحدى الفراشى المعرّفة مسبقاً التى توفرها فئة Brushes . في المثال التالي خاصية Background الخاصة ب Buttonيتم تعيينها إلى Red.
```
Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;  
```

إنشاء SolidColorBrush وتعيين خاصية Color الخاصة به باستخدام بنية Color. يمكنك استخدام لون معرف مسبقاً من فئة Colors أو يمكنك إنشاء Color باستخدام اسلوب FromArgb الثابت.

يظهر المثال التالي كيفية تعيين خاصية Colorالخاصة ب SolidColorBrush باستخدام لون معرف مسبقاً.
```
Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;
```

FromArgbالثابتة تمكنك من تحديد الألوان ألفا و قيم الأحمر ، و الأخضر ، و الأزرق. The typical range for each of these قيم هو 0-255. For مثال, an أولي القيمة of 0 indicates that a اللون هو completely transparent, while a القيمة of 255 indicates the اللون هو completely غير شفاف. كذلك، تشير قيمة 0 إلى أن اللون ليس لديه الأحمر تماماً، بينما تشير قيمة 255 إلى أنه يحتوي الأحمر الى الحد الأقصى المحتمل. في المثال التالي، يتم وصف اللون الخاص بالفرشاة بواسطة تحديد ألفا، و قيم الأحمر، و الأخضر ، و الأزرق.

للحصول على طرق إضافية لتحديد اللون راجع الموضوع المرجعى Color.

رسم منطقة بلون متدرج

فرشاة متدرجة سترسم منطقة بألوان متعددة تختلط مع بعضها البعض بطول المحور. يمكنك استخدامها لإنشاء انطباعات الضوء و الظل، معطياً عناصر التحكم الانطباع ثلاثي الأبعاد. You can also استخدم them إلى simulate زجاج, كروم, water, و غير ذلك smooth surfaces. WPF provides الثاني أنواع of gradient brushes: LinearGradientBrush وRadialGradientBrush

تدرج خطي

LinearGradientBrush يرسم منطقة ما بتدرج معرف بمحاذاة خط ، محور التدرج . تحديد ألوان التدرج ومواقعها بطول محور التدرج باستخدام كائناتGradientStop . يمكنك أيضاً تعديل محور التدرج، مما يمكّنك من إنشاء التدرجات الأفقيو و الرأسية و عكس اتجاه التدرج. محور التدرج موضح في المقطع التالي. افتراضياً، يتم إنشاء التدرج القطري.

يظهر المثال التالي التعليمات البرمجية التي تقوم بإنشاء تدرج خطي بألوان أربعة.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

تنتج هذه التعليمات البرمجية المخرج التالي:

تدرج قطري خطي

**ملاحظة:**تستخدم الأمثلة الموجودة في هذا الموضوع نظام الإحداثيات الافتراضي لتعيين نقطة البدء و نقطة النهاية. نظام الإحداثيات الافتراضي هو نسبة الى مربع الإحاطة: يشير 0 إلى 0 في المائة من مربع الإحاطة و يشير 1 إلى 100 في المائة من مربع الإحاطة. يمكنك تغيير نظام الإحداثيات بواسطة إعداد خاصية MappingMode إلى قيمة Absolute. نظام الإحداثيات المطلق الغير نسبي لمربع إحاطة. ويتم تفسير القيم مباشرة في المساحة المحلية.

GradientStop هو كتلة الإنشاء الأساسية لفرشاة التدرج. يعيّن واقف تدرج Color في Offset بطول محور التدرج.

خاصية توقف التدرج Color تحدد لون توقف التدرج. يمكنك تعيين اللون باستخدام الألوان المعرفة مسبقاً (التى توفرها فئة Colors) أو بواسطة تحديد قيم ScRGB أو ARGB . في XAML ، يمكنك أيضاً استخدام تدوين سداسى عشري لوصف لون ما. لمزيد من المعلومات، انظر تركيبة Color.
خاصية توقف التدرج Offset تحدد موضع لون توقف التدرج على محور التدرج. The offset هو a Double that ranges من 0 إلى 1. The closer a gradient إيقاف's offset القيمة هو إلى 0, the closer the اللون هو إلى the يبدأ of the gradient. كلما اقتربت قيمة إزاحة التدرج الى 1، كلما أقترب اللون من نهاية التدرج.

يتم حساب ضمنياً اللون لكل نقطة بين علامات توقف التدرج خطياً كمجموعة من الألوان المحددة من قبل علامتي إحاطة توقف متدرجة. يقوم الشكل التوضيحي التالي بتمييز علامات التوقف المتدرجة في المثال السابق. تقوم الدوائر بوضع علامة على موضع توقف التدرج ويظهر خط متقطع محور التدرج.

توقفات متدرجة في تدرج خطي

توقف التدرج الأول يحدد اللون الأصفر في إزاحة من 0.0. توقف التدرج الثاني يحدد اللون الأحمر عند إزاحة من 0.25. النقاط بين هاتين العلامتين تتغير تدريجياً من الأصفر إلى اللون الأحمر أثناء تنقلك من اليسار إلى يمين محور التدرج. توقف التدرج الثالث يحدد اللون الأزرق في إزاحة من 0.75. النقاط بين علامتى التوقف الثانية والثالثة تتغيير تدريجياً من اللون الأحمر إلى اللون الأزرق. تحدد علامة التوقف الرابعة اللون الأخضر الليموني عند إزاحة من 1.0. النقاط بين علامتى التوقف الثالثة والرابعة تتغيير تدريجياً من الأزرق الى الأخضر الليمونى.

محور التدرج.

كما سبق ذكره ، يتم وضع علامات توقف متدرجة خاصة بالفرشاة تدرج خطي بمحاذاة خط التدرج. يمكنك تغيير اتجاه وحجم الخط باستخدام الفرشاة StartPoint و خصائص EndPoint. بواسطة معالجة StartPointالخاص بالفرشاة و EndPoint ، يمكنك إنشاءالتدرج الأفقي و الرأسى، عكس اتجاه التدرج، تكثيف انتشار التدرج ثم المزيد.

افتراضياً، فرشاة التدرج الخطي StartPoint و EndPoint نسبة الى المنطقة التى يتم تلوينها. تمثل النقطة (0,0) الزاوية اليسرى العليا من الناحية التي يتم رسمها و (1,1)الزاوية السفلية-اليمنى من الناحية التي يتم تلوينها. StartPointالافتراضي من LinearGradientBrush هو (0,0)، و ا EndPoint لافتراضية الخاصة به هو (1,1) الذي يقوم بإنشاء تدرج قطري بدءاً من الزاوية العلوية اليسرى وامتداده الى الركن الأيمن السفلي من الناحية التى يتم تلوينها. يبين الرسم التوضيحي التالي محور تدرج الفرشاة تدرج خطي ب StartPointافتراضي و EndPoint.

محور متدرج لتدرج قطري خطي

يوضح المثال التالي كيفية إنشاء تدرج أفقي بتحديد StartPoint الخاص بالفرشاة و EndPoint. لاحظ أن علامات توقف التدرج هي نفسها كما في الأمثلة; بتغيير في StartPoint و ببساطة EndPoint ، تم تغيير التدرج من قطري إلى أفقي.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

            Rectangle horizontalFillRectangle = new Rectangle();
            horizontalFillRectangle.Width = 200;
            horizontalFillRectangle.Height = 100;

            // Create a horizontal linear gradient with four stops.   
            LinearGradientBrush myHorizontalGradient =
                new LinearGradientBrush();
            myHorizontalGradient.StartPoint = new Point(0,0.5);
            myHorizontalGradient.EndPoint = new Point(1,0.5);
            myHorizontalGradient.GradientStops.Add(
                new GradientStop(Colors.Yellow, 0.0));
            myHorizontalGradient.GradientStops.Add(
                new GradientStop(Colors.Red, 0.25));                
            myHorizontalGradient.GradientStops.Add(
                new GradientStop(Colors.Blue, 0.75));        
            myHorizontalGradient.GradientStops.Add(
                new GradientStop(Colors.LimeGreen, 1.0));

            // Use the brush to paint the rectangle.
            horizontalFillRectangle.Fill = myHorizontalGradient;

يبين الرسم التوضيحي التالي التدرج الذي يتم إنشاؤه. يتم تمييز محور التدرج بخط متقطع مع علامات الدوائر على نقاط توقف التدرج .

محور متدرج لتدرج قطري أفقي

يوضح المثال التالي كيفية إنشاء تدرج عمودي.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

محور متدرج لتدرج عمودي

التدرجات الشعاعية

مثل LinearGradientBrush ، RadialGradientBrush يرسم منطقة بألوان تدمج معاً بطول المحور. أوضحت لنا الأمثلة السابقة أن محور التدرج الخاص بالفرشاة هو خط مستقيم. يتم تعريف محور لمتدرجة شعاعية خاص بالفرشاة بواسطة دائرة; ألوانها "تشع" إلى الخارج من نقطة الأصل.

في المثال التالي، يتم استخدام فرشاة متدرجة شعاعية للرسم داخل المستطيل.

    <!-- This rectangle is painted with a diagonal linear gradient. -->
    <Rectangle Width="200" Height="100">
      <Rectangle.Fill>
        <RadialGradientBrush 
          GradientOrigin="0.5,0.5" Center="0.5,0.5" 
          RadiusX="0.5" RadiusY="0.5">
          <GradientStop Color="Yellow" Offset="0" />
          <GradientStop Color="Red" Offset="0.25" />
          <GradientStop Color="Blue" Offset="0.75" />
          <GradientStop Color="LimeGreen" Offset="1" />
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

يبين الرسم التوضيحي التالي التدرج الذي تم إنشائه بواسطة المثال السابق. يتم تمييز علامات توقف التدرج. لاحظ أنه حتى ولو كانت النتائج مختلفة، تكون علامات التوقف المتدرجة في هذا المثال مماثلة لعلامات توقف التدرج في أمثلة فرشاة التدرج الخطي.

توقفات متدرجة في تدرج شعاعي

GradientOrigin تعين نقطة بدء فرشاة التدرج الشعاعي الخاص بوحور تدرج الفرشاة. يشع محور التدرج من نقطة الأصل إلى دائرة التدرج. تعرف دائرة تدرج الخاصة بالفرشاة بواسطة Center ، RadiusX الخاصة بها، و خصائص RadiusY .

يبين الرسم التوضيحي التالي عدة تدرجات إشعاعية ب GradientOrigin ، Center ، RadiusXمختلفة ، و إعدادات RadiusY .

RadialGradientBrushes باستخدام إعدادات GradientOrigin و مركز RadiusX و RadiusY مختلفة.

إعدادات RadialGradientBrush

تحديد توقف متدرج شفاف أو شفاف-جزئي

لأن علامات توقف التدرج لا توفر خاصية التعتيم، يجب عليك تعيين قناة ألفا من الألوان باستخدام ARGB تدوين سداسى عشري في العلامات أو استخدام أسلوب Color.FromScRgb لإنشاء علامات توقف متدرجة شفافة أو شفافة جزئياً. تشرح المقاطع التالية كيفية إنشاء علامات توقف متدرجة شفافة جزئياً في XAML و التعليمات البرمجية. للحصول على معلومات حول إعداد تعتيم الفرشاة بالكامل راجع مقطع تعيين تعتيم الفرشاة .

تحديد لون معدل الشفافية في "XAML"

في XAML، يمكنك استخدام ARGBتدوين ست عشري إلى تعيين معدل الشفافية ألوان فردية. ARGBمنهج سداسي عشري باستخدام بناء الجملة التالي:

#aarrggbb

يمثل aa في السطر السابق قيمة رقمين من التدوين السداسى العشري تستخدم لتعيين شفافية اللون. rr , gg و bb كل منهم يمثل قيمة رقمين من التدوين السداسى العشري تستخدم لتحديد مقدار الأحمر ،و الأخضر , و الأزرق في اللون. قد يكون كل رقم ست عشري القيمة من 0-9 أو من A-F. 0 الأصغر القيمة، هو أعظم و F. قيمة ألفا 00 تعين لون شفاف تماماً ، بينما ألفا FF تنشئ لون معتم كلياً. في المثال التالي تدوين ARGB السداسى العشري يُستخدم لتحديد لونين. الأولى شفاف جزئياً (يحتوي alpha بقيمة 20 x) ، بينما يكون الثاني غير شفاف تماماً.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

تحديد لون معدل الشفافية في التعليمات البرمجية.

عند استخدام التعليمات البرمجية، أسلوب FromArgb الثابت بمكنك من تحديد قيمة ألفا عند إنشاء لون. يستخدم الأسلوب أربعة معلمات من النوع Byte. تعيّن المعلمة الأولى قناة ألفا للون; المعلمات الثلاث الأخرى تحدد قيم الأحمر و الأخضر و الأزرق للون. يجب أن تكون كل قيمة بين 0 و 255 ضمناً. قيمة ألفا 0 تعين لون شفاف تماماً ، بينما ألفا 255 تعين لون معتم كلياً. في المثال التالي، يستخدم أسلوب FromArgb لإنتاج لونين. اللون الأول شفاف جزئياً (له قيمة ألفا من 32) ، بينما الثاني معتم كلياً.

            LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

            // This gradient stop is partially transparent.
            myLinearGradientBrush.GradientStops.Add(
                new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

            // This gradient stop is fully opaque. 
            myLinearGradientBrush.GradientStops.Add(
                new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

            Rectangle myRectangle = new Rectangle();
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = myLinearGradientBrush;

بدلاً من ذلك، يمكنك استخدام أسلوب FromScRgb الذي يتيح لك استخدام قيم ScRGB لإنشاء لون ما.

الرسم بالصور و الرسومات والمرئيات و الأنماط

ImageBrush ،DrawingBrush ، و تمكنك فئاتVisualBrush من رسم منطقة بالصور أو الرسومات أو المرئيات. للحصول على معلومات حول الرسم بالصور، و الرسومات، والنقوش ، راجع رسم صور و رسومات و صور.