Changing ToolStripButton icons
Last updated
Last updated
This section will show you how to change the ToolStripButton icons of the converted control. To start, we will be using a form named Form1 that already contains a ToolStrip control named toolStrip1, and this in turn, already contains four ToolStrip buttons with their respective icon: toolStripButton1, toolStripButton2, toolStripButton3, and toolStripButton4.
In the Form1.Designer.cs, toolStripButton1 and toolStripButton3 have 'Image' as their 'DisplayStyle' property, while toolStripButton2 and toolStripButton4 have 'ImageAndText' as their value.
Let's assume that the developer has already created a sprite image with the icons of the ToolStrip buttons. So, the first step is to copy the sprite image into the frontend Angular migrated project that has a folder called 'images' under the 'src/assets' directory.
Then in the backend migrated project, go to Form1.Designer.cs and change the 'Image' property from each toolstrip button to the sprite image url.
As mentioned above, there are 2 scenarios. However, regardless of the 'DisplayStyle' property that each toolstrip button has, the procedure to change the button icon is the same.
For the first one, when the 'DisplayStyle' value is 'Image', it's done as follows:
On the other side, when the value is 'ImageAndText', it's done as follows:
Finally, compile both frontend and backend migrated projects and then run the app. The new icons should be shown in the toolbar properly.
