14-Modern User Interface (UI)

 In this post, we will create the EngineeringToolsMainForm graphical user interface using modern UI techniques such as dark mode, expander side menu, and drop down menus for component selection. Interestingly, a modern UI can be setup using WinForms widgets such as panel containers and buttons with a flat appearance.

Open EngineeringToolsMainForm and set the following properties:

• Text: Engineering Tools
• BackColor: Black
• ForeColor: White
• Size: 1600, 800
• StartPosition: CenterScreen

Add a flow layout panel to the form:

• Name: panelSideMenu
• Dock: Left
• Size: 200, 753
• FlowDirection: TopDown

Add a property grid:

• Name: propertyGrid
• Dock: Right
• BackColor: Black
• CategoryForeColor: White
• CategorySplitterColor: DimGray
• CommandsBordercolor: DimGray
• CommandsDisabledLinkColor: Black
• DisabledItemForeColor: 127,245,245,245
• HelpBackColor: Black
• HelpBorderColor: DimGray
• HelpForeColor: White
• LineColor: 64,64,64
• ViewBackColor: Black
• ViewBorderColor: DimGray
• ViewForeColor: WhiteSmoke
• Size: 200, 753

Add a flow layout panel to the form:

• Name: panelCompMenu
• Dock: Top
• Size: 1182, 50
• FlowDirection: LeftToRight

Add a pictureBox to the form:

• Name: schematicCanvas
• Dock: Fill (center) 

Note that the panels and property grid must be added to the form in the order listed above to get the correct form layout.

Left Side Menu

We will use an "expander" menu for the left side menu with a pictureBox at the top for the app logo. The expander is created by successively adding a button and panel whose visibility is controlled by the associated button.

Add a pictureBox to the left side menu panel:

• Size: 200, 100

Add a button to the left side panel below the pictureBox

• Text: Circuit
• Name: btnCircuit
• Size: 200, 40
• BackColor: Black
• ForeColor: White
• FlatStyle: Flat
• FlatAppearance > BorderSize: 0
• FlatAppearance > MouseOverBackColor: BlueViolet
• Font: Segoe UI, 10pt

Add a panel to the left side menu panel below the Circuit button

• Name: panelCircuitSubmenu
• Size: 200, 165
• Visible: False

Make a copy of the Circuit button and paste into the panelCircuitSubmenu, top of panel

• Text: New Circuit
• Name: btnNewCircuit
• BackColor: 32,32,32

Copy the New Circuit button and paste below the New Circuit button

• Text: Load Circuit
• Name: btnLoadCircuit

Paste the copy of the New Circuit button below the Load Circuit button

• Text: Store Circuit
• Name: btnStoreCircuit

Paste the copy of the New Circuit button below the Store Circuit button

• Text: Analyze Circuit
• Name: btnAnalyzeCircuit

Double click on the Circuit button to create and open the Click handler. Add code to toggle the visibility of the Circuit Submenu panel.

private void btnCircuit_Click(object sender, EventArgs e)
{
    panelCircuitSubmenu.Visible = !panelCircuitSubmenu.Visible;
}

Run the program and click the Menu button to hide and "expand" the circuit submenu panel. The form should look similar to the following:

We will add additional buttons and button panels below the Circuit menu panel. We want lower button and open submenus to slide up when submenus above are not visible.

Copy the Circuit button and paste below the circuit submenu panel

• Text: Wire Mode
• Name: btnWireMode

Run the application and ensure that the Wire Mode button does slide up when the circuit submenu panel is not visible. This behavior is achieved by the containing flow layout panel! This makes the creation of expander menus super easy.

Top Component Menu

Copy the Circuit button and paste into the top compenent menu, it should align to the left

• Text: Digital
• Name: btnDigital

Add a panel to the form below the Digital button with the left side aligned with the letter "D" in in the text on the Digital button.

• Name: panelDigitalSubmenu
• Size: 200, 225
• Visible: False

Select the 4 buttons in the circuit submenu panel and copy them to the digital submenu panel. Change the properties of the 4 buttons as follows:

• Text: AND
• Name: btnAND

• Text: OR
• Name btnOR

• Text: NOT
• Name: btnNOT

• Text: Switch
• Name: btnSwitch

Copy the switch button and place it below the switch button in the digital submenu:

• Text: LED
• Name: btnLED

Double click on the Digital button to create the Click button handler

private void btnDigital_Click(object sender, EventArgs e)
{
    panelDigitalSubmenu.Visible = !panelDigitalSubmenu.Visible;
}

Run the program and ensure that the digital submenu visibility can be toggled from the digital button.

We will use the digital menu buttons to create digital components on the schematicCanvas.

A similar user interface is included in the digital simulator project.