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.

Original migrated application

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.

 [Intercepted]
 private Mobilize.Web.ToolStripLabel toolStripLabel3 { get; set; }

Then initialize the new field in the InitializeComponent method in the Form1.Designer.cs.

private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel3 = new Mobilize.Web.ToolStripLabel();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}

Then set the properties of the new field.

// 
// toolStripLabel3
// 
this.toolStripLabel3.Name = "toolStripLabel3";
this.toolStripLabel3.Size = new System.Drawing.Size(86, 22);
this.toolStripLabel3.Text = "toolStripLabel3";

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.

this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
this.toolStripLabel1,
this.toolStripLabel2,
this.toolStripLabel3
});

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.

.WindowsFormsApp1_Form1 .toolStripLabel3 {
    width: 86px;
    height: 22px;
    position: absolute;
    left: 144px;
}

Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.

Application with the new toolstrip item

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.

[Intercepted]
private Mobilize.Web.ToolStripButton toolStripButton { get; set; }

Then, add the initialization of the item in the InitializeComponent method in the Form1.Designer.cs.

private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.toolStripButton = new Mobilize.Web.ToolStripButton();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}

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.

// 
            // SaveToolStripButton
            // 
            this.toolStripButton.Alignment = Mobilize.Web.ToolStripItemAlignment.Right;
            this.toolStripButton.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;
            this.toolStripButton.Image = "assets/images/HSTClientCommon.Resources.update_item_16x16.png";
            this.toolStripButton.Name = "SaveToolStripButton";
            this.toolStripButton.Size = new System.Drawing.Size(55, 22);
            this.toolStripButton.Text = "&Save";
            this.toolStripButton.Click += new System.EventHandler(this.toolStripButton_Click);

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.

private void toolStripButton_Click(object sender, EventArgs e)
{
 MessageBox.Show("Hello world!");
}

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.

this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
this.toolStripLabel1,
this.toolStripLabel2,
this.toolStripButton
});

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.

.WindowsFormsApp1_Form1 img[title="Save"] {
    position: absolute;
    left: 144px;
    top: -5px;
}

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.

[Intercepted]
internal Mobilize.Web.ToolStripMenuItem SchedulingMenuItem { get; set; }

[Intercepted]
private Mobilize.Web.ToolStripMenuItem appointmentSheetToolStripMenuItem { get; set; }

Then, add the initialization of the items in the InitializeComponent method in the Form1.Designer.cs.

private void InitializeComponent()
{
  this.toolStrip1 = new Mobilize.Web.ToolStrip();
  this.toolStripLabel1 = new Mobilize.Web.ToolStripLabel();
  this.toolStripLabel2 = new Mobilize.Web.ToolStripLabel();
  this.SchedulingMenuItem = new Mobilize.Web.ToolStripMenuItem();
  this.appointmentSheetToolStripMenuItem = new Mobilize.Web.ToolStripMenuItem();
  this.toolStrip1.SuspendLayout();
  this.SuspendLayout();
  . . .
}

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.

// 
// SchedulingMenuItem
// 
this.SchedulingMenuItem.DropDownItems.AddRange(new Mobilize.Web.ToolStripItem[] {
this.appointmentSheetToolStripMenuItem});
this.SchedulingMenuItem.Name = "SchedulingMenuItem";
this.SchedulingMenuItem.Size = new System.Drawing.Size(78, 20);
this.SchedulingMenuItem.Text = "&Scheduling";
// 
// appointmentSheetToolStripMenuItem
// 
this.appointmentSheetToolStripMenuItem.Name = "appointmentSheetToolStripMenuItem";
this.appointmentSheetToolStripMenuItem.Size = new System.Drawing.Size(254, 22);
this.appointmentSheetToolStripMenuItem.Text = "Appointment Sheet";
this.appointmentSheetToolStripMenuItem.Click += new System.EventHandler(this.appointmentSheetToolStripMenuItem_Click);

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.

this.toolStrip1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
 this.SchedulingMenuItem,
 this.toolStripLabel1,
 this.toolStripLabel2
});

Compile both frontend and backend projects and then run the app. The new item should show in the toolbar.