Changing ToolStripButton icons through CSS

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.

Original migrated application

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 remove/comment the lines with the 'Image' property from each toolstrip button because they will no longer be needed.

// 
// toolStripButton1
//
this.toolStripButton1.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;    
//this.toolStripButton1.Image = "assets/images/WindowsFormsApp1.Resources.icon1.png";
this.toolStripButton1.Name = "toolStripButton1";
this.toolStripButton1.Size = new System.Drawing.Size(29, 24);
this.toolStripButton1.Text = "toolStripButton1";
this.toolStripButton1.Id = "toolStripButton1";

Next, inspect the DOM of the migrated project and get the selector of the first div control from each toolstrip button. This element is where the CSS rules will be applied to display the icons.

<wm-toolstrip-button id="toolStripButton11">
  <div>
    <div>toolStripButton1</div>
  </div>
</wm-toolstrip-button>

Once we got the selector, in the frontend Angular migrated project, go to form1.component.css and paste the copied selector. When we are going to add the properties in the CSS rule, there are two scenarios that we have to contemplate:

• The first one, when the 'DisplayStyle' value is 'Image', the properties to add in the CSS rule are the background, width, and height for the icon. In the case of the background, it's necessary to add the 'url' and the position of the icon.

#toolStripButton1 > div {
    width: 12px;
    height: 16px;
    background: url(assets/images/spriteImage.png) -20px 0;
}

• On the other side, when the value is 'ImageAndText', besides adding the width, height, and background to the first div element, it's necessary to add two other CSS rules, specifically to the wm-toolstrip-button and to the second div element that contains the text of the element. In the case of the wm-toolstrip-button, the selector must have the width property where the icon and text can be displayed properly. And in the case of the second div, it's necessary to add a margin-left property to avoid the overlapping between the icon and the text.

#toolStripButton2 {
    width: 100px;
}
#toolStripButton2 > div {
    background: url(assets/images/spriteImage.png) 0px 0px;    
    height: 16px;
    width: 16px;    
}
#toolStripButton2 > div > div {
    margin-left: 22px;
}

Finally, compile both frontend and backend migrated projects and then run the app. The new icons should be shown in the toolbar properly.

Application with the new toolStripButtons icon