Dela via

Gör så här: Använd bildelementet

  • Artikel

Det här exemplet visar hur du inkluderar bilder i ett program med hjälp av elementet Image.

Definiera en bild

I följande exempel visas hur du återger en bild som är 200 bildpunkter bred. I det här XAML-exemplet (Extensible Application Markup Language) används både attributsyntax och egenskapstaggsyntax för att definiera bilden. Mer information om attributsyntax och egenskapssyntax finns i Översikt över beroendeegenskaper. En BitmapImage används för att definiera bildens källdata och definieras uttryckligen för syntaxexemplet för egenskapstaggen. Dessutom anges DecodePixelWidth för BitmapImage till samma bredd som Width för Image. Detta görs för att säkerställa att den minsta mängden minne används för att återge bilden.

Not

Om du i allmänhet vill ange storleken på en renderad bild anger du bara Width eller Height men inte båda. Om du endast anger en, bevaras bildens proportioner. Annars kan bilden oväntat verka utdragen eller förvrängd. Om du vill styra bildens stretchbeteende använder du egenskaperna Stretch och StretchDirection.

Not

När du anger storleken på en bild med antingen Width eller Heightbör du också ange antingen DecodePixelWidth eller DecodePixelHeight till samma storlek.

Egenskapen Stretch avgör hur bildkällan sträcks ut för att fylla bildelementet. Mer information finns i Stretch uppräkning.

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

Rendera en bild

I följande exempel visas hur du återger en bild som är 200 bildpunkter bred med hjälp av kod.

Notera

Du måste ange BitmapImage egenskaper inom ett BeginInit och EndInit block.

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

Se även