Image Control in WPF

An image can be shown using Microsoft photo viewer, Microsoft Paint or any photo viewing software in windows operating system. But in programming we have to create that from the drawing. If we want to show existing picture then we have to use an in-built control i.e. image control.

Image control is used to display an existing image in WPF programming. The image may be of type bmp, gif, jpg and etc. I have copied an image in my project’s root directory and show that using the below line of code:

<Image Name="imageControl">
<Image.Source>wall.jpg</Image.Source>
</Image>

When we run this project it will show a window containing the image like below:

It will cover all the space provided by default. We can fix this image to the specified location of the fix height and width. The following code will change it of height 200 and width 200.

<Image Name="imageControl" >
<Image.Source>wall.jpg</Image.Source>
<Image.Height>200</Image.Height>
<Image.Width>200</Image.Width>
</Image>

It will show the small image in compare to the above.

The control have all the common properties except some special e.g.

• SnapsToDevicePixels: whether this control should use device-pixels settings.
• Source: get or set the image source for the image.
• Stretch: how an image should be stretched e.g. fill, none, uniform and etc.
• StretchDirection: specifies the direction of stretch i.e. up, down or both.

It have much more methods and events as like other controls. The above line of code can also be written in the c# language in code behind file:

Image imageControl = new Image();
imageControl.Source = new BitmapImage(new Uri("wall.jpg",UriKind.Relative));
imageControl.Height = 200;
imageControl.Width = 200;

It will show the same image as in above XAML code with width and height specified.