VB .NET - Interface de Menu com MenuStrip, SplitContainer, PictureBox e ListView

 Neste artigo vou mostrar como criar uma interface com o usuário usando os controles MenuStrip, SplitContainer, Picturebox e ListView com ícones em uma aplicação Windows Forms usando a linguagem VB .NET.

Nosso objetivo é criar um formulário com um menu de opções que usa uma interface com ícones conforme mostra a figura abaixo:

 

Neste exemplo eu não vou usar a interface MDI. (farei isso em outro artigo)
 

A interface MDI ou Multiple Document Interface usada em aplicações Windows Forms é um conceito antigo e bem difundido. 
A interface MDI funciona como um container que pode conter diversos outros formulários. Um exemplo de aplicação muito 
conhecida que usa essa interface é o Microsoft Word.

 

Recursos usados :

Criando o projeto no VS Community

Abra o VS Community 2015  e clique em New Project;

A seguir selecione Visual Basic -> Windows -> Windows Forms Application;

Informe o nome Menu_ListView e clique no botão OK;

Altere as seguintes propriedades deste formulário:

Vamos agora definir a interface passo a passo:

1 - A partir da ToolBox inclua o controle MenuStrip no formulário frmMenu e defina as seguintes propriedades neste controle

A partir da ToolBox inclua um controle SplitContainer no formulário definindo o seu leiaute como mostrado a seguir:

Vamos incluir o controle ImageList no formulário frmMenu e definir os ícones que iremos usar em nosso projeto.

Após incluir o controle ImageList no formulário defina o tamanho das imagens quer deseja exibir alterando a propriedade ImageSize. Eu vou usar o tamanho: 32; 32

A seguir clique na propriedade Images para abrir o Images Collection Editor e a seguir clique no botão Add selecionando as imagens dos ícones que serão usados:

Agora inclua um controle PictureBox em Panel1 do controle SplitContainer  e defina a propriedade Size Mode igual a StretchImage e clique no link Dock in Parent Container :

Após fazer isso clique no link Choose image e escolha uma imagem para exibir no controle PictureBox clicando em Local Resource e a seguir em Import... :

Inclua também um controle ListView em Panel2 e defina a sua propriedade Small ImageList e Large ImageList igual ao  nome do controle ImageList que acabamos de definir acima.

Clique também no link Dock In Parent Container como mostra a figura :

Altere também a propriedade Name do controle ListView para lvMenu.

Se executarmos o projeto agora iremos obter o seguinte resultado:

Cadê os ícones no ListView ?

Para exibir os ícones vamos incluir um módulo no projeto a partir do menu Project -> Add Module com o nome Menu.vb.

A seguir inclua o código abaixo que define duas funções no módulo.

Module Menu
    Public Sub DefineListview(cListView As ListView, Titulo As String, Icone As Byte, cImageList As ImageList)
        cListView.Width = 350
        cListView.LargeImageList = cImageList
        cListView.SmallImageList = cImageList
        cListView.Items.Add(New ListViewItem(Titulo, Icone))
    End Sub
    Public Sub DefineFormularioAtivo(formulario As Form)
        formulario.Show()
        formulario.Activate()
    End Sub
End Module

A função DefineListView() define o controle ListView e atribuí os ícones definidos no controle ImageList como um Item do ListView - ListViewItem.

A função DefineFormularioAtivo() recebe uma instância de um formulário exibindo e ativando o mesmo.

Agora no evento Load do formulário frmMenu inclua o código que chama a função DefineListView para cada item do menu que deseja exibir:

 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        DefineListview(lvMenu, "Cadastro de Clientes", 0, ImageList1)
        DefineListview(lvMenu, "Contabilidade Geral", 1, ImageList1)
        DefineListview(lvMenu, "Gráficos de Vendas", 2, ImageList1)
        DefineListview(lvMenu, "Configurações", 3, ImageList1)
        DefineListview(lvMenu, "Internet", 4, ImageList1)
        DefineListview(lvMenu, "Ferramentas", 5, ImageList1)
        DefineListview(lvMenu, "Login", 6, ImageList1)
        DefineListview(lvMenu, "Relatorios", 7, ImageList1)
End Sub

Observe que estamos passando os seguintes parâmetros para a função DefineListView:

Agora executando o projeto iremos obter o seguinte resultado:

Temos agora os ícones exibidos no ListView representando cada opção do menu.

Vamos escolher o evento DoubleClick do controle ListView de forma que quando o usuário clicar duas vezes sobre um ícone o respectivo formulário seja chamado.

Para isso inclua um novo formulário no projeto com o nome frmCadastro.vb e defina sua cor de fundo como azul e uma Label com o texto - Cadastro,  altere sua propriedade StartPosition para CenterParent :

Neste formulário vamos definir um método que cria uma instância dele próprio:

Public Class frmCadastro
    Private Shared cForm As frmCadastro = Nothing
    Public Shared Function Instancia() As frmCadastro
        cForm = New frmCadastro()
        Return cForm
    End Function
End Class

Agora no evento DoubleClick do controle ListView vamos incluir o código que irá chamar o formulário quando o usuário clicar duas vezes no respectivo ícone (Vou dar o exemplo apenas para o ícone Cadastro):

Private Sub lvMenu_DoubleClick(sender As Object, e As EventArgs) Handles lvMenu.DoubleClick
        Select Case lvMenu.Items(lvMenu.FocusedItem.Index).SubItems(0).Text
            Case "Cadastro de Clientes"
                DefineFormularioAtivo(frmCadastro.Instancia())
                Exit Select
            Case "Contabilidade Geral"
                Exit Select
            Case "Gráficos de Vendas"
                Exit Select
            Case "Configuração do Sistema"
                Exit Select
            Case "Internet"
                Exit Select
            Case "Ferramentas"
                Exit Select
            Case "Login"
                Exit Select
            Case "Relatórios"
                Exit Select
        End Select
    End Sub

Após o usuário clicar em um ícone identificamos o mesmo e chamamos a função DefineFormularioAtivo() que recebe a instância do formulário criada pelo método Instancia() do respectivo formulário que desejamos exibir.

Ao final teremos o resultado abaixo:

Pegue o projeto completo aqui :  Menu_ListView.zip

E Jesus, tendo ouvido isto, disse-lhes: Os sãos não necessitam de médico, mas, sim, os que estão doentes; eu não vim chamar os justos, mas, sim, os pecadores ao arrependimento.
Marcos 2:17

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti