Partilhar via

Como usar o elemento Imagem

  • Artigo

Este exemplo mostra como incluir imagens em um aplicativo usando o elemento Image.

Definir uma imagem

O exemplo a seguir mostra como renderizar uma imagem de 200 pixels de largura. Neste exemplo XAML (Extensible Application Markup Language), a sintaxe do atributo e a sintaxe da marca de propriedade são usadas para definir a imagem. Para obter mais informações sobre sintaxe de atributo e sintaxe de propriedade, consulte Visão geral de propriedades de dependência . Um BitmapImage é usado para definir os dados de origem da imagem e é explicitamente definido para o exemplo de sintaxe da etiqueta de propriedade. Além disso, a DecodePixelWidth do BitmapImage é definida com a mesma largura que a Width do Image. Isso é feito para garantir que a quantidade mínima de memória seja usada renderizando a imagem.

Observação

Em geral, se você quiser especificar o tamanho de uma imagem renderizada, especifique apenas o Width ou o Height mas não ambos. Se você especificar apenas um, a proporção da imagem será preservada. Caso contrário, a imagem pode aparecer inesperadamente esticada ou distorcida. Para controlar o comportamento de alongamento da imagem, use as propriedades Stretch e StretchDirection.

Observação

Ao especificar o tamanho de uma imagem com Width ou Height, você também deve definir DecodePixelWidth ou DecodePixelHeight para o mesmo tamanho respetivo.

A propriedade Stretch determina como a origem da imagem é esticada para preencher o elemento de imagem. Para obter mais informações, consulte a enumeração Stretch.

<!-- Simple image rendering. However, rendering an image this way may not
     result in the best use of application memory. See markup below which
     creates the same end result but using less memory. -->
<Image Width="200" 
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>

<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather than just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

Renderizar uma imagem

O exemplo a seguir mostra como renderizar uma imagem de 200 pixels de largura usando código.

Observação

A definição das BitmapImage propriedades deve fazer-se dentro de um bloco BeginInit e um bloco EndInit.

// Create Image Element
Image myImage = new Image();
myImage.Width = 200;

// Create source
BitmapImage myBitmapImage = new BitmapImage();

// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");

// To save significant application memory, set the DecodePixelWidth or
// DecodePixelHeight of the BitmapImage value of the image source to the desired
// height or width of the rendered image. If you don't do this, the application will
// cache the image as though it were rendered as its normal size rather than just
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;

' Create Image Element
Dim myImage As New Image()
myImage.Width = 200

' Create source
Dim myBitmapImage As New BitmapImage()

' BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg")

' To save significant application memory, set the DecodePixelWidth or  
' DecodePixelHeight of the BitmapImage value of the image source to the desired 
' height or width of the rendered image. If you don't do this, the application will 
' cache the image as though it were rendered as its normal size rather than just 
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200
myBitmapImage.EndInit()
'set image source
myImage.Source = myBitmapImage

Ver também

  • Visão geral da criação de imagens