TOC

This article has been localized into Spanish by the community.

Controles básicos:

El control Image

El control de WPF Image te permite mostrar imágenes en tus aplicaciones. Es un control muy versátil con muchas opciones y métodos útiles, como verás más adelante en este artículo. Pero primero, vamos a ver el ejemplo más básico de como incluir una imagen en una ventana.

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

El resultado se muestra de la siguiente manera:

La propiedad Source, la cual hemos usado en este ejemplo para especificar la imagen que queremos mostrar, es probablemente la propiedad más importante de este control, así que, para empezar, vamos a sumergirnos en esta propiedad.

La propiedad Source

Como puedes ver en nuestro primer ejemplo, la propiedad Source hace que sea fácil especificar qué imagen debe mostrarse dentro del control de imagen. En este ejemplo específico, usamos una imagen remota, que el control de imagen simplemente buscará y mostrará tan pronto está se vuelva visible. Ese es un buen ejemplo de que tan versatil es el control de Imagen, pero en muchas situaciones, es probable que desee agrupar las imágenes con su aplicación, en lugar de cargarlas desde una fuente remota. ¡Esto se puede lograr con la misma facilidad!

Como probablemente usted sepa, puede agregar archivos de recursos a su proyecto; pueden existir dentro de su proyecto actual de Visual Studio y verse en el Explorador de soluciones como cualquier otro archivo relacionado con WPF (Windows, controles de usuario, etc.). Un ejemplo relevante de un archivo de recursos es una imagen, que simplemente puede copiar en una carpeta relevante de su proyecto, para que se incluya. Luego se compilará en su aplicación (a menos que solicite específicamente a Visual Studio que no lo haga) y luego podrá acceder a él utilizando el formato de URL para los recursos. Entonces, si tiene una imagen llamada "google.png" dentro de una carpeta llamada "Imágenes", la sintaxis podría verse así:

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

Estos URI, a menudo denominados " Pack URI's ", son un tema cargado con muchos más detalles, pero por ahora, solo tenga en cuenta que se compone esencialmente de dos partes:

  • La primera parte ( / WpfTutorialSamples;component ), donde el nombre del ensamblado ( WpfTutorialSamples en mi aplicación) se combina con la palabra "component" (componente)
  • La segunda parte, donde se especifica la ruta relativa del recurso: /Images/google.png

Empleando esta sintaxis, usted puede hacer referencia fácilmente a los recursos incluidos en su aplicación. Para simplificar las cosas, el marco de trabajo de WPF también aceptará una URL simple y relativa , esto será suficiente en la mayoría de los casos, a menos que esté haciendo algo más complicado en su aplicación, en lo que respecta a los recursos. Usando una URL relativa simple, se vería así:

<Image Source="/Images/google.png" />

Cargando imágenes dinámicamente en código de atrás (Code-behind)

Especificar el origen de la imagen directamente en su XAML funcionará en muchos casos, pero a veces necesita cargar una imagen dinámicamente, basándose en una elección del usuario. Esto es posible desde código detrás (Code-behind). Aquí le mostramos cómo puede cargar una imagen que se encuentra en la computadora del usuario, en función de su selección de un OpenFileDialog:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

Observen cómo he creado una instancia de BitmapImage , a la que le paso un objeto Uri , según la ruta seleccionada del cuadro de diálogo. Podemos utilizar exactamente la misma técnica para cargar una imagen incluida en la aplicación como recurso:

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

Usamos la misma ruta relativa que hemos empleado en uno de los ejemplos anteriores, solo asegúrese de pasar el valor UriKind.Relative cuando cree la instancia de Uri, para que sepa que la ruta proporcionada no es una ruta absoluta. Aquí está la fuente XAML, así como una captura de pantalla, de nuestra muestra de código subyacente:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    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:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

La propiedad Stretch

Después de la propiedad "Source", que es importante por razones obvias, creo que la segunda propiedad más importante del control "Image" puede ser la propiedad Stretch (estiramiento). Controla lo que ocurre cuando las dimensiones de la imagen cargada no encajan completamente las dimensiones del control Image. Esto suele pasar todo el tiempo, ya que el tamaño de la ventana puede ser controlada por el usuario y, a menos que el diseño sea estático, esto significa que el tamaño del contro "Image" va a cambiar también.

Como puedes observar en el siguiente ejemplo, la propiedad Stretch puede suponer una gran diferencia en cuanto a como se muestra la imagen.

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    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:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

Puede ser difícil ver la diferencia, pero todos los controles Image muestran la misma imagen, pero con valores diferentes para la propiedad Estiramiento (Stretch). Así es como funcionan los distintos tipos:

  • Uniform: (Uniforme) Este es el modo por defecto. La imagen va a ser escalada para que quepa en el área del control Image. La Relación de aspecto de la imagen se preserva.
  • UniformToFill: (Uniforme hasta llenar) La imagen va a ser escalada para que llene completamente en el área del control Image. La relación de aspecto de la imagen se preserva.
  • Fill: (Llenar) La imagen va a ser escalada para llenar el área del control Image. La relación de aspecto NO se preserva, porque la altura y anchura de la imagen se escalan independientemente.
  • None: (Nada) Si la imagen es más pequeña que el control Image, no pasa nada. Si la imagen es más grande que el control Image, ésta va a ser cortada para llenar el espacio del control Image, lo que quiere decir que solamente parte de la imagen será visible.

Resumen

El control de WPF Image hace fácil mostrar una imagen en tu aplicación ya sea de una fuente remota, un recurso incrustado desde tu ordenador local, tal como ha demostrado este artículo.

This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!