viernes, mayo 25, 2012

Manejo de archivos de imágenes 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