تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

إرسال مساهمة في موضوع

اذهب الى الأسفل

تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف السنى في الخميس مارس 26, 2015 6:58 am

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

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



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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

أولا : كيفية التنصيب و التفعيل :

1_ قم بتحميل المكتبة  SkinSoft VisualStyler.Net و مرفق معها Keygen 

2_ قم بتنصيب المكتبة على جهازك و بعد الانتهاء من عملية التنصيب قم بالنقر على Keygen ليظهر لك مربع حوارى قم بتعئة أى بيانات ثم أنقر على Generated كما فى الصور التالية 




ثانيا : كيفية اضافة VisualStyler الى بيئة الدوت نت :


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

انقر فوق علامة التبويب لتحديده، ثم زر الفأرة الأيمن لإظهار قائمة السياق، وحدد الخيار "Choose Items" لعرض اختيار عناصر مربع الحوار العناصر
 

ومن المربع الحوارى الذى سيظهر قم بتحديد التويب .NET Framework Components ومن ثم قم باختيار المكون VisualStyler ثم أنقر ok 




وقد تم الآن إضافة عنصر VisualStyler الى صندوق الادوات ... اسحب عنصر VisualStyler من مربع الأدوات إلى النموذج، وبعد القيام بذلك العنصر سيكون مرئيا في علبة عنصر، وسوف مصمم VisualStyler عرض تلقائيا مع الخيارات الافتراضية.


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

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 . كما فى الشكل التالى :


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

Example C# code

الكود:
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));
        }
    }
}

Example VB.Net code

الكود:
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
avatar
السنى
.......
.......

تاريخ التسجيل : 18/02/2011
المساهمات : 196
النقاط : 367
التقيم : 21
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف السنى في الجمعة مارس 27, 2015 12:01 pm

رابعا : إنشاء الانماط و الثيمات باستخادم 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.

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


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


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

تاريخ التسجيل : 18/02/2011
المساهمات : 196
النقاط : 367
التقيم : 21
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف NEXT في السبت مارس 28, 2015 5:18 am

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

تاريخ التسجيل : 18/02/2011
المساهمات : 290
النقاط : 200411
التقيم : 9
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف الدليمي في الأحد يونيو 19, 2016 10:10 pm

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

تاريخ التسجيل : 16/06/2016
المساهمات : 3
النقاط : 3
التقيم : 0
الدولة : ليبيا
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف thevirus في الأربعاء أكتوبر 12, 2016 7:47 am

رابط التحميل م يشتغل
avatar
thevirus
.
.

تاريخ التسجيل : 10/10/2016
المساهمات : 4
النقاط : 6
التقيم : 0
الدولة : اليمن
الجنس : ذكر
الموقع : techanyoun.blogspot.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم كيفية إضافة ثيمات لمشروعات C# & VB.NE بإستخدام المكتبة SkinSoft VisualStyler.Net

مُساهمة من طرف thevirus في الأربعاء أكتوبر 12, 2016 8:04 am

شكرا على الشرح
avatar
thevirus
.
.

تاريخ التسجيل : 10/10/2016
المساهمات : 4
النقاط : 6
التقيم : 0
الدولة : اليمن
الجنس : ذكر
الموقع : techanyoun.blogspot.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى