اللغه المستخدمه: الفيجوال بيسك
التطبيق: فيجوال ستوديو 2005 و 2008
المستوي: المبتدئين
اعداد: مهندس / عمر أمين إبراهيم
------------------------------------------
لتغيير شكل الفورم تماما والتخلص من الشكل التقليدي المعتاد مع برنامج فيجوال استوديو فان ذلك يتم باستخدام خاصية +GDI
الطريقة الأولي:
استخدام الصور التي تم تصميمها علي سبيل المثال بأحد برامج الجرافيك علي سبيل المثال Ulead PhotoImpact أو أي برنامج جرا فيك أخر مناسب.
الخطوات:
نقوم بتصميم الصورة المطلوبة مهما كان شكلها مثلا صورة طائره أو صورة إنسان ألي أو صورة شجره الي أخره من الصور المختلفة ويجب أن يراعي أن تكون خلفية الصورة أو اللون المستخدم في خلفية الصورة معروف لنا بالاضافه الي أبعاد الصورة (الطول و العرض) ويمكن تسجيل هذه التفاصيل في ورقه منفصلة مؤقتا حتى لا ننساها ويراعي أيضا أن تكون الصورة ليست مضغوطة أثناء تصميمها. عموما إن هذا النوع من التصميمات يحتاج الي رسام محترف أو مبرمج يجيد استخدام برامج الرسم باحترافية بحيث انه يستطيع التعامل مع الألوان والخلفيات بشكل جيد. عزيزي لا تخاف حتى لو كنت مصمم جرا فيك عادي وغير محترف فسوف تستطيع إخراج صوره بشكل جيد ومناسب. أيضا من الممكن تقسيم صورة الخلفية الي أكثر من جزء وهذا النوع من التصميم الجرافيك يتيح لنا أن نتحكم أكثر في الصورة بدقه واحترافية عاليه.
سوف نبدأ هنا بعرض مثال بسيط لتغيير شكل الفورم تماما و بشكل سريع جدا ولعمل ذلك نتبع الأتي:-
1- إنشاء مشروع جديد ونطلق عليه أي اسم نريد.
2- ثم نقوم بحفظ البرنامج بالطريقة المعتادة.
3- بعد ذلك نفتح الفورم في مرحلة Design وليس في مرحلة الكتابة.
4 - من نافذة Properties نقوم بتغيير بعض صفات الفورم وهي بالترتيب
5- خاصية FormBorderStyle نقوم بتغييرها الي None
6- خاصية ٍsize نقوم بتغييرها الي أبعاد الصورة التي سوف نستخدمها في البرنامج كخلفيه.
7- خاصية TransparencyKey وهنا يجب أن نختار نفس اللون المستخدم مع خاصية Backcolor هذا مهم جدا حني نجعل الفورم التقليدي مختفي تماما.
8- خاصية Background Image وهنا نضيف الصورة التي تم تصميمها مسبقا الي خلفية الفورم
9- خاصية BackgroundImageLayout وهنا نختار Center.
الآن كل ما هو علينا أن نقوم بتجربة البرنامج لنري نتائج ما فعلنا.
وهنا نكون قد انتهينا من ألمرحله الأولي لتغيير شكل الفورم
الطريقة الثانية:
1- نتبع نفس الخطوات المستخدمة في الطريقة الأولي حتى الخطوة رقم 7 فقط
2- نضيف الي المشروع Resources File ويتم ذلك بأكثر من طريقه إما عن طريق الذهاب الي قائمة Project واختيار إضافة عنصر جديد Add New Item أو بالضغط مباشرة علي مفاتيح Ctrl + Shift + A 3- سيقوم ذلك بفتح نافذة إضافة عنصر جديد وهنا علينا اختيار Resources File من الاختيارات الكثيرة الموجودة بالنافذة طبعا يمكننا تغيير الاسم أو تركه كما هو عموما الاسم المبدئي هو Resources1
3- وسيؤدي ذلك الي فتح نافذة Resources1.resx وسنختار Add Resources ومنها Add Existing File
وهنا علينا أن نضيف ملفات الجرافيك التي قمنا بتصميمها ببرنامج الجرافيك.
4- ثم نبدأ بإضافة الكود التالي الي الفورم وفي هذا الكود يتم خلق الصورة من الصور التي تم إضافتها الي Resources File حيث أن _skin هو الاسم الذي سوف نستدعي به الصورة Bitmapمن خلال الكود وهذا الملف يتم استدعاءه من داخل My.Resources.Resources1 حيث أن Resouces1 هو اسم Resources File الذي تم إضافته الي الفورم في الخطوة رقم 2 تحت الطريقة الثانية وحيث أن Aliens هو اسم ملف الجرافيك الذي تم إضافته الي Resources1
' Create Your Image
Dim _skin As New Bitmap(My.Resources.Resource1.Alens)
End Class[
Public Class Form2
5- ثم نضيف الكود التالي الي الفورم وهنا سيصبح شكل الكود كالأتي:
' Create Your Image
Dim _skin As New Bitmap(My.Resources.Resource1.Alens)
' Create an ImageAttributes object and set the color key to ajust
' the form transperency.
Dim lowerColor As Color = Color.Magenta
Dim upperColor As Color = Color.Magenta
Dim attr As New System.Drawing.Imaging.ImageAttributes
End Class
Public Class Form2
سوف نتوقف قليلا لتوضيح الكود الذي تم إضافته الي الفورم و كما نلاحظ تم إضافة 3 عناصر الي الفورم وهما عبارة عن لونين لهما نفس المواصفات ونسمي الأول lowerColor ونسمي الثاني upperColor مع الوضع في الاعتبار أن يكون هذان اللونان هما نفس لون خلفية الصورة والذي قمنا بتسجيله علي ورقه منفصلة أثناء رسم الصورة كما هو مذكور في مقدمة الموضوع تحت الطريقة الأولي وسوف يتم استخدام هذان اللونين لإلغاء خلفية الصورة أثناء تشغيل البرنامج أما العنصر الأخير الذي تم إضافته فهو ImageAttribute وأطلقنا عليه الاسم attr
وهو عبارة عن Object تحتوي علي معلومات خاصة بالتلاعب بالصور بشكل عام وأيضا التعديل في الصور مثل Bitmap و MetaFiles و PNG و JPEG الي أخره من امتداد الملفات File Extension الخاصة بملفات الجرافيك
6- ألان سوف نضيف الكود التالي الي الفورم وهو هنا ببساطه يستعمل للهيمنة علي الفورم أو لتخطي Overrides شكل الفورم الأصلي وهذا الجزء من الكود يتم كتابته بمساعدة الفيجوال استوديو IntelliSense حيث أننا لن نجده في Form Events العادية
' Create Your Image
Dim _skin As New Bitmap(My.Resources.Resource1.Alens)
' Create an ImageAttributes object and set the color key to ajust
' the form transperency.
Dim lowerColor As Color = Color.Magenta
Dim upperColor As Color = Color.Magenta
Dim attr As New System.Drawing.Imaging.ImageAttributes
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
End Sub
End Class
Public Class Form2
7- ثم نضيف الكود الأتي لتحديد الصورة التي سوف يتم رسمها داخل الفورم ومن ثم نقوم برسمها داخل مستطيل Rectangle يبدأ من نقطه (0 , 0 ) ومقاسه يعادل مقاس الصورة وعلي أن تكون وحدة الرسم المستخدمة هي البكسل ومن ثم استخدام خاصية ImageAttribute لإخفاء اللون الخلفي للصورة وهو Color.Magenta تحديدا
' Create Your Image
Dim _skin As New Bitmap(My.Resources.Resource1.Alens)
' Create an ImageAttributes object and set the color key to ajust
' the form transperency.
Dim lowerColor As Color = Color.Magenta
Dim upperColor As Color = Color.Magenta
Dim attr As New System.Drawing.Imaging.ImageAttributes
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
' Creat graphic object
Dim bmp As New Bitmap(_skin)
Dim g As Graphics = Graphics.FromImage(bmp)
' Set the transparency color key based on the upper-left pixel
' of the image (maneta color).
attr.SetColorKey(lowerColor, upperColor)
' Draw the image using the image attributes.
Dim dstRect As New Rectangle(0, 0, bmp.Width, bmp.Height)
e.Graphics.DrawImage(bmp, dstRect, 0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, attr)
End Sub
End Class
Public Class Form2
8- وهنا نقوم بتجربة الفورم لنري تأثير الكود الذي تم إضافته
9- يتبقي شئ أخير هو عملية تحريك الفورم في الواقع لقد بحثت كثيرا في هذا الامر وتوصلت في النهاية الي انه يمكن استخدام أواستدعاء Windows API ومن ثم نستخدم هذه الخاصية من داخل الحدث الخاص بالفورم وهو هنا MouseDown وسنجد أن الكود النهائي بالشكل التالي
' Create Your Image
Dim _skin As New Bitmap(My.Resources.Resource1.Alens)
' Use the following API to move the form
Private Declare Sub ReleaseCapture Lib "user32" ()
Private Declare Sub SendMessage Lib "user32" Alias "SendMessageA" (ByVal _
hWnd As Integer, ByVal wMsg As Integer, ByVal wParam As Integer, _
ByVal lParam As Integer)
Private Const WM_NCLBUTTONDOWN As Integer = &HA1
Private Const HTCAPTION As Integer = 2
' Create an ImageAttributes object and set the color key to ajust the form transperency.
Dim lowerColor As Color = Color.Magenta
Dim upperColor As Color = Color.Magenta
Dim attr As New System.Drawing.Imaging.ImageAttributes
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
' Creat graphic object
Dim bmp As New Bitmap(_skin)
Dim g As Graphics = Graphics.FromImage(bmp)
' Set the transparency color key based on the upper-left pixel
' of the image (maneta color).
attr.SetColorKey(lowerColor, upperColor)
' Draw the image using the image attributes.
Dim dstRect As New Rectangle(0, 0, bmp.Width, bmp.Height)
e.Graphics.DrawImage(bmp, dstRect, 0, 0, bmp.Width, bmp.Height, _
GraphicsUnit.Pixel, attr)
End Sub
Private Sub Form2_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
' Move the form
If e.Button = MouseButtons.Left Then
ReleaseCapture()
SendMessage(Me.Handle.ToInt32, WM_NCLBUTTONDOWN, HTCAPTION, 0&)
End If
End Sub
End Class
Public Class Form2
لقد قمت بإضافة أمثله كثيرة في المثال المرفق لتوضيح الطريقة السابقة ولتوضيح كيف أن خلفية الصورة أو الخطأ في الصورة أو أي ظل موجود في الصورة قدي يؤدي الي ظهور الفورم أثناء التنفيذ بشكل قبيح أو شكل غير متجانس
ملحوظه جميع الفورم المرفقة يمكن تحريكها من أماكنها باستخدام الماوس حيث عند تشغيل المثال المرفق سيظهر الفورم الأول ومن داخله نختار الفورم الاخري
هذا فقط مثال توضيحي واتمني من الله أن يكون ذا فائدة للاحوه الآخرين
وأيضا أضفت فكره سريعة عن استخدام الرسم بالفيجوال استوديو بدون استخدام صور وذلك لتوضيح أيضا أننا نستطيع تغيير شكل الفورم بأكثر من طريقه والمثال الأخير هو في Form8 تحديدا وهذا المثال سيكون هو البداية الحقيقية لتغيير شكل الفورم وسيتم التوضيح في درس لاحق بإذن الله
طبعا الامر مفتوح للنقاش وأي أفكار منكم سوف تساهم بإيصال المعرفة للجميع وهذا هو الهدف المطلوب
المرفقات: ملف مضغوط يحتوي علي الكود + ملف وورد
رابط التنزيل حجم الملف 4 ميجابايت
أخوكم عمر