--- title: "How to: Use the Image Element" description: Learn how to use the Image Element. ms.date: "03/30/2017" ms.custom: devdivchpfy22 dev_langs: - "csharp" - "vb" helpviewer_keywords: - "controls [WPF], Image" - "Image control [WPF]" - "rendering images [WPF]" ms.assetid: 5b92e74b-1b56-4756-ac64-d5e9e08d9854 --- # How to: Use the Image Element This example shows how to include images in an application by using the element. ## Define an image The following example shows how to render an image 200 pixels wide. In this [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] example, both attribute syntax and property tag syntax are used to define the image. For more information on attribute syntax and property syntax, see [Dependency Properties Overview](../advanced/dependency-properties-overview.md). A is used to define the image's source data and is explicitly defined for the property tag syntax example. In addition, the of the is set to the same width as the of the . This is done to ensure that the minimum amount of memory is used rendering the image. > [!NOTE] > In general, if you want to specify the size of a rendered image, specify only the or the but not both. If you only specify one, the image's aspect ratio is preserved. Otherwise, the image may unexpectedly appear stretched or warped. To control the image's stretching behavior, use the and properties. > [!NOTE] > When you specify the size of an image with either or , you should also set either or to the same respective size. The property determines how the image source is stretched to fill the image element. For more information, see the enumeration. [!code-xaml[ImageElementExample_snip#ImageSimpleExampleInlineMarkup](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample_snip/CSharp/ImageSimpleExample.xaml#imagesimpleexampleinlinemarkup)] ## Render an image The following example shows how to render an image 200 pixels wide using code. > [!NOTE] > Setting properties must be done within a and block. [!code-csharp[ImageElementExample_snip#ImageSimpleExampleInlineCode1](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample_snip/CSharp/ImageSimpleExample.xaml.cs#imagesimpleexampleinlinecode1)] [!code-vb[ImageElementExample_snip#ImageSimpleExampleInlineCode1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImageElementExample_snip/VB/ImageSimpleExample.xaml.vb#imagesimpleexampleinlinecode1)] ## See also - [Imaging Overview](../graphics-multimedia/imaging-overview.md)