How to Create ApplicationIcon for Ribbon Form

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.