مرحباً بكم متابعي وزوار مدونة ايڪو الكرام في هذا الشرح المحدث والعميق المخصص لـ قسم البرمجيات والتطوير.
يعد تصميم واجهة المستخدم (User Interface - UI) من أهم العوامل التي تمنح البرامج والتطبيقات طابعاً احترافياً وجذاباً. عند العمل على بيئة Microsoft Visual Studio، نلاحظ أن الواجهات الافتراضية للنوافذ والأزرار قد تبدو تقليدية، ولكن لحسن الحظ يتيح البرنامج إمكانية تركيب ثيمات ومكونات مخصصة (Custom Themes & Controls) لتجميل الواجهة بالكامل.
في هذا الدليل المحدث عبر مدونة ايڪو، وفرنا لكم مجموعة ممتازة تضم 10 ثيمات وأكواد واجهات جاهزة يمكنك استخدامها مباشرة داخل مشاريعكم للارتقاء بجمالية تطبيقاتكم لتبدو بمظهر عصري فريد.
أولاً: ما أهمية تركيب الثيمات المخصصة في Visual Studio؟
تمنح الثيمات المخصصة المطورين مرونة عالية في التحكم بالشكل العام للتطبيق دون الحاجة إلى إعادة برمجة الرسومات من الصفر. ومن أبرز الفوائد:
- إعطاء مظهر احترافي: تحويل تصميم Windows Forms التقليدي إلى واجهة مودرن جذابة.
- توفير الوقت والجهد: الحصول على أدوات جاهزة مثل الأزرار، حقول النصوص، وشريط العنوان المصمم مسبقاً.
- مرونة التخصيص: سهولة التعديل على الألوان والخطوط داخل كود الثيم نفسه.
- دعم لغات برمجة متعددة: تعمل الثيمات بسلاسة مع مشاريع Visual Basic (VB.NET) و C#.
ثانياً: فيديو الشرح والتطبيق العملي
لمتابعة الخطوات عملياً بالتفصيل وخطوة بخطوة، يمكنك مشاهدة الشرح المحدث الذي أعددناه لكم عبر القناة الرسمية للمدونة:
ثالثاً: مكتبة 10 ثيمات جاهزة للنسخ والاستخدام المباشر
اختر الثيم الذي يناسب مشروعك واضغط على زر **نسخ الكود** لإضافته إلى مشروعك فوراً:
Imports System.Drawing
Imports System.Windows.Forms
Public Class EkoNeonButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 0
Me.BackColor = Color.FromArgb(30, 30, 45)
Me.ForeColor = Color.Cyan
Me.Font = New Font("Segoe UI", 10, FontStyle.Bold)
Me.Cursor = Cursors.Hand
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(0, 180, 216)
Me.ForeColor = Color.White
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(30, 30, 45)
Me.ForeColor = Color.Cyan
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class EkoFlatButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 0
Me.BackColor = Color.FromArgb(52, 152, 219)
Me.ForeColor = Color.White
Me.Font = New Font("Tahoma", 9.5F, FontStyle.Bold)
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(41, 128, 185)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(52, 152, 219)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class CyberButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderColor = Color.Yellow
Me.FlatAppearance.BorderSize = 2
Me.BackColor = Color.Black
Me.ForeColor = Color.Yellow
Me.Font = New Font("Consolas", 10, FontStyle.Bold)
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.Yellow
Me.ForeColor = Color.Black
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.Black
Me.ForeColor = Color.Yellow
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class MaterialEmeraldButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 0
Me.BackColor = Color.FromArgb(46, 204, 113)
Me.ForeColor = Color.White
Me.Font = New Font("Segoe UI Semibold", 9.75F)
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(39, 174, 96)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(46, 204, 113)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class GlassButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderColor = Color.FromArgb(200, 255, 255, 255)
Me.FlatAppearance.BorderSize = 1
Me.BackColor = Color.FromArgb(50, 255, 255, 255)
Me.ForeColor = Color.White
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(100, 255, 255, 255)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(50, 255, 255, 255)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class CleanLightButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderColor = Color.FromArgb(180, 180, 180)
Me.FlatAppearance.BorderSize = 1
Me.BackColor = Color.FromArgb(245, 245, 247)
Me.ForeColor = Color.FromArgb(30, 30, 30)
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(230, 230, 235)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(245, 245, 247)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class DeepPurpleButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 0
Me.BackColor = Color.FromArgb(103, 58, 183)
Me.ForeColor = Color.White
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(126, 87, 194)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(103, 58, 183)
End Sub
End Class
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
Public Class RoundedButton
Inherits Button
Protected Overrides Sub OnPaint(ByVal pevent As PaintEventArgs)
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, Me.Width, Me.Height)
Me.Region = New Region(path)
MyBase.OnPaint(pevent)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class SunsetButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 0
Me.BackColor = Color.FromArgb(231, 76, 60)
Me.ForeColor = Color.White
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(192, 57, 43)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(231, 76, 60)
End Sub
End Class
Imports System.Drawing
Imports System.Windows.Forms
Public Class CorporateBlueButton
Inherits Button
Public Sub New()
Me.FlatStyle = FlatStyle.Flat
Me.FlatAppearance.BorderSize = 1
Me.FlatAppearance.BorderColor = Color.FromArgb(41, 128, 185)
Me.BackColor = Color.FromArgb(24, 43, 73)
Me.ForeColor = Color.FromArgb(236, 240, 241)
End Sub
Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
MyBase.OnMouseEnter(e)
Me.BackColor = Color.FromArgb(41, 128, 185)
End Sub
Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
MyBase.OnMouseLeave(e)
Me.BackColor = Color.FromArgb(24, 43, 73)
End Sub
End Class
رابعاً: خطوات تركيب الثيم وتطبيقه على مشروعك
- إضافة ملف الكود للمشروع: افتح مشروعك في Visual Studio، اضغط بزر الفأرة الأيمن على اسم المشروع اختر Add ثم Class واعتمد أي كود من الأكواد أعلاه.
- عمل إعادة بناء للمشروع (Build Solution): توجه إلى قائمة Build وانقر على Build Solution ليقوم Visual Studio بفك وتوليد عناصر الثيم في شريط الأدوات.
- استخدام الأدوات من الـ Toolbox: افتح نافذة Toolbox وستلاحظ ظهور العنصر المخصص المضاف حديثاً.
- تطبيق الثيم على النموذج (Form): قم بسحب الزر أو العنصر المخصص وإسقاطه داخل Form1 ليظهر فوراً التصميم الجديد.
خامساً: أفكار وتطبيقات تقنية موصى بها في مدونة ايڪو
- للتحكم عن بعد أثناء البرمجة والاختبار، اقرأ عن برنامج AnyDesk للتحكم في الأجهزة عن بعد.
- لإدارة أكثر من بيئة وتطبيق أثناء التطبيق والاختبار، راجع دليلنا عن تطبيق Parallel Space لتكرار التطبيقات بدون روت.
- لحماية حاسوبك ومشاريعك أثناء تحميل المكونات البرمجية، اقرأ تحذيرنا المهم حول ثغرة الكود الخبيث وكيفية الحماية منها.
- لحماية حسابات ومطوري التطبيقات من اختراق البيانات، اطلع على علامات اختراق الهاتف وكيفية المعالجة.
- لإنشاء حسابات تجريبية بأمان أثناء البرمجة، راجع طريقة استخدام بريد مؤقت لحماية الخصوصية.
- وللتفاعل والترفيه أثناء أوقات الاستراحة من البرمجة، ننصحك بزيارة منصة ألعاب فلاش واي للألعاب الخفيفة.
📌 للمزيد حول الوثائق البرمجية الرسمية لمطوري Visual Studio، يمكنك الاطلاع على Microsoft Visual Studio Documentation 📲.

التعليقات