El control Image

El control de WPF Image et permet mostrar imatges en les teves aplicacions. És un control molt versàtil amb moltes opcions i mètodes útils, com veuràs més endavant en aquest article. Però primer, veurem l'exemple més bàsic de com incloure una imatge en una finestra.

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

El resultat es mostra de la següent manera:

La propietat Source, la qual hem usat en aquest exemple per a especificar la imatge que volem mostrar, és probablement la propietat més important d'aquest control, així que, per a començar, ens submergirem en aquesta propietat.

La propietat Source

Com pots veure en el nostre primer exemple, la propietat Source fa que sigui fàcil especificar quina imatge ha de mostrar-se dins del control d'imatge. En aquest exemple específic, usem una imatge remota, que el control d'imatge simplement buscarà i mostrarà tan aviat està es torni visible. Aquest és un bon exemple que tan versatil és el control d'Imatge, però en moltes situacions, és probable que desitgi agrupar les imatges amb la seva aplicació, en lloc de carregar-les des d'una font remota. Això es pot aconseguir amb la mateixa facilitat!

Com probablement saps, pots agregar arxius de recursos al seu projecte; poden existir dins del seu projecte actual de Visual Studio i veure's en l'Explorador de solucions com qualsevol altre arxiu relacionat amb WPF (Windows, controls d'usuari, etc.). Un exemple rellevant d'un arxiu de recursos és una imatge, que simplement pot copiar en una carpeta rellevant del seu projecte, perquè s'inclogui. Després es compilarà en la seva aplicació (tret que sol·liciti específicament a Visual Studio que no ho faci) i després podrà accedir a ell utilitzant el format d'URL per als recursos. Llavors, si té una imatge anomenada "google.png" dins d'una carpeta anomenada "Imatges", la sintaxi podria veure's així:

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

Aquests URI, sovint denominats "Pack URI's", són un tema carregat amb molts més detalls, però ara com ara, només tingui en compte que es compon essencialment de dues parts:

• La primera part (/WpfTutorialSamples;component), on el nom de l'assemblat (WpfTutorialSamples en la meva aplicació) es combina amb la paraula "component"
• La segona part, on s'especifica la ruta relativa del recurs: /Images/google.png

Emprant aquesta sintaxi, vostè pot fer referència fàcilment als recursos inclosos en la seva aplicació. Per a simplificar les coses, el framework WPF també acceptarà una URL simple i relativa, això serà suficient en la majoria dels casos, tret que estigui fent una cosa més complicada en la seva aplicació, pel que fa als recursos. Usant una URL relativa simple, es veuria així:

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

Carregant imatges dinàmicament en codi de darrere (Code-behind)

Especificar l'origen de la imatge directament en la seva XAML funcionarà en molts casos, però a vegades necessita carregar una imatge dinàmicament, basant-se en una elecció de l'usuari. Això és possible des de codi darrere (Code-behind). Aquí li vam mostrar com pot carregar una imatge que es troba en la computadora de l'usuari, en funció de la seva selecció d'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);
    }
}

Observa com he creat una instància de BitmapImage, a la qual li passo un objecte Uri, segons la ruta seleccionada del quadre de diàleg. Podem utilitzar exactament la mateixa tècnica per a carregar una imatge inclosa en l'aplicació com a recurs:

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

Usem la mateixa ruta relativa que hem emprat en un dels exemples anteriors, només asseguri's de passar el valor UriKind.Relative quan creï la instància de Uri, perquè sàpiga que la ruta proporcionada no és una ruta absoluta. Aquí està la font XAML, així com una captura de pantalla, de la nostra mostra de codi subjacent:

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

Després de la propietat Source, que és important per raons òbvies, crec que la segona propietat més important del control Image pot ser la propietat Stretch. Controla el que ocorre quan les dimensions de la imatge carregada no encaixen completament les dimensions del control Image. Això sol passar tot el temps, ja que la grandària de la finestra pot ser controlada per l'usuari i, tret que el disseny sigui estàtic, això significa que la grandària del control Image canviarà també.

Com pots observar en el següent exemple, la propietat Stretch pot suposar una gran diferència quant a com es mostra la imatge.

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

Pot ser difícil veure la diferència, però tots els controls Image mostren la mateixa imatge, però amb valors diferents per a la propietat Stretch. Així és com funcionen els diferents tipus:

• Uniform: Aquesta és la manera per defecte. La imatge serà escalada perquè càpiga en l'àrea del control Image. La Relació d'aspecte de la imatge es preserva.
• UniformToFill: La imatge serà escalada perquè ompli completament en l'àrea del control Image. La relació d'aspecte de la imatge es preserva.
• Fill: La imatge serà escalada per a omplir l'àrea del control Image. La relació d'aspecte NO es preserva, perquè l'altura i amplària de la imatge s'escalen independentment.
• None: Si la imatge és més petita que el control Image, no passa res. Si la imatge és més gran que el control Image, aquesta serà tallada per a omplir l'espai del control Image, la qual cosa vol dir que solament part de la imatge serà visible.

Resum

El control de WPF Image fa fàcil mostrar una imatge en la teva aplicació ja sigui d'una font remota, un recurs incrustat des del teu ordinador local, tal com ha demostrat aquest article.