• ### Question

• How to create a nice look first page of a program that has menu to open other forms?
Monday, April 23, 2018 2:50 PM

•  And here is an example of what I have been doing.  This can be tested by creating a new Form project and adding 1 ToolStrip control to the form.  Everything is done in the code from there so,  you only need to copy the code below and then run/debug the application.

You will need to set the image paths to images you have.  They should all be the same size and I would recommend using png images with transparency.  In this example I used all 64x64 sized images.

I created a (MainMenuItem) class which inherits from a (ToolStripButton) class and did all the work from within that class.  As can be seen in the form's Load event,  all you need to do is create the new (MainMenuItem)s and then add the items to them.  Do this in order as shown,  add the MainMenuItem and then it's child items,  then the next MainMenuItem and it's child items,  and so on.....

Public Class Form1
With ToolStrip1
.BackColor = Color.Gainsboro
.Dock = DockStyle.Left
.GripStyle = ToolStripGripStyle.Hidden
End With

Dim mmi1 As New MainMenuItem("Some Options 1", ToolStrip1)

Dim mmi2 As New MainMenuItem("Some Options 2", ToolStrip1)
End Sub

Private Sub ToolStrip1_ItemClicked(sender As Object, e As ToolStripItemClickedEventArgs) Handles ToolStrip1.ItemClicked
If e.ClickedItem.Tag Is Nothing Then
MessageBox.Show("You clicked subitem: " & e.ClickedItem.Text)
End If
End Sub
End Class

Inherits ToolStripButton

Private ChildItems As New List(Of ToolStripButton)
Private ParentToolStrip As ToolStrip = Nothing

Private _Openned As Boolean = False
Public Property Openned As Boolean
Get
Return _Openned
End Get
Set(value As Boolean)
_Openned = value
Me.BackColor = If(_Openned, Color.Red, Color.White)
For Each tsb As ToolStripButton In ChildItems
tsb.Visible = _Openned
Next
End Set
End Property

Public Sub New(txt As String, OwnerToolStrip As ToolStrip)
Me.Text = txt
Me.BackColor = Color.White
Me.Margin = New Padding(0, 1, 0, 0)
Me.Tag = "MainItem"
ParentToolStrip = OwnerToolStrip
End Sub

Public Sub AddChildItem(txt As String, imgPath As String)
Dim tsb As New ToolStripButton(txt)
With tsb
.Image = New Bitmap(imgPath)
.ImageAlign = ContentAlignment.TopCenter
.ImageScaling = ToolStripItemImageScaling.None
.TextAlign = ContentAlignment.BottomCenter
.TextImageRelation = TextImageRelation.ImageAboveText
.Visible = _Openned
End With
End Sub

Protected Overrides Sub OnClick(e As EventArgs)
MyBase.OnClick(e)
Dim currentstate As Boolean = Me.Openned
For Each tsb As ToolStripButton In ParentToolStrip.Items
If tsb.Tag IsNot Nothing AndAlso tsb.Tag.ToString = "MainItem" Then
End If
Next
Me.Openned = Not currentstate
End Sub

Protected Overrides Sub Dispose(disposing As Boolean)
For Each tsb As ToolStripButton In ChildItems
tsb.Dispose()
Next
MyBase.Dispose(disposing)
End Sub
End Class

Here is what it looks and acts like.

If you say it cant be done then ill try it

• Edited by Tuesday, April 24, 2018 9:53 PM
• Marked as answer by Thursday, April 26, 2018 8:21 AM
Tuesday, April 24, 2018 9:50 PM

### All replies

• That is called design. This forum isn't about design.

However you could use a ListBox to contain the Form Objects as Items and when you click on a selected index launch the selected Form I suppose.

Option Strict On

Public Class Form1

Dim f2 As New Form2
Dim f3 As New Form3

Me.Location = New Point(CInt((Screen.PrimaryScreen.WorkingArea.Width / 2) - (Me.Width / 2)), CInt((Screen.PrimaryScreen.WorkingArea.Height / 2) - (Me.Height / 2)))
End Sub

Private Sub ListBox1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ListBox1.SelectedIndexChanged
Dim f2Open As Boolean = False
Dim f3Open As Boolean = False
Select Case ListBox1.SelectedItem.ToString
Case Is = "Form2"
For Each Item As Form In My.Application.OpenForms
If Item.Text = "Form2" Then
f2Open = True
End If
Next
If f2Open = False Then
f2 = New Form2
f2.Show()
End If
Case Is = "Form3"
For Each Item As Form In My.Application.OpenForms
If Item.Text = "Form3" Then
f3Open = True
End If
Next
If f3Open = False Then
f3 = New Form3
f3.Show()
End If
End Select
End Sub
End Class

La vida loca

Monday, April 23, 2018 3:06 PM
• It might be better if you show an image (or link) to what you want and then we give ideas how to do it.

Monday, April 23, 2018 3:33 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows
Monday, April 23, 2018 3:40 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

Here is the image:

Monday, April 23, 2018 3:51 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

Here is the image:

Wow that's pretty. ;)

La vida loca

Monday, April 23, 2018 4:50 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

Yeah. Well that is a common style I have seen but I dont think there is a single control in .net that does that. The menu style could be made up from several controls. Depends on what it does I suppose. What happens when you click the icons on the menu - a new modal form pops up? Or a window on the form?

I can think of several possibilities. Perhaps the tab control can be used vertically? Or a tablelayout control. Even a menustrip. A treeview. DataGridView. All could be possibilities I suppose depending on the other factors...

What is your skill level and what have you done already and what is this for?

Maybe others have ideas.

Monday, April 23, 2018 5:08 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

This is usually called an "Outlook Bar".

You can find samples on Code Project or other sites...

Monday, April 23, 2018 5:09 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

This is usually called an "Outlook Bar".

You can find samples on Code Project or other sites...

Or maybe an AppBar is what I've seen. If that is a Windows Forms Form docked on the left side of the desktop such that all icons and apps are pushed to the right of it. I have a VB.Net project for one but the code is various classes and lengthy although it could be altered to look like what OP desires.

AppBar using C#

La vida loca

Monday, April 23, 2018 8:56 PM
• https://imgur.com/a/bw3k064 something like that when i click on other tabs the slide dows

Here is a thread with an AppBar in it Change the Working Area of a screen. You would have to modify IronRazerz example to contain whatever controls you want to use for launching other Forms.

La vida loca

Tuesday, April 24, 2018 3:13 AM
• That can be done using just a standard MenuStrip or ToolStrip control.  In the image below,  I just use a MenuStrip with a few items added and have set a few properties.  Depending on the way you want your menu to look and function,  you may even want to create your own ToolStripProfessionalRenderer Class and handle drawing the menu and items yourself.

If you say it cant be done then ill try it

Tuesday, April 24, 2018 11:29 AM
• That can be done using just a standard MenuStrip or ToolStrip control.  In the image below,  I just use a MenuStrip with a few items added and have set a few properties.  Depending on the way you want your menu to look and function,  you may even want to create your own ToolStripProfessionalRenderer Class and handle drawing the menu and items yourself.

If you say it cant be done then ill try it

NIce Razerz.

The behavior of the whole thing is important.

I dont know what OP wants but what I want is the whole thing to dock properly. And, you select a top parent level menu item, then that item opens and shows its sub items below and it stays open and fills the height area. Not like a normal default menu that closes when not selected or mouse over etc.

And all the remaining parent level items goto the bottom.

So I am not sure if a menustrip will behave that way?

I was looking at using treeview but need to set the rowhight for the current item to fill the space most things that is not available. It needs to set the entire sub menu child area height and it remains constant and visible and selectable.

Of course that is what I want. Not sure what OP wants.

:)

PS ie:

Tuesday, April 24, 2018 3:10 PM
• I want the same as you
Tuesday, April 24, 2018 3:25 PM
• Hey Tom.  8)

I think I see what you are talking about now.  It is more like an 'accordion' type deal,  where the Items are just Text (the white parts),  and when you select one it unfolds and shows the sub items (the gray part).  I guess I did not look at the image hard enough this morning.

I am sure it could be done with a little work,  I guess I will have to look into that just because I am curious now.  8)

If you say it cant be done then ill try it

Tuesday, April 24, 2018 5:28 PM
• I want the same as you

Who are you talking to,  Me?  Please make it obvious who you are replying to because,  we don't all see the forum the same way.  8)

If you say it cant be done then ill try it

Tuesday, April 24, 2018 5:30 PM
• Hey Tom.  8)

I think I see what you are talking about now.  It is more like an 'accordion' type deal,  where the Items are just Text (the white parts),  and when you select one it unfolds and shows the sub items (the gray part).  I guess I did not look at the image hard enough this morning.

I am sure it could be done with a little work,  I guess I will have to look into that just because I am curious now.  8)

If you say it cant be done then ill try it

There are lots of ways it could behave exactly.

I think it is more like a tab control but vertical. There is only one level of sub items like tabpages.

But I think it was a Microsoft thing with their gui for a while and including outlook. I cant think of an example right now, except outlook although my 2003 outlook does not lool quite the same but behaves as I describe.

Oh yes, one should be able to open them individually or have multiple or all open. So its like a tree view too.

At least thats what I am thinking more or less.

Thats the thing, there are lots of ways it could behave and look.

:)

PS I think you could do it with panels that you change the height. Then you open a full panel. Then panels can have any controls. Like a tab page.

Tuesday, April 24, 2018 6:11 PM
•  Is this the goal.... Something like this with an 'accordion' type effect?

If you say it cant be done then ill try it

• Proposed as answer by Tuesday, April 24, 2018 6:38 PM
Tuesday, April 24, 2018 6:28 PM
•  Is this the goal.... Something like this with an 'accordion' type effect?

If you say it cant be done then ill try it

LOL. Close enough!

My vision is more like tab pages.

One could use multiple panels and put any control on multiple panels. Then just show the panels. Then it fills the whole form. It is the application. You select edit, phone book, contacts, etc from the tabs and then it acordians open to show whatever is on the panel.

PS one could have multiple panels open and there is a vertical scrollbar for the whole thing.
Tuesday, April 24, 2018 6:47 PM
• Here is another idea.

One can put whatever on the panels at design time if desired. I just made buttons in the example for ease of use. Lots of details to work out of course.

Public Class Form5
Private WithEvents CtrlPanel As New Panel With {.Parent = Me, .Tag = 3, .BackColor = Color.DimGray, .AutoScroll = True}
Private pnlHeight As Integer = 25
Private rightBmp As New Bitmap("c:\bitmaps\right.png")
Private leftBmp As New Bitmap("c:\bitmaps\left.png")

BackColor = Color.Chocolate

For i As Integer = 0 To CInt(CtrlPanel.Tag) - 1

Dim pnl As New Panel
pnl.Name = "Panel " & (i + 1).ToString
pnl.Height = pnlHeight
pnl.BackColor = Color.Black
pnl.Top = i * pnlHeight
pnl.Tag = 100

For j As Integer = 1 To 3
Dim btn As New Button
btn.BackgroundImage = CType(rightBmp.Clone, Image)
btn.BackgroundImageLayout = ImageLayout.Zoom
btn.Size = New Size(30, 30)
btn.Top = pnlHeight + 10
btn.Left = j * 50

Next
Next

Form5_Resize(0, Nothing)
End Sub

Private Sub pnlPaint(sender As Object, e As PaintEventArgs)
Dim pnl As Panel = DirectCast(sender, Panel)
Dim rect As Rectangle = pnl.ClientRectangle
rect.Inflate(-1, -1)
e.Graphics.DrawRectangle(Pens.Silver, rect)
e.Graphics.DrawString(pnl.Name, New Font("tahoma", 9), Brushes.AntiqueWhite, 2, 2)

End Sub

Private Sub pnlClick(sender As Object, e As EventArgs)
Dim pnl As Panel = DirectCast(sender, Panel)
pnl.Tag = -CInt(pnl.Tag)

If CInt(pnl.Tag) > 0 Then
pnl.Height = CInt(pnl.Tag)
Else
pnl.Height = pnlHeight

End If
Form5_Resize(0, Nothing)
End Sub

Private Sub Form5_Resize(sender As Object, e As EventArgs) Handles Me.Resize
Dim border As Integer = 10
Dim header As Integer = 30

CtrlPanel.Size = New Size(200, ClientSize.Height - (header + border))

For i As Integer = 1 To CtrlPanel.Controls.Count - 1
CtrlPanel.Controls(i).Top = CtrlPanel.Controls(i - 1).Bottom
Next

CtrlPanel.Invalidate()
End Sub
End Class

Tuesday, April 24, 2018 9:09 PM
•  And here is an example of what I have been doing.  This can be tested by creating a new Form project and adding 1 ToolStrip control to the form.  Everything is done in the code from there so,  you only need to copy the code below and then run/debug the application.

You will need to set the image paths to images you have.  They should all be the same size and I would recommend using png images with transparency.  In this example I used all 64x64 sized images.

I created a (MainMenuItem) class which inherits from a (ToolStripButton) class and did all the work from within that class.  As can be seen in the form's Load event,  all you need to do is create the new (MainMenuItem)s and then add the items to them.  Do this in order as shown,  add the MainMenuItem and then it's child items,  then the next MainMenuItem and it's child items,  and so on.....

Public Class Form1
With ToolStrip1
.BackColor = Color.Gainsboro
.Dock = DockStyle.Left
.GripStyle = ToolStripGripStyle.Hidden
End With

Dim mmi1 As New MainMenuItem("Some Options 1", ToolStrip1)

Dim mmi2 As New MainMenuItem("Some Options 2", ToolStrip1)
End Sub

Private Sub ToolStrip1_ItemClicked(sender As Object, e As ToolStripItemClickedEventArgs) Handles ToolStrip1.ItemClicked
If e.ClickedItem.Tag Is Nothing Then
MessageBox.Show("You clicked subitem: " & e.ClickedItem.Text)
End If
End Sub
End Class

Inherits ToolStripButton

Private ChildItems As New List(Of ToolStripButton)
Private ParentToolStrip As ToolStrip = Nothing

Private _Openned As Boolean = False
Public Property Openned As Boolean
Get
Return _Openned
End Get
Set(value As Boolean)
_Openned = value
Me.BackColor = If(_Openned, Color.Red, Color.White)
For Each tsb As ToolStripButton In ChildItems
tsb.Visible = _Openned
Next
End Set
End Property

Public Sub New(txt As String, OwnerToolStrip As ToolStrip)
Me.Text = txt
Me.BackColor = Color.White
Me.Margin = New Padding(0, 1, 0, 0)
Me.Tag = "MainItem"
ParentToolStrip = OwnerToolStrip
End Sub

Public Sub AddChildItem(txt As String, imgPath As String)
Dim tsb As New ToolStripButton(txt)
With tsb
.Image = New Bitmap(imgPath)
.ImageAlign = ContentAlignment.TopCenter
.ImageScaling = ToolStripItemImageScaling.None
.TextAlign = ContentAlignment.BottomCenter
.TextImageRelation = TextImageRelation.ImageAboveText
.Visible = _Openned
End With
End Sub

Protected Overrides Sub OnClick(e As EventArgs)
MyBase.OnClick(e)
Dim currentstate As Boolean = Me.Openned
For Each tsb As ToolStripButton In ParentToolStrip.Items
If tsb.Tag IsNot Nothing AndAlso tsb.Tag.ToString = "MainItem" Then
End If
Next
Me.Openned = Not currentstate
End Sub

Protected Overrides Sub Dispose(disposing As Boolean)
For Each tsb As ToolStripButton In ChildItems
tsb.Dispose()
Next
MyBase.Dispose(disposing)
End Sub
End Class

Here is what it looks and acts like.

If you say it cant be done then ill try it

• Edited by Tuesday, April 24, 2018 9:53 PM
• Marked as answer by Thursday, April 26, 2018 8:21 AM
Tuesday, April 24, 2018 9:50 PM
• I want the same as you

You want an AppBar or a Form with a control that looks like the image you displayed?

La vida loca

Wednesday, April 25, 2018 12:05 AM