Trabalhando com Arquivos e Diretórios – Parte III

 

Bem pessoal,

 

Pra fechar com chave de ouro esta nossa seqüência de tutoriais sobre arquivos e diretórios, vamos criar uma galeria de imagens, ou fotos se você preferir.

 

Geralmente as galerias que existem na Web estão vinculadas a uma base de dados. Nossa galeria não vai necessitar de nenhuma base de dados, somente de arquivos e diretórios.

 

Usaremos o mesmo projeto anterior. Crie um novo arquivo chamado GaleriaDeImagens.aspx.

 

 

Vamos organizar nossa interface. A idéia é que as miniaturas estejam no rodapé ou na lateral da página, e o local onde aparecerá as fotos deverá ficar mais ao centro. Veja:

 

 

Reparem que dividi a página usando 3 Panels. Você pode fazer assim se preferir ou usar tabelas. No painel de informações não haverá dados dinâmicos, somente uma informação simbólica sobre o álbum.

 

Agora vamos inserir os WebControls necessários. No painel esquerdo devemos inserir um DataGrid, chamado dgArquivos.

 

 

No painel central devemos inserir um objeto Image.

 

 

O nome deve deve ser ImgCentral. Você deve redimensionar esta imagem para que fique em uma boa visualização quando for executar a aplicação, veja:

 

 

Voltando ao DataGrid, selecione-o e vá em Property Builder. Clique em columns. Desmarque a opção para gerar colunas automaticamente, vamos inserir 2 colunas.

 

A primeira coluna é a que possui o botão para selecionar a imagem, veja as configurações:

 

 

A próxima coluna é a que contém a miniatura da imagem. Ela é uma TemplateColumn:

 

 

Não precisa fazer nenhuma alteração para esta coluna, apenas clique em Ok. Agora iremos inserir o Image dentro da TemplateColumn criada. Clique com o botão direito sobre o DataGrid, escolha Edit Template, Column[1].

 

 

Abra a ToolBox e arraste um objeto Image para a seção ItemTemplate do DataGrid.

 

 

Faça alguns ajustes no tamanho desta imagem:

 

 

Ainda com a imagem selecionada,  na caixa de propriedades clique em DataBindings. Na caixa que se abrirá, selecione a esquerda a opção ImageURL, depois expanda o item Container, e selecione a opção DataItem:

 

 

Marque a opção Custom Binding expression, e digite de acordo com a imagem abaixo:

 

 

Clique em Ok.

 

O que fizemos neste trecho foi simples. Apenas estamos configurando o objeto Image para interagir com os dados do DataGrid. Indicamos que o caminho da imagem será mostrado através do campo “FullName” que obtemos na listagem dos arquivos.

 

Agora vamos popular este DataGrid com um método que criamos no tutorial passado.

 

Private Sub ListarArquivos()

        'Está buscando as imagens da pasta de papéis de parede do Windows

        Dim dir As New DirectoryInfo("C:\WINDOWS\Web\Wallpaper")

        dgArquivos.DataKeyField = "FullName"

        dgArquivos.DataSource = dir.GetFiles()

        dgArquivos.DataBind()

    End Sub

 

Vejam que estou buscando as imagens que estão na pasta de papéis de parede do Windows, isto porque, não possuo muitas imagens no meu computador que enriqueçam este exemplo, mas você pode utilizar qualquer imagem que quiser. Chame este método no Page_load:

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        If Not Page.IsPostBack Then

            ListarArquivos()

        End If

    End Sub

 

Façamos um teste:

 

 

Funcionou bem, mas vejam que as imagens do DataGrid estão excedendo os limites do Panel. Para resolver isso basta acrescentar um parâmetro no estilo deste Painel, veja:

 

<asp:Panel id="Panel1" style=" Z-INDEX: 102; LEFT: -16px; OVERFLOW: auto; POSITION: absolute; TOP: 56px"

 

runat="server" Width="148px" Height="472px" BackColor="Tan">

 

O atributo em destaque de verde faz com que este objeto passe a ter suas próprias barras de rolagem caso seu conteúdo exceda os limites da fronteira. Fazendo o teste:

 

 

Agora basta apenas acrescentar uma linha de código para nossa galeria ficar completa.

 

Dê um duplo clique sobre o DataGrid para ele acionar a guia de código.  No evento SelectedIndexChanged insira o seguinte código:

 

Private Sub dgArquivos_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles dgArquivos.SelectedIndexChanged

        imgCentral.ImageUrl = dgArquivos.DataKeys(dgArquivos.SelectedIndex)

    End Sub

 

Neste trecho estamos fazendo com que o objeto Image receba como a URL a imagem do DataGrid, por isso usamos seu elemento de chave-primária (DataKeys).

 

Execute e veja se está funcionando:

 

 

Vejam que está ok.

 

Encerramos por aqui esta seqüência de tutoriais, espero que tenham gostado.

 

Caso queiram mandar sugestões, o endereço de e-mail é lanodecastro@hotmail.com

 

Abraços,

 

Lano de Castro