Início rápido: Imagem e ImageBrush (XAML)

Applies to Windows and Windows Phone

Saiba como integrar imagens ao aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic, incluindo como usar as APIs das duas principais classes XAML: Image e ImageBrush.

Mapa: como este tópico está relacionado aos outros? Veja:

Image e ImageBrush

Para renderizar uma imagem, você pode usar o objeto Image ou ImageBrush. Um objeto Image renderiza uma imagem e um objeto ImageBrush pinta outro objeto com uma imagem. Este exemplo mostra como criar uma imagem usando o objeto Image.


<Image Width="200" Source="licorice.jpg" />

Aqui está o objeto Image renderizado.

Um objeto Image renderizado.

Neste exemplo, a propriedade Source especifica o local da imagem que você deseja exibir. Você pode definir a Source especificando uma URL absoluta (por exemplo,http://contoso.com/myPicture.jpg) ou especificando uma URL relativa à estrutura de empacotamento do seu aplicativo. Para nosso exemplo, colocamos o arquivo de imagem "licorice.jpg" na pasta raiz do projeto e declaramos as configurações do projeto que incluem o arquivo de imagem como conteúdo.

Com o objeto ImageBrush, você pode usar uma imagem para pintar uma área que inclui um objeto Brush. Por exemplo, você pode usar um ImageBrush para o valor da propriedade Fill de um Ellipse ou a propriedade Background de um Canvas.

O exemplo seguinte mostra como usar um ImageBrush para pintar uma Ellipse.


<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Aqui está a Ellipse pintada pelo ImageBrush.

Uma Elipse pintada por um ImageBrush.

Alongando uma imagem

Se você não definir os valores Width ou Height de um objeto Image, ele será exibido com as dimensões da imagem especificada na Source. A definição da Width e da Height cria uma área retangular de conteúdo em que a imagem é exibida. Você pode especificar como a imagem deve preencher essa área de conteúdo usando a propriedade Stretch. A propriedade Stretch aceita estes valores, que a enumeração Stretch define:

  • None: a imagem não alonga para preencher as dimensões de saída. Cuidado com essa configuração de Stretch: se a imagem de origem for maior que a área de conteúdo, sua imagem será recortada e, geralmente, isso não é desejável, pois você não tem controle sobre o visor, como faz com um Clip deliberado.
  • Uniform: a imagem é escalonada para se ajustar às dimensões de saída. Porém, a taxa de proporção do conteúdo é preservada. Esse é o valor padrão.
  • UniformToFill: a imagem é escalonada de forma que preencha completamente a área de saída, mas preserve sua taxa de proporção original.
  • Fill: a imagem é escalonada para se ajustar às dimensões de saída. Como a altura e a largura são escalonadas independentemente, a taxa de proporção original da imagem pode não ser preservada. Isto é, a imagem pode ser distorcida para preencher completamente a área de saída.
Um exemplo de configurações de alongamento.

Recortando uma imagem

Você pode usar a propriedade Clip para recortar uma área da saída da imagem. Você define a propriedade Clip como Geometry. Atualmente, não tem suporte para recorte não retangular.

O próximo exemplo mostra como usar uma RectangleGeometry como a região de recorte de uma imagem. Neste exemplo, definimos um objeto Image com uma Height de 200. Uma RectangleGeometry define um retângulo para a área da imagem que será exibida. A propriedade Rect é definida como "25,25,100,150", que define o início de um retângulo na posição "25,25" com uma largura de 100 e uma altura de 150. Somente a parte da imagem que está dentro da área do retângulo será exibida.


<Image Source="licorice.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Aqui está o objeto Image recortado.

Um objeto Image recortado por um RectangleGeometry.

Aplicando opacidade

Você pode aplicar Opacity a uma imagem, de forma que a imagem seja renderizada semi-transluzente. Os valores de opacidade estão entre 0,0 e 1,0, em que 1,0 é totalmente opaco e 0,0 é totalmente transparente. Este exemplo mostra como aplicar uma opacidade de 0,5 a uma Image.


<Image Height="200" Source="licorice.jpg" Opacity="0.5" />

Aqui está o objeto Image renderizado com uma opacidade de 0,5 e um tela de fundo preto que mostra a opacidade parcial.

Um objeto Imagem com opacidade de 0,5.

Formatos de arquivo de imagem

Image e ImageBrush podem exibir os seguintes formatos de arquivo de imagem:

  • JPEG
  • PNG
  • BMP
  • GIF
  • TIFF
  • JPEG XR
  • ícones (ICO)

A API de Image, BitmapImage e BitmapSource não inclui métodos dedicados para codificar e decodificar formatos de mídia. Todas as operações de codificação e decodificação são internas e irão, no máximo, trazer à tona aspectos de codificação e decodificação como parte dos dados de eventos de carregamento. Caso deseje realizar trabalhos especiais com codificação ou decodificação de imagens (algo que você provavelmente fará se seu aplicativo realizar conversões ou manipulação de imagens), use as APIs disponíveis no namespace Windows.Graphics.Imaging. Essas APIs de geração de imagens podem ser usadas por aplicativos do Tempo de Execução do Windows em C++, C# ou Visual Basic ou por aplicativos do tempo de Execução do Windows em JavaScript. Essas APIs também têm suporte do componente WIC (Windows Imaging Component) do Windows 8.

Para saber mais sobre os recursos do aplicativo e como empacotar as origens de imagem em um aplicativo, veja Definindo recursos de aplicativos.

WriteableBitmap

Um WriteableBitmap fornece uma BitmapSource que pode ser modificada e não usa a decodificação básica baseada em arquivo do WIC. Você pode alterar imagens dinamicamente e renderizar a imagem atualizada. Para definir o conteúdo do buffer de um WriteableBitmap, use a propriedade PixelBuffer para acessar o buffer e use um tipo de buffer de fluxo ou específico da linguagem para preenchê-lo. Para um exemplo de código, veja WriteableBitmap.

RenderTargetBitmap

A classe RenderTargetBitmap está disponível agora no Windows 8.1. Esse classe captura a árvore da interface do usuário XAML de um aplicativo em execução e representa a origem de uma imagem de bitmap. Após a captura, a origem dessa imagem poderá ser aplicada a outras partes do aplicativo, salva como recurso ou dados de aplicativo pelo usuário ou utilizada em outros cenários. Um cenário especificamente útil é a criação de uma miniatura em tempo de execução de uma página XAML para o esquema de navegação, como incluir o link da imagem de um controle Hub. O RenderTargetBitmap tem algumas limitações sobre o conteúdo que vai aparecer na imagem capturada. Para saber mais, veja the API reference topic for RenderTargetBitmap.

Origens de imagens e dimensionamento

Você deve criar origens de imagens em vários tamanhos recomendados, para garantir que o seu aplicativo tenha uma ótima aparência quando o Windows 8 o aumentar. Ao especificar a Source de uma Image, você pode usar uma convenção de nomenclatura que referencie automaticamente o recurso correto da escala atual. Para ter acesso aos detalhes da convenção de nomenclatura e saber mais, consulte Guia de início rápido: usando recursos de arquivo ou imagem.

Para saber mais sobre como desenvolver permitindo o dimensionamento, veja Diretrizes de dimensionamento de acordo com a densidade de pixels.

Image e ImageBrush no código

É comum especificar Image e ImageBrush usando XAML em vez de código. Isso ocorre porque esses elementos costumam ser a saída das ferramentas de design como parte de uma definição da IU XAML.

Se você definir Image ou ImageBrush usando código, use os construtores padrão, depois defina as propriedades relevantes (Image.Source e ImageBrush.ImageSource). Isso requer um BitmapImage (não um URI) quando você os definir usando código. Se a sua origem for um fluxo, use o método SetSourceAsync para inicializar o valor. Se a sua origem for um URI, que inclui conteúdo no seu aplicativo que usa o esquema ms-appx ou ms-resource, use o construtor BitmapImage que leva um URI. Você também pode manipular o evento ImageOpened se houver algum problema de tempo com a recuperação ou decodificação da origem da imagem, quando talvez fosse necessário alternar o conteúdo a ser exibido até que a origem da imagem estivesse disponível. Veja um código de exemplo em Exemplo de imagem XAML.

Observação  Se você definir as imagens usando código, poderá usar a manipulação automática para acessar recursos não qualificados com os qualificadores atuais de escala e cultura, ou você poderá usar ResourceManager e ResourceMap com os qualificadores de escala e cultura para obter esses recursos diretamente. Para saber mais, veja Sistema de gerenciamento de recursos.

Exemplos de imagem

Para obter mais exemplos de uso de imagens nos aplicativos, veja Exemplo de imagens XAML. O Exemplo de desenho baseado em vetor XAML inclui também o uso de uma ImageBrush em sua página Cenário 2.

Tópicos relacionados

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Mapa de aplicativos do Tempo de Execução do Windows em C++
Guia de início rápido: usando recursos de arquivo ou imagem
Exemplo de imagens XAML
Image
BitmapSource

 

 

Mostrar:
© 2014 Microsoft