How to Create ApplicationIcon for Ribbon Form - Revision history

Rkdrm at 09:11, 22 August 2009

2009-08-22T09:11:42Z

Rkdrm at 09:11, 22 August 2009

2009-08-22T09:11:00Z

Rkdrm at 09:09, 22 August 2009

2009-08-22T09:09:24Z

Rkdrm at 09:07, 22 August 2009

2009-08-22T09:07:43Z

Rkdrm at 09:06, 22 August 2009

2009-08-22T09:06:12Z

Rkdrm: New page: To provide for separate images for DevExpress Ribbon control ApplicationIcon in normal and hover state, you need to create a custom skin(!). Instructions follow. * You need 3 PNG images o...

2009-08-22T09:02:29Z

New page: To provide for separate images for DevExpress Ribbon control ApplicationIcon in normal and hover state, you need to create a custom skin(!). Instructions follow. * You need 3 PNG images o...

New page

To provide for separate images for DevExpress Ribbon control ApplicationIcon in normal and hover state, you need to create a custom skin(!). Instructions follow.

* You need 3 PNG images of application icon button in 3 states - normal, hover and pressed. These should be 35x35 pixels, round with transparent background. Hover state could be with glow effect, for example. Pressed state could be with surround inverted or rotated.
* You also need a blank transparent 1x1 pixel PNG. Call it blank.png
* Open DX Skin Editor from Start menu. Select the skin you want as template from dropdown. Name the skin appropriately, I'll use MrwaSkinCaramel for this example.
* Create the skin from the template. Close the skin editor. Open the skin directory from the filesystem, go to ribbon directory, look for the formapplicationbutton.png file.
* Modify the formapplicationbutton.png to contain the 3 images of your button in the 3 states, normal, hover and pressed from top to bottom.
* Open the skin editor and load the skin you created. Look at the Ribbon/FormApplicationButton from the navigator pane. You should see your button in the 3 states in the bottom pane. Try the preview in the top pane, should show your button behaviour. Don't worry that the button in the top pane preview has "DX" overlayed - we will get rid of that in your project.
* From the skin editor menu, do "Create Assembly". Name the assembly MrwaSkinCaramel.dll - that is the name of your skin file.dll. The success popup from creating the dll will give you a code snippet to add to your project. Copy this to the cut buffer. Close the skin editor.
* Open your VS2008 project.
* Go to the Program.cs file and add the line you cut from the skin editor, before the Application.Run( ... You should add something like:
** DevExpress.Skins.SkinManager.Default.RegisterAssembly(typeof(DevExpress.UserSkins.MrwaSkinCaramel).Assembly); //Register!
* Copy the MrwaSkinCaramel.dll created by the skin editor to your VS2008 project (maybe to a Lib directory) and add a reference to it.
* Edit the RibbonForm - select the RibbonControl (easiest from the Document Outline window) and change the ApplicationIcon property to the blank.png image. This will get rid of the "DX" overlay on the application icon.
* Now you need to enable the skin you created. Add a BarAndDockingController to the RobbonForm.
* Select the barAndDockingController1 instance, and click the LookAndFeel property to open it up.
** Set the SkinName sub-property dropdown to MrwaSkinCaramel (ie the skin you created)
** Set the Style sub-property to Skin
** Set the UseDefaultLookAndFeel sub-property to False
** Set the UseWindowsXPTheme sub-property to False

OK, you should be in business - F5 and see if your hover image appears when you hover over the application icon button.

← Older revision		Revision as of 09:06, 22 August 2009
Line 20:		Line 20:
	** Set the UseWindowsXPTheme sub-property to False		** Set the UseWindowsXPTheme sub-property to False

−	OK, you should be in business - F5 and see if your hover image appears when you hover over the application icon button.	+	OK, you should be in business - F5 and see if your hover image appears when you hover over the application icon button. If you've got a DX ApplicationMenu associated with the application icon button you should see your pressed state image appear when you press the button.

@@ Line 14: / Line 14: @@
 * Edit the RibbonForm - select the RibbonControl (easiest from the Document Outline window) and change the ApplicationIcon property to the blank.png image. This will get rid of the "DX" overlay on the application icon.
 * Now you need to enable the skin you created. Add a BarAndDockingController to the RibbonForm.
-* Select the barAndDockingController1 instance, and click the LookAndFeel property to open it up.
+* Select the barAndDockingController1 instance, and click the LookAndFeel property "+ button" to open it up.
 ** Set the SkinName sub-property dropdown to MrwaSkinCaramel (ie the skin you created)
 ** Set the Style sub-property to Skin

@@ Line 7: / Line 7: @@
 * Modify the formapplicationbutton.png to contain the 3 images of your button in the 3 states, normal, hover and pressed from top to bottom. You could use Paint.Net or Photoshop to do this.
 * Open the skin editor and load the skin you created. Look at the Ribbon/FormApplicationButton from the navigator pane. You should see your button in the 3 states in the bottom pane. Try the preview in the top pane, should show your button behaviour. Don't worry that the button in the top pane preview has "DX" overlayed - we will get rid of that in your project.
-* From the skin editor menu, do "Create Assembly". Name the assembly MrwaSkinCaramel.dll - that is the name of your skin file.dll. The success popup from creating the dll will give you a code snippet to add to your project. Copy this to the cut buffer. Close the skin editor.
+* From the skin editor menu, do "Create Assembly". Name the assembly MrwaSkinCaramel.dll - that is the_name_of_your_skin_file.dll. The success popup from creating the dll will give you a code snippet to add to your project. Copy this to the cut buffer. Close the skin editor.
 * Open your VS2008 project.
 * Go to the Program.cs file and add the line you cut from the skin editor, before the Application.Run( ... You should add something like: