كيفية تلوين القوائم

السلام عليكــم ورحمـة الله وبركاتــه ،،

درس اليوم بسيط وسهل جدا لكنه مسلى بعض الشئ

سنوضح كيفية تلوين القوائم وتطبيق تأثيرات الرسم عليها بالشكل الذى نريده كما هو موضح فى الصورة

بسم الله نبدأ

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

Imports System.Drawing
Imports System.Drawing.Drawing2D

Public Class MenuRenderer
	Inherits ToolStripRenderer
'Our code goes here...
End Sub

كل ماعلينا الآن هو كتابة الكود الخاص بالرسم

توفر لنا هذه الفئة مجموعة من الطرق كل واحدة منها مسئولة عن رسم جزء معين من القائمة

أول ما سنبدأ به هو رسم شريط القائمة MenuStrip ويتم ذلك من خلال الطريقة OnRenderToolStripBackground وهى تقوم أيضا برسم خلفية العناصر داخل القائمة

سيكون الكود الخاص بها بهذا الشكل

Protected Overrides Sub OnRenderToolStripBackground(ByVal e As System.Windows.Forms.ToolStripRenderEventArgs)
		Dim br As New LinearGradientBrush(e.AffectedBounds, Color.Red, Color.Black, LinearGradientMode.Vertical)
		e.Graphics.FillRectangle(br, e.AffectedBounds)
		br.Dispose()
		MyBase.OnRenderToolStripBackground(e)
	End Sub

قمنا بتعريف فرشاة من نوع LinearGradientBrush للرسم بالتدرج اللونى وأرسلنا لها المعامل e.AffectedBounds والذى تحتوى على مستطيل يحدد الجزء الذى يتم رسمه

يمكنك اكتشاف باقى المعاملات بنفسك...

بعد ذلك قمنا بملأ المستطيل بالتدرج اللونى باستخدام الفرشاة التى قمنا بإنشاءها منذ قليل

بعد ذلك نريد أن نغير لون النص لعناصر القائمة بحيث يكون العنصر الغير محدد باللون الأبيض والعنصر المحدد باللون الأخضر

الطريقة المسئولة عن رسم نص القوائم هى OnRenderItemText لذا سنقوم بإعادة قيادتها وبرمجتها بالشكل الذى نريد

Protected Overrides Sub OnRenderItemText(ByVal e As System.Windows.Forms.ToolStripItemTextRenderEventArgs)
		If e.Item.Selected Then
			e.TextColor = Color.Lime
			e.TextFont = New Font(e.TextFont, FontStyle.Bold)
		Else
			e.TextColor = Color.White
			e.TextFont = New Font(e.TextFont, FontStyle.Regular)
		End If
		MyBase.OnRenderItemText(e)
	End Sub

أول سطر يقوم بالتأكد من حالة العنصر هل هو محدد أم لا

نقوم بتحديد لون النص عن طريق الخاصية e.TextColor ونوع الخط عن طريق الخاصية e.TextFont حسب حالة العنصر ثم نستدعى الطريقة OnRenderItemText من الفئة القاعدية حتى توفر علينا العناء وتقوم برسم النص بدلا منا

حسنا ,,

الآن نريد أن نغير خلفية العنصر المحدد فقط

يتم ذلك باستخدام الطريقة OnRenderMenuItemBackground وستكون كالتالى

Protected Overrides Sub OnRenderMenuItemBackground(ByVal e As System.Windows.Forms.ToolStripItemRenderEventArgs)
		If e.Item.Selected Then
			Dim br As New LinearGradientBrush(e.Item.ContentRectangle, Color.Purple, Color.Black, LinearGradientMode.Vertical)
			e.Graphics.DrawRectangle(Pens.Transparent, e.Item.ContentRectangle)
			e.Graphics.FillRectangle(br, e.Item.ContentRectangle)
			br.Dispose()
		End If
		MyBase.OnRenderMenuItemBackground(e)
	End Sub

أعتقد أن الكود واضح ولا يحتاج إلى شرح

الآن ,, إذا كان عندنا قائمة فرعية تحتوى على قوائم أخرى بداخلها فإن النظام يقوم برسم سهم بجوار القائمة ليخبر المستخدم أن هذه القائمة تحتوى على قوائم أخرى

سنقوم الآن بتغيير لون هذا السهم حسب حالة العنصر

Protected Overrides Sub OnRenderArrow(ByVal e As System.Windows.Forms.ToolStripArrowRenderEventArgs)
		If e.Item.Selected Then
			e.ArrowColor = Color.Red
		Else
			e.ArrowColor = Color.White
		End If
		MyBase.OnRenderArrow(e)
	End Sub

أوضح من الكود السابق :angry: :angry:

آخر شئ هو رسم الفاصل بين القوائم

من خلال الطريقة OnRenderSeparator

Protected Overrides Sub OnRenderSeparator(ByVal e As System.Windows.Forms.ToolStripSeparatorRenderEventArgs)
		ControlPaint.DrawBorder(e.Graphics, e.Item.ContentRectangle, Color.Red, ButtonBorderStyle.Dashed)
	End Sub

قمنا باستخدام الطريقة ControlPaint.DrawBorder لكى نرسم خطا مقطعا وكما هو موضح فى الكود هذه الطريقة لها 4 معاملات

1- كائن Graphics الذى سيتم استخدامه فى الرسم

2- الأبعاد التى سيتم الرسم بداخلها

3- لون الرسم

4- طريقة الرسم

بقى لنا أن نعرف كيف نشغل كل هذا الكود مع القائمة

هذا هو الكود

	Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
		Me.MenuStrip1.Renderer = New MenuRenderer
	End Sub

ملحوظة: يمكن كتابة نفس الكود السابق داخل الأحداث الخاصة بـ MenuStrip1.Renderer دون الحاجة إلى إنشاء فئة جديدة

ملحوظة: الفئة السابقة يمكن استخدامها أيضا مع أشرطة الأدوات Toolbars وأشرطة الحالة StatusBars

ملحوظة: توجد بعض الطرق الأخرى التى لم أتطرق لها مثل OnRenderButtonBackground و OnRenderImageMargin وغيرها وعليك اكتشافها بنفسك حسب احتياجاتك وحسب نوع الأداة التى ستستخدم معها هذه الفئة

المثال فى المرفقات (VS2008)

Menu_Renderer.rar