Post: How to use DevExpress for custom C# winform skins
08-26-2015, 03:44 PM #1
Im_YouViolateMe
NextGenUpdate Elite
(adsbygoogle = window.adsbygoogle || []).push({});
Hello NGU!



Today I will be a showing you a whole new set of skins you can add to your C# form instead of using the same old MetroFramework UI that almost everyone uses. In this example I will be showing you the Metropolis Dark skin, which is what IMCSx used for his GSC Studio. Be sure to follow these steps closely! It's actually pretty easy :p Let's begin!

Prerequisites:
Visual Studio 2010/2013/2015
.NET Framework 4.5

Downloads:
You must login or register to view this content.
You must login or register to view this content.

You must login or register to view this content.
(Due to the massive filesize I am unable to provide a virus scan, just use Sandboxie if you dont trust it)

You must login or register to view this content.
You must login or register to view this content.

Steps:

Step 1 - Create a new project

1] First you'll want to create a new C# Project (or use an existing one)

a] Make a new project and make sure it's a Visual C# Windows Form Application You must login or register to view this content.


b] Name it anything you wish


c] When your project is opened, save it, and then close it.




Step 2 - Install DevExpress

2] Now that you've created a project, let's install the DevExpress components.

a] Download the DevExpressUniversalTrial from the download links below.


b] Run as administrator, and click Trial Installation.


c] Deselect all but Winforms and WPF controls.You must login or register to view this content.


d] Click next, and "Accept and Install". If necessary, close any programs it asks you to close. Wait until setup is complete. Restart your computer (if needed).



Step 3 - Installing the patch

3] Run DevExpress Patch 15.1.exe as Administrator

a] Just click apply and wait for it to finish.
You must login or register to view this content.


b] To know if this step worked or not, just wait until we start adding the skins.


Note: This patch only works for the 15.1 version of DevExpress components. Please install the right patch depending on your DevExpress version. You can find your version by looking in your Program Files folder. (Unless you would rather pay $900 for a license for 12 months).


Step 4 - Adding the references

4] Open your Project in Visual Studio.

a] On the right, look for project explorer. If it isn't there, go to View -> Solution Explorer or CTRL+ALT+L to enable it. Find "References" under your solution, right click it and click "Add Reference".
You must login or register to view this content.


b] Under the "Assemblies" tab, select "Extensions" to the view the list of extensions. Now here is where you can add the many libraries for the DevExpress framework. Currently, the only ones we will need to add a reference to are:

  • DevExpress.BonusSkins
  • DevExpress.Data
  • DevExpress.Office.Core
  • DevExpress.Printing.Core
  • DevExpress.RichEdit.Core
  • DevExpress.Sparkline.Core
  • DevExpress.Utils
  • DevExpress.XtraBars
  • DevExpress.XtraEditors
  • DevExpress.XtraPrinting
  • DevExpress.XtraRichEdit
  • DevExpress.XtraTreeList

You must login or register to view this content.


c] Save the project.



Step 5 - Adding the controls to the toolbox

5] On the left side of your visual studio window, you should see a toolbox panel. If not, go to View -> Toolbox or CTRL+ALT+X.

a] In the toolbox, right click and select "Add Tab"
You must login or register to view this content.


b] Rename the newly created Tab as "DevExpress" or whatever you'd like


c] Keep the tab open. Open up your File Browser (Windows Explorer) and navigate to where you installed the DevExpress components (Usually under Program Files)
You must login or register to view this content.


d] Open up Components\Bin\Framework and find DevExpress.XtraBars.vXX.XX.dll where XX.XX is your version.
You must login or register to view this content.


e] Drag the .dll over to the DevExpress tab we created earlier. It should look like this:
You must login or register to view this content.


f] Repeat the same thing, but for DevExpress.XtraEditors.vXX.XX.dll. This library contains the basic controls such as Labels, Buttons, Menus, TextEdits, etc.
You must login or register to view this content.


g] There you have it! We have added the controls to the toolbox! For the last step, we will be skinning the form!



Step 6 - Skinning the form

6] Let's begin skinning the form! It's actually very easy!

a] With your project open, inside the toolbox find the control "FormAssistant". If you can't find it, repeat step 5-d.
You must login or register to view this content.


b] Drag the FormAssistant control onto your Windows Form, or just click on the Windows Form.


c] Once the control has been added to the form, you should see a little menu popup at the bottom. Click "Select Skin".
You must login or register to view this content.


c] A DefaultLookAndFeel control will also be added. This is necessary. In the Skin Name drop down box, select your desired skin. In this case, I am using Metropolis Dark.
You must login or register to view this content.


d] Now click on the FormAssistant control, and click the little arrow box above it to show the FormAssistant Tasks menu. Click "Convert to Skinnable Form".
You must login or register to view this content.


e] It should now look like this:
You must login or register to view this content.


f] Save the project. Now run it and see your results. If it doesn't look like below (except the form title of course) then you may not of followed my directions properly.
You must login or register to view this content.


g] There you have it! You've successfully added a skin to your project! Of course if you were using an existing project, you might have to update all your current controls. But now you've got a whole bunch of nice controls and features at your fingertips. You just have to know how to use them Winky Winky



Credits:
Me - making the tutorial :p
DevExpress - For their overpriced devcomponents
IMCSx - GSC Studio + design example

You must login or register to view this content.

Thank you for your time! Please tell me if anything is wrong and I will fix it Smile
Last edited by Im_YouViolateMe ; 08-26-2015 at 03:48 PM.

The following 11 users say thank you to Im_YouViolateMe for this useful post:

- EdUaRdO -, Chen Madhala, EternalHabit, Gentleツ, Insult, itsSorrow, Patrick, basshead4ever, SyGnUs, TehMerkMods, xDebugKiller
08-26-2015, 04:56 PM #2
itsSorrow
In my man cave
Good shit violate

The following user thanked itsSorrow for this useful post:

Im_YouViolateMe
08-30-2015, 11:26 PM #3
TehMerkMods
I’m too L33T
Originally posted by YouViolateMe View Post
Hello NGU!



Today I will be a showing you a whole new set of skins you can add to your C# form instead of using the same old MetroFramework UI that almost everyone uses. In this example I will be showing you the Metropolis Dark skin, which is what IMCSx used for his GSC Studio. Be sure to follow these steps closely! It's actually pretty easy :p Let's begin!

Prerequisites:
Visual Studio 2010/2013/2015
.NET Framework 4.5

Downloads:
You must login or register to view this content.
You must login or register to view this content.

You must login or register to view this content.
(Due to the massive filesize I am unable to provide a virus scan, just use Sandboxie if you dont trust it)

You must login or register to view this content.
You must login or register to view this content.

Steps:

Step 1 - Create a new project

1] First you'll want to create a new C# Project (or use an existing one)

a] Make a new project and make sure it's a Visual C# Windows Form Application You must login or register to view this content.


b] Name it anything you wish


c] When your project is opened, save it, and then close it.




Step 2 - Install DevExpress

2] Now that you've created a project, let's install the DevExpress components.

a] Download the DevExpressUniversalTrial from the download links below.


b] Run as administrator, and click Trial Installation.


c] Deselect all but Winforms and WPF controls.You must login or register to view this content.


d] Click next, and "Accept and Install". If necessary, close any programs it asks you to close. Wait until setup is complete. Restart your computer (if needed).



Step 3 - Installing the patch

3] Run DevExpress Patch 15.1.exe as Administrator

a] Just click apply and wait for it to finish.
You must login or register to view this content.


b] To know if this step worked or not, just wait until we start adding the skins.


Note: This patch only works for the 15.1 version of DevExpress components. Please install the right patch depending on your DevExpress version. You can find your version by looking in your Program Files folder. (Unless you would rather pay $900 for a license for 12 months).


Step 4 - Adding the references

4] Open your Project in Visual Studio.

a] On the right, look for project explorer. If it isn't there, go to View -> Solution Explorer or CTRL+ALT+L to enable it. Find "References" under your solution, right click it and click "Add Reference".
You must login or register to view this content.


b] Under the "Assemblies" tab, select "Extensions" to the view the list of extensions. Now here is where you can add the many libraries for the DevExpress framework. Currently, the only ones we will need to add a reference to are:

  • DevExpress.BonusSkins
  • DevExpress.Data
  • DevExpress.Office.Core
  • DevExpress.Printing.Core
  • DevExpress.RichEdit.Core
  • DevExpress.Sparkline.Core
  • DevExpress.Utils
  • DevExpress.XtraBars
  • DevExpress.XtraEditors
  • DevExpress.XtraPrinting
  • DevExpress.XtraRichEdit
  • DevExpress.XtraTreeList

You must login or register to view this content.


c] Save the project.



Step 5 - Adding the controls to the toolbox

5] On the left side of your visual studio window, you should see a toolbox panel. If not, go to View -> Toolbox or CTRL+ALT+X.

a] In the toolbox, right click and select "Add Tab"
You must login or register to view this content.


b] Rename the newly created Tab as "DevExpress" or whatever you'd like


c] Keep the tab open. Open up your File Browser (Windows Explorer) and navigate to where you installed the DevExpress components (Usually under Program Files)
You must login or register to view this content.


d] Open up Components\Bin\Framework and find DevExpress.XtraBars.vXX.XX.dll where XX.XX is your version.
You must login or register to view this content.


e] Drag the .dll over to the DevExpress tab we created earlier. It should look like this:
You must login or register to view this content.


f] Repeat the same thing, but for DevExpress.XtraEditors.vXX.XX.dll. This library contains the basic controls such as Labels, Buttons, Menus, TextEdits, etc.
You must login or register to view this content.


g] There you have it! We have added the controls to the toolbox! For the last step, we will be skinning the form!



Step 6 - Skinning the form

6] Let's begin skinning the form! It's actually very easy!

a] With your project open, inside the toolbox find the control "FormAssistant". If you can't find it, repeat step 5-d.
You must login or register to view this content.


b] Drag the FormAssistant control onto your Windows Form, or just click on the Windows Form.


c] Once the control has been added to the form, you should see a little menu popup at the bottom. Click "Select Skin".
You must login or register to view this content.


c] A DefaultLookAndFeel control will also be added. This is necessary. In the Skin Name drop down box, select your desired skin. In this case, I am using Metropolis Dark.
You must login or register to view this content.


d] Now click on the FormAssistant control, and click the little arrow box above it to show the FormAssistant Tasks menu. Click "Convert to Skinnable Form".
You must login or register to view this content.


e] It should now look like this:
You must login or register to view this content.


f] Save the project. Now run it and see your results. If it doesn't look like below (except the form title of course) then you may not of followed my directions properly.
You must login or register to view this content.


g] There you have it! You've successfully added a skin to your project! Of course if you were using an existing project, you might have to update all your current controls. But now you've got a whole bunch of nice controls and features at your fingertips. You just have to know how to use them Winky Winky



Credits:
Me - making the tutorial :p
DevExpress - For their overpriced devcomponents
IMCSx - GSC Studio + design example

You must login or register to view this content.

Thank you for your time! Please tell me if anything is wrong and I will fix it Smile

Really Useful, I Did it without the Assistor thing but with that method it's so much quicker

The following user thanked TehMerkMods for this useful post:

Im_YouViolateMe

Copyright © 2024, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo