Difference between revisions of "How to Create ApplicationIcon for Ribbon Form"
From Richard's Wiki
| Line 5: | Line 5: | ||
* 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. | * 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. | * 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. | + | * 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. | * 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. | ||
Revision as of 01:07, 22 August 2009
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. 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.
- 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. 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.
