TOC

This article is currently in the process of being translated into Spanish (~49% done).

Controles básicos:

The Image control

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 mas adelante en este articulo. 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.

The Source property

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á quando está visible. Ese es un buen ejemplo de la versátilidad del 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!

As you probably know, you can add resource files to your project - they can exist inside your current Visual Studio project and be seen in the Solution Explorer just like any other WPF-related file (Windows, User Controls etc.). A relevant example of a resource file is an image, which you can simply copy into a relevant folder of your project, to have it included. It will then be compiled into your application (unless you specifically ask VS not to do that) and can then be accessed using the URL format for resources. So, if you have an image called "google.png" inside a folder called "Images", the syntax could look like this:

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

These URI's, often referred to as "Pack URI's", are a heavy topic with a lot more details, but for now, just notice that it's essentially made up of two parts:

  • The first part (/WpfTutorialSamples;component), where the assembly name (WpfTutorialSamples in my application) is combined with the word "component"
  • The second part, where the relative path of the resource is specified: /Images/google.png

Using this syntax, you can easily reference resources included in your application. To simplify things, the WPF framework will also accept a simple, relative URL - this will suffice in most cases, unless you're doing something more complicated in your application, in regards to resources. Using a simple relative URL, it would look like this:

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

Loading images dynamically (Code-behind)

Specifying the Image Source directly in your XAML will work out for a lot of cases, but sometimes you need to load an image dynamically, e.g. based on a user choice. This is possible to do from Code-behind. Here's how you can load an image found on the user's computer, based on their selection from an 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);
    }
}

Notice how I create a BitmapImage instance, which I pass a Uri object to, based on the selected path from the dialog. We can use the exact same technique to load an image included in the application as a resource:

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

We use the same relative path as we used in one of the previous examples - just be sure to pass in the UriKind.Relative value when you create the Uri instance, so it knows that the path supplied is not an absolute path. Here's the XAML source, as well as a screenshot, of our Code-behind sample:

<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>

The Stretch property

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 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!