다음을 통해 공유


방법: Image 요소 사용

업데이트: 2007년 11월

이 예제에서는 Image 요소를 사용하여 응용 프로그램에 이미지를 포함시키는 방법을 보여 줍니다.

예제

다음 예제에서는 200픽셀 너비의 이미지를 렌더링하는 방법을 보여 줍니다. 이 XAML(Extensible Application Markup Language) 예제에서는 특성 구문과 속성 태그 구문을 모두 사용하여 이미지를 정의합니다. 특성 구문 및 속성 구문에 대한 자세한 내용은 종속성 속성 개요를 참조하십시오. BitmapImage는 이미지의 소스 데이터를 정의하는 데 사용되고 속성 태그 구문 예제에 명시적으로 정의되어 있습니다. 또한 BitmapImageDecodePixelWidthImageWidth와 같은 너비로 설정됩니다. 이렇게 하는 이유는 이미지 렌더링에 사용되는 메모리 양을 최소화하기 위해서입니다.

참고

일반적으로 렌더링된 이미지의 크기를 지정하려는 경우 WidthHeight를 모두 지정할 필요 없이 하나만 지정하면 됩니다. 둘 중 하나만 지정하면 이미지의 가로 세로 비율이 유지됩니다. 그렇지 않으면 이미지가 예기치 않게 늘어나거나 휘어질 수 있습니다. 이미지가 늘어나는 동작을 제어하려면 StretchStretchDirection 속성을 사용합니다.

참고

Width 또는 Height를 사용하여 이미지의 크기를 지정하는 경우 DecodePixelWidth 또는 DecodePixelHeight도 각각 같은 크기로 설정해야 합니다.

Stretch 속성은 이미지 요소를 채우도록 이미지 소스를 늘이는 방법을 제어합니다. 자세한 내용은 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 then 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>

다음 예제에서는 코드를 사용하여 200픽셀 너비의 이미지를 렌더링하는 방법을 보여 줍니다.

참고

BitmapImage 속성 설정은 BeginInitEndInit 블록 내에서 수행해야 합니다.

' 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 then 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
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 then 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;

참고 항목

작업

Image 요소 샘플

개념

이미징 개요