Atribuindo imagens aos itens do ListView Tutorial-03

O controle ActiveX ImageList.

As imagens de demonstração de amostra.

1. 
   Tutorial de controle ListView-01.
   
2. 
   Tutorial de controle ListView-02.
   

Dados de origem e formulário de demonstração.

1. 
   Crie uma nova consulta SELECT com o SQL fornecido abaixo e salve-a com o nome EmployeesQ .
   

   SELECT [TitleOfCourtesy] & " " & [FirstName] & " " & [LastName] AS [Employee Name], 
   Employees.EmployeeID, 
   Employees.Title, 
   Employees.HireDate, 
   Employees.Address, 
   Employees.City, 
   Employees.Region, 
   Employees.PostalCode, 
   Employees.Country, 
   Employees.HomePhone, 
   Employees.Extension, 
   Employees.Notes
   FROM Employees;
   

2. 
   Se a estrutura da sua tabela Employees for diferente, não importa. Apenas para o primeiro valor de coluna, combinei três valores de coluna para formar o [Nome dos funcionários] como a primeira coluna. Outros valores de nome de coluna você pode tomar como você os tem e em qualquer ordem, todos eles ou menos como você quiser.
   
3. 
   Crie um novo formulário e abra-o no modo Design.
   
4. 
   Insira um Controle ListView da Microsoft da Lista de controles ActiveX.
   
5. 
   Insira um Controle ImageList da Microsoft também da Lista de controles ActiveX.
   
6. 
   Redimensione o controle ListView como a imagem de exemplo no formulário abaixo. Mova o controle ImageList e coloque-o no canto superior direito do controle ListView, conforme mostrado na imagem. Você pode colocá-lo em qualquer lugar em um local conveniente no formulário. Ele não aparecerá no formulário quando o formulário estiver no modo de exibição normal.
   
   • 
     Selecione o Controle ListView e exibir a folha de propriedades.
     
   • 
     Altere o Nome Valor da propriedade para ListView1.
     
   • 
     Selecione o Controle ImageList , exiba sua folha de propriedades e altere o Nome Valor da propriedade para ImageList0 .
     
   • 
     Observação: Ambos os controles acima têm suas próprias folhas de propriedades dedicadas. Seus nomes e valores de propriedade também podem aparecer na Folha de Propriedades do Access. Se fizermos algumas alterações na folha de propriedades do Access, todas elas podem não ser atualizadas nos controles ListView e ImageList. Temos que fazer alterações na própria Folha de Propriedades do Controle.
     

     Folha de propriedades do controle ListView.

7. 
   Clique com o botão direito do mouse no controle ListView, realce o Objeto ListViewCtrl opção na lista exibida e selecione Propriedades. O Geral A guia da folha de propriedades do controle ListView se parecerá com a imagem fornecida abaixo.
   
8. 
   Altere os valores da propriedade na Guia Geral como mostrado na imagem acima.
   
   Em primeiro lugar, carregaremos os dados dos Funcionários no controle ListView.
   

   O código VBA do módulo de formulário

9. 
   Copie e cole o seguinte código VBA no módulo de classe do formulário:
   

   Option Compare Database
   Option Explicit
   
   Dim lvwList As MSComctlLib.ListView
   Dim lvwItem As MSComctlLib.ListItem
   Dim ObjImgList As MSComctlLib.ImageList
   Dim db As DAO.Database
   Dim rst As DAO.Recordset
   
   
   Private Sub cmdClose_Click()
      DoCmd.Close acForm, Me.Name
   End Sub
   
   Private Sub Form_Load()
    Call LoadListView("EmployeesQ")
   End Sub
   
   Private Sub LoadListView(ByVal tblName As String)
       Dim strFldName As String
       Dim intCounter As Integer
       Dim j As Integer
       Dim strLabel As String
   
   'Assign ListView Control on Form to lvwList Object
   Set lvwList = Me.ListView1.Object
   'Set ObjImgList = Me.ImageList0.Object
       
   'Assign Form Header labels Caption Text
    strLabel = UCase(tblName) & " " & "IN LISTVIEW CONTROL - TUTORIAL-03"
    Me.Label8.caption = strLabel
    Me.Label9.caption = strLabel
    
    With lvwList
       '.Icons = ObjImgList
       '.SmallIcons = ObjImgList
       '.ColumnHeaderIcons = ObjImgList
       .Font = "Verdana"
       .Font.Size = 10
       .Font.Bold = True
    End With
    
    Set db = CurrentDb
    Set rst = db.OpenRecordset(tblName, dbOpenSnapshot)
    
    'Create Column Headers for ListView
    With lvwList
       .ColumnHeaders.Clear 'initialize header area
       For j = 0 To rst.Fields.Count - 1
           strFldName = rst.Fields(j).Name
      'Syntax:
      '.ColumnHeaders.Add Index, Key, Text, Width, Alignment, Icon
           .ColumnHeaders.Add , , strFldName, iif(j=0,3200,2000)
       Next
    End With
    
    'Initialize ListView Control
     While lvwList.ListItems.Count > 0
           lvwList.ListItems.Remove (1)
     Wend
   
    With lvwList
    Do While Not rst.EOF And Not rst.BOF
   
      'Syntax  .ListItems.Add(Index, Key, Text, Icon, SmallIcon)
           Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value, "")))
           
      'Add next columns of data as sub-items of ListItem
           With lvwItem
      'Syntax     .Add Index,Key,Text,Report Icon,TooltipText
            For j = 1 To rst.Fields.Count - 1
               .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, ""))
            Next
   
          End With
          rst.MoveNext
   Loop
   rst.Close
       'reset lvwItem object
       Set lvwItem = Nothing
   End With
   
   Set rst = Nothing
   Set db = Nothing
   End Sub
   
   

   
   Observação: As linhas de VBA de cor vermelha do controle ImageList são comentadas de execução por enquanto e vamos habilitá-las em breve.
   
10. 
    Salve seu formulário com o nome frmEmployees.
    
11. 
    Abra o formulário no modo de exibição normal.
    
    Os Funcionários A listagem de registros do Q Query será semelhante à seguinte imagem:
    

Revisão do código VBA

• 0 - lvwColumnLeft
• 1 - lvwColumnRight
• 2 - lvwColumnCenter

• 
  Clique em Inserir coluna Button, digite algum nome de coluna temporário na caixa de texto abaixo.
  
• 
  Clique no botão Alinhamento Propriedade e veja as opções acima.
  
• 
  Clique no botão Remover coluna Botão para excluir o nome da coluna temporária.
  
• 
  Observação: Se você quiser adicionar rótulos de cabeçalho de coluna manualmente, em vez de carregar nomes de campo por meio de código VBA, digite-os um por um aqui. Eles aparecerão como rótulos de cabeçalho de coluna quando você exibir dados.
  

O controle ImageList.

'Assign ListView Control on Form to lvwList Object
Set lvwList = Me.ListView1.Object
'Set ObjImgList = Me.ImageList0.Object
    
'Assign Form Header labels Caption Text
 strLabel = UCase(tblName) & " " & "IN LISTVIEW CONTROL - TUTORIAL-03"
 Me.Label8.caption = strLabel
 Me.Label9.caption = strLabel
 
 With lvwList
    '.Icons = ObjImgList
    '.SmallIcons = ObjImgList
    '.ColumnHeaderIcons = ObjImgList
    .Font = "Verdana"
    .Font.Size = 10
    .Font.Bold = True
 End With
 

Sobre o envio de imagens.

• Se você tiver imagens grandes e quiser manter o tamanho original da imagem, selecione Personalizado Opção.
• Selecionar qualquer uma das outras opções reduzirá a imagem ao tamanho selecionado. Isso pode reduzir a qualidade da imagem. O uso de imagens muito grandes pode ocupar mais espaço no controle ListView quando exibido.
• As imagens do tipo ícone serão mais ideais para uso.
• Experimente com imagens grandes, pequenas e muito pequenas e com diferentes opções para obter alguma experiência na seleção de imagem/opção correta para suas necessidades.

1. Carregar imagens do disco por meio do procedimento VBA.

  
  Set objImgList = Me.ImageList0.Object
  objImgList.ListImages.Clear
  
strFolder = "D:\Access\TreeView\"
With objImgList
    With .ListImages
         .Add Index:=1, Key:="FolderClose", Picture:=LoadPicture(strFolder & "folderclose2.bmp")
         .Add Index:=2, Key:="FolderOpen", Picture:=LoadPicture(strFolder & "folderopen2.bmp")
         .Add Index:=3, Key:="ArrowHead", Picture:=LoadPicture(strFolder & "arrowhead.bmp")
    End With
End With

With tvw 'TreeView Control
    .ImageList = objImgList 'assign imagelist Object to TreeView Imagelist Property
End With

         .Add 1, "FolderClose", LoadPicture(strFolder & "folderclose2.bmp")

2. Carregando imagens do disco manualmente.

1. 
   Abra frmFuncionários na visão de projeto.
   
2. 
   Clique com o botão direito do mouse no controle ImageList, realce ImageListCtrl Object opção e selecione Propriedades.
   
3. 
   No Geral selecione a guia Personalizado Opção para fazer upload de imagens com a resolução original.
   
   O Geral visualização guia do controle ImageList.
   
   As Imagens guia Visualização do controle ImageList
   
   Observação: Depois de experimentar as imagens carregadas no controle ListView, se você quiser experimentar outras opções 48 x 48, 32 x 32, 16 x 16, você deve remover todas as imagens carregadas primeiro e depois ir para o Geral guia, selecione a opção necessária e, em seguida, carregue as imagens novamente. As imagens selecionadas serão reduzidas ao tamanho da imagem selecionada.
   
   Como você pode ver na guia de imagens de amostra, carreguei duas imagens selecionando Inserir imagem Botão de comando e escolhendo as imagens do meu disco.
   
   A primeira imagem está no estado selecionado e ligeiramente na posição elevada. O controle Index mostra o valor 1 e a caixa de texto Key mostra o texto First . O valor Index aparecerá automaticamente, mas o valor Key (algum valor significativo que você pode memorizar facilmente e relacionar a imagem aos dados) pode ser inserido manualmente.
   
   Podemos usar o número do índice ou o valor do texto da chave no Ícone e no SmallIcon Parâmetro de ListItems.Add() método.
   
   Mesmo que você planeje usar a sequência numérica do índice, a sequência de upload de imagem deve ser sincronizada com os dados que você planeja carregar no controle ListView, como o nome dos funcionários deve corresponder às fotos na sequência correta.
   
   Um método melhor no caso dos Funcionários, seu nome pode ser usado como texto-chave e muito fácil de relacionar com o registro. As imagens generalizadas não precisam corresponder a esse tipo de verificação de relacionamento, mas seus nomes de chave ajudarão a indicar o que elas fazem, como folder_closed ou folder_opened .
   
4. 
   Clique nas Imagens aba.
   
5. 
   Clique em Inserir Imagem e encontre seu D:\Access\Image1.bmp imagem e selecione-a, clique no botão Abrir Botão para carregar a imagem no controle ImageList.
   
6. 
   Digite algum valor de texto na Chave caixa de texto (os valores-chave devem ser exclusivos).
   
7. 
   Repita as etapas 5 e 6 para a segunda imagem, digite o valor-chave.
   
   Estamos prontos com nosso controle ImageList com imagens de amostra e prontos para exibi-las no controle ListView.
   

   Atribuindo objeto ImageList às propriedades do objeto ListView.

   
   As seguintes propriedades do objeto ListView devem ser atribuídas com o objeto ImageList para usar as referências de imagem no controle ListView:
   
   1. ListView.ColumnHeaderIcons
   2. ListView.Ícones
   3. ListView.SmallIcons
   
   A próxima etapa é atribuir o Objeto ImageList para o objeto ListView necessário no código VBA por meio das propriedades do objeto:lvwList .ColumnHeaderIcons , lvwLista .Ícones , lvwLista .smallIcons antes de podermos usar as referências de imagem (valores de índice ou chave) no ColumnHeaders.Add() , ListItems.Add() e ListSubItems.Add() métodos. Já adicionamos o código VBA necessário no programa principal e os mantivemos desabilitados. Tudo o que precisamos fazer é habilitar essas linhas de código removendo o símbolo de comentário delas e adicionando as referências de imagem necessárias no Adicionar acima parâmetros do método.
   
8. Remova os símbolos de comentário ( ' ) de todas as quatro linhas de código VBA mostradas acima com a cor vermelha no LoadListView() Procedimento.
9. Modifique as seguintes instruções, mostradas com cor vermelha no programa principal LoadListView() conforme mostrado com o Índice de ícones número 1 e 2 no Ícone e SmallIcon posições de parâmetro, respectivamente, como no segmento de código com letras pretas em negrito dadas abaixo:

    With lvwList
    Do While Not rst.EOF And Not rst.BOF
   
      'Syntax  .ListItems.Add(Index, Key, Text, Icon, SmallIcon)
          ' Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,"")))
          'Change to 
            Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,"")), 1, 2)
           
      'Add next columns of data as sub-items of ListItem
           With lvwItem
      'Syntax     .Add Index,Key,Text,Report Icon,TooltipText
            For j = 1 To rst.Fields.Count - 1
              ' .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, ""))
              'Change to           
                .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, "")),,"Click"
            Next
   
          End With
          rst.MoveNext
   Loop
   rst.Close

0 - lvwIcon View

2 - lvwList View

Baixe o banco de dados de demonstração.

1. Tutorial de controle do Microsoft TreeView
2. Criando menu de acesso com controle TreeView
3. Atribuindo imagens a nós TreeView
4. Atribuindo imagens aos nós TreeView-2
5. Marca de seleção de controle TreeView Adicionar exclusão
6. Acesso suspenso do TreeView ImageCombo
7. Reorganizar nós TreeView por arrastar e soltar
8. Controle de ListView com MS-Access TreeView
9. Eventos de arrastar e soltar do controle ListView
10. Controle TreeView com subformulários