Visor de imágenes Tumbnails

Descripción general

Código que muestra la forma de mostrar un grupo de imágenes como una colección de tumbnails en la pantalla

[TOC] Tabla de Contenidos

↑↑↑

A modo de introducción

Quiero escribir un programa de manejo de imágenes y quiero mostrar las imágenes en una pantalla como si fueran un conjunto de diapositivas, como un visor de tumbnails. Con Windows Forms es fácil, pero la aplicación quiero escribirla en WPF por lo que necesito saber la forma de mostrar las imágenes en un control listView de Wpf.

Imagen de lo que pretendo conseguir

Imagen de lo que pretendo conseguir

La búsqueda no ha sido nada fácil, he tardado mas de mes y medio en encontrar el código adecuado, y l final lo encontré en la pantalla que mostraba las caratulas de una base de datos de películas de video club.

Para que no se me olvide y sirva de referencia a otros programadores, aquí muestro el código que he logrado adaptar y que funciona como yo quería.

↑↑↑

La clase Imagen 

Imports System.IO
''' <summary>
''' Esta clase representa a una foto
''' </summary>
<Serializable>
Public Class UnaFoto
    Implements System.ComponentModel.INotifyPropertyChanged



    Private _fileInfoImagen As FileInfo = Nothing



#Region "Evento PropertyChanged [Versión 2014-02-13]"


    '-----------------------------------------------------------------------
    ' Declaración del evento usando un EventHandler genérico (Recomendada)
    ' !! Observación !!! Se produce un error al serializar eventos Genéricos
    <NonSerializedAttribute()>
    Public Event PropertyChanged As _
              System.ComponentModel.PropertyChangedEventHandler _
              Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged


    '----------------------------------------------------------------------
    ''' <summary>Función que dispara el evento [PropertyChanged]</summary>
    Protected Overloads Sub OnPropertyChanged(ByVal e As ComponentModel.PropertyChangedEventArgs)
        If e Is Nothing Then
            Throw New ArgumentException("No se admiten valores Nothing")
        End If
        Call OnPropertyChanged(e.PropertyName)
    End Sub



    '----------------------------------------------------------------------
    ''' <summary>Función que dispara el evento [PropertyChanged]</summary>
    ''' <param name=nombreDeLaPropiedadChanged">"
    '''  <para>Se espera una cadena de texto con uno de los siguientes valores:</para>
    '''  <para> a) Una cadena vacía, en este caso la función averiguara el 
    '''            nombre de la propiedad a través de su 
    '''            atributo [CallerMemberName]]</para>
    '''  <para> b) Una cadena de texto con el nombre de 
    '''             la propiedad (Ejemplo, Apellidos") </para>"
    ''' </param>
    ''' <remarks>
    ''' <code>
    '''     system.componentmodel.inotifypropertychanged(VS.95).aspx
    '''          http://msdn.microsoft.com/es-es/library/
    '''     Bibliografía [CallerMemberName>]
    '''          http://msdn.microsoft.com/es-es/library/hh534540.aspx
    ''' </code>
    '''</remarks>
    Protected Overloads Sub OnPropertyChanged(
        <System.Runtime.CompilerServices.CallerMemberNameAttribute>
                   Optional ByVal nombreDeLaPropiedadChanged As String = Nothing)
        ' ----------------------------------
        ' Evitar problemas tontos
        If String.IsNullOrWhiteSpace(nombreDeLaPropiedadChanged) = False Then
            ' Disparar el evento
            RaiseEvent PropertyChanged(
                      Me,
                      New System.ComponentModel.PropertyChangedEventArgs(nombreDeLaPropiedadChanged))
        End If
    End Sub


#End Region


    ''' <summary>
    '''  Obtiene / establece el valor del objeto FileInfo del fichero de la imagen
    ''' </summary>
    Public Property FileInfoImagen As System.IO.FileInfo
        Get
            Return _fileInfoImagen
        End Get
        Set(value As System.IO.FileInfo)
            _fileInfoImagen = value
            Call OnPropertyChanged()
        End Set
    End Property


    ''' <summary>
    '''  Constructor
    ''' </summary>
    ''' <param name=pfileInfoImagen">El valor del objeto FileInfo del fichero de la imagen</param>"
    Public Sub New(ByVal pfileInfoImagen As System.IO.FileInfo)
        FileInfoImagen = pfileInfoImagen
    End Sub


    ''' <summary>
    '''  Obtiene el nombre y la extension de la imagen
    ''' </summary>
    Public ReadOnly Property Name() As String
        Get
            Return _fileInfoImagen.Name
        End Get
    End Property

    ''' <summary>
    '''  Obtiene la ruta completa (directorio + nombre + extension) de la imagen
    ''' </summary>
    Public ReadOnly Property FullName() As String
        Get
            Return _fileInfoImagen.FullName
        End Get
    End Property


    ''' <summary>
    '''  La ruta completa (directorio + nombre + extension) de la imagen
    ''' </summary>
    Public Overrides Function ToString() As String
        Return _fileInfoImagen.FullName
    End Function


End Class

↑↑↑

La coleccion de imagenes 

Imports System.Collections.ObjectModel
''' <summary>
'''  Esta clase representa a una colección de fotos en un directorio
''' </summary>
Public Class ColecccionDeFotos
    Inherits ObservableCollection(Of UnaFoto)

    Private _directorio As System.IO.DirectoryInfo

    Public Sub New()
        Me.New(New System.IO.DirectoryInfo("F:\Fotos\"))
    End Sub

    Public Sub New(path As String)
        Me.New(New System.IO.DirectoryInfo(path))
    End Sub

    Public Sub New(directory As System.IO.DirectoryInfo)
        _directorio = directory
        Update(_directorio)
    End Sub


    Public Property Path() As String
        Get
            Return _directorio.FullName
        End Get
        Set
            If String.Equals(_directorio.FullName, Value) = False Then
                _directorio = New System.IO.DirectoryInfo(Value)
                Update(_directorio)
            End If
        End Set
    End Property


    Private Sub Update(ByVal pdirectorio As System.IO.DirectoryInfo)
        Me.Clear()
        Try
            Dim ficherosDirectorio As System.IO.FileInfo() = pdirectorio.GetFiles

            For Each unFichero As System.IO.FileInfo In ficherosDirectorio
                ' excluir ficheros ocultos -  exclude hidden files 
                If (unFichero.Attributes And System.IO.FileAttributes.Hidden) <> System.IO.FileAttributes.Hidden Then
                    ' excluir ficheros que no sean images
                    If unFichero.Extension.ToLower = ".jpg" OrElse
                       unFichero.Extension.ToLower = ".jpeg" OrElse
                       unFichero.Extension.ToLower = ".png" OrElse
                       unFichero.Extension.ToLower = ".tif" Then
                        'Dim nuevaFoto As New Foto(unFichero)
                        'Add(nuevaFoto)
                        Add(New UnaFoto(unFichero))
                    End If
                End If
            Next

        Catch ex As System.IO.DirectoryNotFoundException
            Throw
        Catch ex As Exception
            Throw
        End Try
    End Sub


    Public ReadOnly Property ListaItemsCollections As ObservableCollection(Of UnaFoto)
        Get
            Return Me
        End Get
    End Property

End Class

↑↑↑

El código Xaml 

<Window x:Class="WindowPruebaSimple" 
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:local="clr-namespace:WpfPruebaDiaCuatroFebrero" 
                 mc:Ignorable="d" 
                 Title="WindowPruebaSimple" 
                 Height="300" Width="300">

    
    <Grid x:Name="PanelPrincipalDeLaVentana" >

        <Grid.Resources >
            <local:ColecccionDeFotos x:Key="ColecccionDeFotosDatos" />
        </Grid.Resources>

        <ListBox x:Name="MyListBox" 
                 ItemsSource="{Binding Source={StaticResource ColecccionDeFotosDatos}}"   
                 IsSynchronizedWithCurrentItem="True" 
                 VirtualizingStackPanel.IsVirtualizing="True" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                 SelectionMode="Extended">


            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding FullName}" Height="200"/>
                </DataTemplate>
            </ListBox.ItemTemplate>

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

        </ListBox>

    </Grid>
    
</Window>

↑↑↑

A.2.Enlaces

[Para saber mas]
[Grupo de documentos]
[Documento Index]
[Documento Start]
[Imprimir el Documento]
© 1997 - - La Güeb de Joaquín
Joaquín Medina Serrano
Ésta página es española
Codificación
Fecha de creación
Última actualización
[HTML5 Desarrollado usando CSS3]