Jak używać elementu obrazu

W tym przykładzie pokazano, jak dołączać obrazy do aplikacji przy użyciu elementu Image.

Definiowanie obrazu

W poniższym przykładzie pokazano, jak renderować obraz o szerokości 200 pikseli. W tym przykładzie języka XAML (Extensible Application Markup Language) składnia atrybutów i składnia tagu właściwości są używane do definiowania obrazu. Aby uzyskać więcej informacji na temat składni atrybutów i składni właściwości, zobacz Właściwości zależności — omówienie. BitmapImage służy do definiowania danych źródłowych obrazu i jest jawnie zdefiniowany dla przykładu składni tagu właściwości. Ponadto DecodePixelWidth z BitmapImage jest ustawione na taką samą szerokość jak Width z Image. W tym celu należy upewnić się, że minimalna ilość pamięci jest używana podczas renderowania obrazu.

Uwaga / Notatka

Ogólnie rzecz biorąc, jeśli chcesz określić rozmiar renderowanego obrazu, określ tylko Width lub Height, ale nie oba te elementy. Jeśli określisz tylko jeden, współczynnik proporcji obrazu zostanie zachowany. W przeciwnym razie obraz może nieoczekiwanie pojawić się rozciągnięty lub wypaczony. Aby kontrolować zachowanie rozciągania obrazu, użyj właściwości Stretch i StretchDirection.

Uwaga / Notatka

Po określeniu rozmiaru obrazu z Width lub Heightnależy również ustawić DecodePixelWidth lub DecodePixelHeight na taki sam rozmiar.

Właściwość Stretch określa sposób rozciągania źródła obrazu w celu wypełnienia elementu obrazu. Aby uzyskać więcej informacji, zobacz wyliczenie 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>

Renderowanie obrazu

W poniższym przykładzie pokazano, jak renderować obraz o szerokości 200 pikseli przy użyciu kodu.

Uwaga / Notatka

Ustawienie właściwości BitmapImage musi być wykonane w bloku BeginInit oraz 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

Zobacz także

• Przegląd obrazowania