Adding new items to existing toolbar
This section will show you how to add new items to converted tool strip control. To start we will be using a form named Form1 that already contains a toolstrip control named toolStrip1 which already contains two items named toolStripLabel1 and toolStripLabel2.
Case 1: Adding a new label item
First step is to declare a new field for the model in the converted form, this new field will be named toolStripLabel3 of the type Mobilize.Web.ToolStripLabel.
Then initialize the new field in the InitializeComponent method in the Form1.Designer.cs.
Then set the properties of the new field.
Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, by calling the Add method.
Finally, in the migrated frontend angular project, add a css rule in the form1.component.css file that matches the newly added item to the toolstrip.
Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.
Case 2: Adding a new button item
First step is to declare a new field for the model in the converted form, this new field will be named toolStripButton of the type Mobilize.Web.ToolStripButton.
Then, add the initialization of the item in the InitializeComponent method in the Form1.Designer.cs.
Set the properties of the new ToolStripButton control. If the DisplayStyle (https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.toolstripitem.displaystyle) of the item is set as Image or ImageAndText a valid Image value should be set. The Image property must be a string that represents a valid url to an image, in our case the image will be located in the assets/images folder of the migrated Angular app.
Also, notice the Click handler, a valid method should be created in order to set the Click handler value correctly. The method toolStripButton_Click definition must be added as well.
Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, you can add a new Add call.
Finally, in the migrated frontend angular project, add a css rule in the form1.component.css file that matches the newly added item to the toolstrip.
Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.
Case3: Adding a new submenu with child items
First step is to declare the following new model fields in the converted form:
The parent menu item, this new field will be named SchedulingMenuItem of the type Mobilize.Web.ToolStripMenuItem.
The child menu item, this new field will be named appointmentSheetToolStripMenuItem of the type Mobilize.Web.ToolStripMenuItem.
Then, add the initialization of the items in the InitializeComponent method in the Form1.Designer.cs.
Set the properties of the new ToolStripMenuItems control. Please notice that in the case of the parent menuItem, it adds to its DropDownItems property the child menuItem.
Next, the item must be added to the existing toolstrip. It could be done by either using the existing AddRange call in the InitializeComponent method or, you can add a new Add call.
Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.
Last updated