Mostrar archivos de imagen en WPF

Hola Qué Tal…

En esta ocasión quiero comenzar una serie de artículos sobre el manejo de archivos de imágenes con .NET.

En esta primera parte voy a tratar la manera de cargar un archivo de imagen en un contenedor de imagen, en este caso usaré WPF y el control Image que viene incluido en el .NET Framework.

Es común que en ocasiones las aplicaciones requieran de seleccionar archivos y mostrarlos en la interfaz de usuario, bueno, este ejemplo constará de varias partes para lograr el objetivo.

Primeramente será utilizar un OpenFileDialog para seleccionar la imagen que cargaremos en el control image. Obviamente usaremos un botón para esta acción. Una vez seleccionada la imagen deberemos procesarla para utilizarla como un BitmapImage para cargarla en la propiedad Source del control image.

 

Utilizaremos un formulario con un control Images denominado imgFoto, un botón denominado btnFoto como se muestra a continuación:

 

<Window x:Class="EjemplosWPF.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

            <Image x:Name="imgFoto" Width="100" Height="100" Margin="5"/>

            <Button x:Name="btnFoto" Width="100" Height="25"

                    Content="Agregar Foto" Margin="5" Click="btnFoto_Click"/>

        </StackPanel>

    </Grid>

</Window>

 

En el evento click del botón btnFoto irá lo siguiente:

 

private void btnFoto_Click(object sender, RoutedEventArgs e)

{

    if (imgFoto.Source == null)

    {

        OpenFileDialog openFile = new OpenFileDialog();

        BitmapImage b = new BitmapImage();

        openFile.Title = "Seleccione la Imagen a Mostrar";

        openFile.Filter = "Todos(*.*)|*.*|Imagenes|*.jpg;*.gif;*.png;*.bmp";

        if (openFile.ShowDialog() == true)

        {

            b.BeginInit();

            b.UriSource = new Uri(openFile.FileName);

            b.EndInit();

            imgFoto.Stretch = Stretch.Fill;

            imgFoto.Source = b;

 

            btnFoto.Content = "Quitar Foto";

        }

    }

    else

    {

        imgFoto.Source = null;

        btnFoto.Content = "Agregar Foto";

    }

}

 

 Podemos ver que se evalúa si el control imgFoto ya contiene una imagen o no para cambiar el texto del botón, solo por funcionalidad. Además, si desean validar el tamaño de la foto que desean cargar se puede agregar una condición que restrinja esta acción. Quedando el código opcional del evento click del botón btnFoto como sigue:

 

private void btnFoto_Click(object sender, RoutedEventArgs e)

{

    if (imgFoto.Source == null)

    {

        OpenFileDialog openFile = new OpenFileDialog();

        BitmapImage b = new BitmapImage();

        openFile.Title = "Seleccione la Imagen a Mostrar";

        openFile.Filter = "Todos(*.*)|*.*|Imagenes|*.jpg;*.gif;*.png;*.bmp";

        if (openFile.ShowDialog() == true)

        {

            if (new FileInfo(openFile.FileName).Length > 131072)

            {

                MessageBox.Show(

                    "El tamaño máximo permitido de la imagen es de 128 KB",

                    "Mensaje de Sistema",

                MessageBoxButton.OK,

                MessageBoxImage.Warning,

                MessageBoxResult.OK);

                return;

            }

 

            b.BeginInit();

            b.UriSource = new Uri(openFile.FileName);

            b.EndInit();

            imgFoto.Stretch = Stretch.Fill;

            imgFoto.Source = b;

 

            btnFoto.Content = "Quitar Foto";

        }

    }

    else

    {

        imgFoto.Source = null;

        btnFoto.Content = "Agregar Foto";

    }

}

 

En esta parte se restringe el tamaño a 128 Kb, informando al usuario que no es posible cargar imágenes mayores.

 

Bien, esta funcionalidad es simple y básica, sin embargo, lo interesante será ver cómo utilizar esta capacidad para almacenar el contenido de la imagen cuando se utiliza una clase enlazada al control, esto es, tener un “Binding” hacia la propiedad source del control, pero esto lo veremos en el siguiente artículo.

 

Espero que sea de utilidad.

 

Saludos…

 

Octavio Telis

Published Fri, Aug 26 2011 2:31 by Octavio Telis Aynés
Filed under: , ,

Comments

# re: Mostrar archivos de imagen en WPF

Thursday, May 03, 2012 9:17 AM by guarus

Me parece muy bien el ejemplo, y más cuando se está comenzando en el mundo WPF. Estoy haciendo una aplicación y requeria precisamente dicho código, ahora bien, ejecutando paso a paso dicho código, veo que si asigna la imagen pero luego entra nuevamente al evento click, se va por el else y obviamente la borra. A que se debe? Gracias de antemano.

# re: Mostrar archivos de imagen en WPF

Wednesday, May 23, 2012 1:08 AM by Octavio Telis Aynés

Inicialmente, si el control Image no tiene asignada la propiedad source, se ejecutará el código necesario para agregar una foto y asignar la propiedad Source del control Image. Posteriormente, si hace click nuevamente, si el control Image tiene asignada la propiedad source, anulará la propiedad Source, limpiando el control y para poder asignarla nuevamente con otra imagen. Esto con la finalidad de hacer un botón con un efecto "Toggle" para no agregar un boto para agrear y otro para quitar. Es por eso.

Saludos...

Octavio Telis.

# re: Mostrar archivos de imagen en WPF

Thursday, August 30, 2012 8:01 AM by Johan

Gracias brother necesitaba esto, ya que no sabia como hacerlo en WPF, Dios te bendiga y gracias

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above:  
Powered by Community Server (Commercial Edition), by Telligent Systems