O controle Image

O controle WPF Image lhe permitirá mostrar imagens dentro de suas aplicações. É um controle versátil com muitas opções e métodos úteis, como você aprenderá neste artigo. Mas antes, vejamos o exemplo mais básico de como incluir uma imagem em um janela:

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

O resultado se parecerá com isto:

A propriedade Source, que utilizamos neste exemplo para especificar a imagem que deve ser exibida, é provavelmente a propriedade mais importante deste controle, então vamos nos aprofundar mais neste assunto para começar.

A propriedade Source

Como você pode notar a partir do nosso primeiro exemplo, a propriedade Source torna fácil a especificação da imagem que deve ser mostrada dentro do controle Image - neste exemplo específico, nós utilizamos uma imagem remota que o controle Image buscará automaticamente e exibirá tão logo esteja visível. Este é um ótimo exemplo de quão versátil é o controle Image, mas em muitas situações, você preferirá embutir as imagens na sua aplicação ao invés de carrega-las a partir de uma fonte remota. Pode-se obter isso facilmente!

Como você provavelmente já sabe, pode-se adicionar arquivos de recursos ao seu projeto - eles podem estar dentro do seu projeto de Visual Studio atual e serem vistos na janela Solution Explorer exatamente como qualquer outro arquivo WPF (Janelas, Controles de Usuários, etc.). Um bom exemplo de um arquivo de recurso é uma imagem que você pode simplesmente copiar para uma pasta relevante do seu projeto para te-la inclusa. Ela então será compilada para sua aplicação (a menos que você especifique ao VS para não compilar) e poderá ser acessada utilizando o formato URL de recursos. Assim, se houvesse uma imagem chamada "google.png" dentro de uma pasta chamada "Images", a sintaxe se pareceria com isto:

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

Essas URI's, geralmente chamadas de "Pack URI's" pertencem a um tópico grande com muito mais detalhes, mas por enquanto basta saber que elas são essencialmente compostas por duas partes:

• A primeira parte (/WpfTutorialSamples;component), em que o nome assembly (WpfTutorialSamples em minha aplicação) é combinado com a palavra "component"
• A segunda parte, em que o caminho relativo até o recurso é especificado: /Images/google.png

Utilizando esta sintaxe, você pode facilmente fazer referência a recursos incluídos em sua aplicação. Para simplificar as coisas, o framework WPF também pode aceitar uma simples URL relativa - isso é suficiente na maioria dos casos, a menos que você esteja realizando algo mais complicado em sua aplicação com relação a recursos. Utilizar uma simples URL relativa se parece com o seguinte:

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

Carregando imagens dinamicamente (Code-behind)

Especificar a Image Source diretamente no seu XAML funcionará em muitos casos, mas algumas vezes é necessário carregar uma imagem dinamicamente, por exemplo baseando-se na escolha de um usuário. Pode-se fazer isto a partir do Code-behind. Veja como você pode carregar uma imagem encontrada no computador do usuário, a partir de uma seleção em um 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);
    }
}

Observe como eu crio uma instância de BitmapImage, onde forneço um objeto Uri, baseado no caminho selecionado a partir da caixa de diálogo. Podemos utilizar a mesma técnica para carregar uma imagem incluída na aplicação em forma de 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);        
}

Utilizamos o mesmo caminho relativo como feito em um dos exemplos anteriores - certifique-se de fornecer o valor UriKind.Relative ao criar a instância de Uri, para que o objeto saiba que o caminho fornecido não é um caminho absoluto. Veja o código-fonte XAML, bem como uma imagem de nosso exemplo de Code-behind:

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

A propriedade Stretch

Depois da propriedade Source, que é importante por razões óbvias, penso que a segunda propriedade mais interessante do controle Image é a Stretch. Ela determina o que acontece quando as dimensões da imagem carregada não combinam exatamente com as dimensões do controle Image. Isso acontece o tempo todo, uma vez que o tamanho das Janelas pode ser controlado pelo usuário e, a menos que seu layout seja muito estático, isso significará que o tamanho dos controles Image também mudará.

Como você pode observar neste próximo exemplo, a propriedade Stretch pode fazer bastante diferença na maneira em que uma imagem é exibida:

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

Um pouco difícil de dizer, mas todas os quatro controles Image mostram a mesma imagem, porém com diferentes valores para a propriedade Stretch. Eis aí como os vários modos funcionam:

• Uniform: este é o modo padrão. A imagem será automaticamente dimensionada para que caiba dentro da área do controle Image. A Proporção de Tela da imagem será preservada.
• UniformToFill: a imagem será dimensionada de modo a preencher toda a área do controle Image. A Proporção de Tela da imagem será preservada.
• Fill: a imagem será dimensionada para que caiba na área do controle Image. A Proporção de Tela NÃO será preservada, de modo que a altura e a largura da imagem serão dimensionadas de maneira independente.
• None: se a imagem for menor do que o controle Image, nada será feito. Se for maior, a imagem será simplesmente cortada para caber na área do controle Image, significando que somente parte dela será mostrada.

Sumário

O controle WPF Image torna fácil a exibição de uma imagem em sua aplicação, quer seja a partir de uma origem remota, de um recurso embutido ou de um computador local, como demonstrado neste artigo.