بسم الله الرحمن الرحيم 

أهلا بكم ...اليوم سوف نشرح كيفية استخدام المكتبة SkinSoft VisualStyler.Net و التى تستخدم فى انشاء و تطبيق افضل الثيمات و الانماط لتجميل تطبيقات النوافذ C# & VB.NE مثل الانماط التالية :



وتلك المكتبة ليست مجانية لكنى حصلت على نسخة مع الكيجن و يمكنك تحميل تلك النسخة من على العنوان التالى :










بعد اكتمال الإعداد بنجاح للمكتبة VisualStyler.Net قم بتشغيل Visual Studio Express و ثم فتح أو إنشاء مشروع نماذج Windows جديد سواء كان فى بيئة الفجوال بيسك أو فى بيئة السى شارب ....الان قم بانشاء تويب جديد و ليكن باسم SkinSoft VisualStyler فى صندوق الادوات Toolbox

 






ثالثا : كيفية الاستخدام :

1_ إستخدام المكتبة VisualStyler وقت التصميم  :

ويتم ذلك من خلال نافذة مصمم المهام VisualStyler designer tasks و يمكنك الوصول اليه من خلال تحديد العنصرVisualStyler  ثم النقر على السهم الصغير في اليد اليمنى العليا الزاوية ليظهر لك نافذة التصميم على النحو التالى :


 ويمكنك ملاحظة أن مصمم المهام VisualStyler designer tasks يعرض خصائص والإجراءات التالية: -

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

• Save As Application Resource : إذا تم تفعيل هذا الخيار تكون جزءا لا يتجزأ من النمط المرئي في تطبيق كمورد، وبالتالى لا تحتاج إلى نشر ملف VSSF معك فى التطبيق.
  

• Browse Visual Styles : يعرض مربع حوارى لعرض الانماط المتاحة مما يسمح لك لتصفح والمعاينة وتحديد نمط مرئي جديد...مثلة فى ذلك مثل الخيار الاول Visual Style
  

• Import Visual Styles : يعرض لك مربع حوارى مما يسمح لك لاستيراد نمط مرئي جديد من ملف MsStyles أو أرشيف مضغوط قمت باعداده و تصميمه مسبقا .
  

• Skin Mode : يحدد كيفية تطبيق النمط أو الثيمات و ننصحك استخدام الوضع التلقائي Automatic skin .
  

• Target Controls : يحدد الذي يشكل، وينبغي البشرة التحكم في التطبيق.
  
• Shadow Style : يحدد أسلوب الظل الذي يتم تطبيقه على جميع أشكال ومربعات الحوار.
  
• Skin Common Dialogs : يحدد ما إذا كنت تريد تطبيق النمط على مربعات الحوارات المشتركة مثل OpenFileDialog، FontDialog، وهذا ينطبق أيضا على أي مربعات حوار نظام Win32 
  
  

2_ إستخدام المكتبة VisualStyler بطريقة التضمين 

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

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

_إنشاء مجلد وليكن باسم "Skins" في مسار التطبيق الخاص بك.
_حدد المجلد وبزر الماوس الأيمن انقر فوق Add-> Add Existing Item
_في مربع الحوار ملف انتقل إلى المجلد Skins واختيار واحد أو أكثر من الانماط المتوافرة لديك وانقر فوق موافق.
_ومن نافذة الخصائص لكل ملف قم بتعيين "Build Action " الى Embedded Resource . كما فى الشكل التالى :

الكود:

using System;
using System.Reflection;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        //<------------------------------------------------------------------->
        /// <summary>
        /// Handles the LoadVistaAeroSkin button click event
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>

        private void btnLoadVistaAeroSkin_Click(object sender, EventArgs e)
        {
            // Get the resource path for the Aero skin
            string skinName = @"WindowsApplication1.Skins.Vista (Aero).vssf";
            
            // Load the skin directly from the resource stream
            visualStyler1.LoadVisualStyle(Assembly.GetExecutingAssembly().GetManifestResourceStream(skinName));
        }


        //<------------------------------------------------------------------->
        /// <summary>
        /// Handles the LoadAquaSkin button click event
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        
        private void btnLoadAquaSkin_Click(object sender, EventArgs e)
        {
            // Get the resource path for the Aqua skin
            string skinName = @"WindowsApplication1.Skins.OSX (Aqua).vssf";

            // Load the skin directly from the resource stream
            visualStyler1.LoadVisualStyle(Assembly.GetExecutingAssembly().GetManifestResourceStream(skinName));
        }
    }
}

الكود:

Imports System
Imports System.Reflection
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms

Namespace WindowsApplication1
   Partial Public Class Form1
      Inherits Form
      Public Sub New()
         InitializeComponent()
      End Sub

      '<------------------------------------------------------------------->
      ''' <summary>
      ''' Handles the LoadVistaAeroSkin button click event
      ''' </summary>
      ''' <param name="sender"></param>
      ''' <param name="e"></param>

      Private Sub btnLoadVistaAeroSkin_Click(ByVal sender As Object, ByVal e As EventArgs)
         ' Get the resource path for the Aero skin
         Dim skinName As String = "WindowsApplication1.Vista (Aero).vssf"

         ' Load the skin directly from the resource stream
         visualStyler1.LoadVisualStyle(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(skinName))
      End Sub


      '<------------------------------------------------------------------->
      ''' <summary>
      ''' Handles the LoadAquaSkin button click event
      ''' </summary>
      ''' <param name="sender"></param>
      ''' <param name="e"></param>

      Private Sub btnLoadAquaSkin_Click(ByVal sender As Object, ByVal e As EventArgs)
         ' Get the resource path for the Aqua skin
         Dim skinName As String = "WindowsApplication1.OSX (Aqua).vssf"

         ' Load the skin directly from the resource stream
         visualStyler1.LoadVisualStyle(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(skinName))
      End Sub
   End Class
End Namespace


رابعا : إنشاء الانماط و الثيمات باستخادم Skin Editor 

االمكتبة SkinSoft VisualStyler.Net لا تقوم فقط بتبيطق بعض الانماط الجاهزة لديها فى مشروعات الدوت نت وإنما تمدنا ببرنامج بسيط Skin Editor تستطيع من خلاله إنشاء اى نمط تريدة أنت .... فقط أتبع الخطوات التالية :

1_ قم بفتح محرر الانماط Skin Editor و الذى ستجد ايقونة له على سطح مكتب جهازك الذى تم تنصيب عليه المكتبة

2_ ولانشاء ملف جديد انقر MainMenu->File->New->From Empty Skin  وسيقوم محرر الانماطSkin Editor بإنشاء ملف جديد اسمه VSSF EmptySkin.vssf. و يمكن استخدامه لإنشاء النمط الجديد من الصفر عن طريق توفير صور وهمية واضحة لجميع عناصر النمط ويمكنك تعديل اللون والخط و الصورة ...الخ لكل عنصر 


3_إنشاء نمط جديد من ملفات المكتبة VisualStyler 

أفضل طريقة لانشاء نمط جديد هو استخدام أحد أنماط المكتبة VisualStyler ومن ثم يمكنك تغيير نظام الألوان باستخدام أداة Colorizer أو تخصيص فقط الأجزاء التي ترغب في تغييره و لفعل ذلك أتبع الاتى :



الخطوة 1.

انقر MainMenu->File->New->From VisualStyler File  فإن محرر الانماط يقوم بعرض الحوار لاختيار احد الانماط 


الخطوة 2.

اختر النمط  الذي ترغب في استخدامه و إذا كنت ترغب في إعادة تسمية الجلد الجديد ثم تغيير الاسم في حقل الاسم.

الخطوة 3.

تعديل النمط  الجديد، في هذا المثال قمنا استخدام OSX (Panther) ستلاحظ محرر الانماط وقد سميت تلقائيا بـــ OSX (Panther)_1.vssf  حتى لا يتم الكتابة فوق الملف الأصلي.

4_ التعامل مع أداة الالوان colorizer tool

الأداة colorizer تمكنك من إعادة تلوين النمط كله، أو عنصر واحد أو مجموعة من العناصر.وذلك إما من خلال تغيير الألوان عن طريق تحويل مستويات HSL أو من خلال تطبيق مباشرة للون جديد باستخدام أداة منتقي الألوان color picker. يمكنك التراجع بسهولة أي عدد أو تغييرات أو إعادة تعيين الألوان إلى قيمها الأصلية. كما هو الحال مع جميع الإجراءات الأخرى محرر الانماط  يمنحك معاينة WYSIWYG حية لجميع التغييرات مما يتيح لك اختيار أفضل نظام الألوان.


تتكون الأداة colorizer من العناصر التالية: -

1_Skin Layout : لاختيار العناصر التي سوف يتم تلوينها
2_Skin View :  لمعاينة التغييرات التلوين
3_HSL slider : وهو الشريط المنزلق على أداة Colorizer
4_Color Picker : لتحديد اللون المنتقى على أداة Colorizer


لتحديد أداة colorizer يمكنك إما انقر على زر اداة Colorizer  فى شريط Toolbar- .... أو انقر فوق علامة التبويب النمط عرض وحدد أداة تبويب Colorizer في الجزء السفلي من وجهة النظر. أنت أيضا قد ترغب في تحديد الزر تخطيط السيطرة على الجلد عرض.


هذه الأداة colorizer تحتوي على أوامر شريط الأدوات التالية: -

• Undo    : التراجع عن التلوين الحالى .
  
• Reset   : إعادة تعيين والتلوين على الألوان الأصلية.
  
• Update : تطبيق تغيرات اللوان على النمط .
  
• Options : يحدد خيارات التلوين للنمط كله.
  

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


5_ التعامل مع محرر الصور image editor

محرر الصور يتيح لك تعديل أو إضافة أو حذف أي ملف صورة للعنصر المحدد حاليا أو المشاركة في تخطيط النمط على النحو التالى .

الخطوة 1.

حدد العنصر أو الجزء الذي ترغب في حذف في تخطيط النمط

الخطوة 2.

والجزء صور عرض جميع الصور للجزء المحدد، انقر على الصورة لتحديده، في هذا المثال يتم استخدام عنصر زر.


الخطوة 3.

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


عند إغلاق محرر الصور تطبيق تلقائيا كشف أي تغييرات، وسوف يدفع بعد ذلك لحفظ هذه التغييرات.


انقر فوق موافق لقبول التغييرات وتحديث النمط....أو انقر فوق إلغاء الأمر لتجاهل التغييرات والعودة.

أبدعت فى شرحك للمكتبة يا سنى

ايد تحميل البرنامج كامل

رابط التحميل م يشتغل

شكرا على الشرح

للرفع  

السلام عليكم و رحمة الله وبركاته يعطيكم العافية على المشاركة المفيدة 
لكن الرابط لايشتغل