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
