Introduction
The <Image> element in XAML represents the Image control in WPF that is used to display images. We can also use the Image class in C# and WPF to create an Image control dynamically. The code example in this article shows how to view, stretch, rotate, and manipulate images in a WPF app using C#.
The Image Class
The Image class in C# represents an image control in WPF that is used to load and display an image. The Image control displays .bmp, .gif, .ico, .jpg, .png, .wdp, and .tiff files. If a file is a multi frame image, only the first frame is displayed. The frame animation is not supported by the control.
The Source property of the Image class is the file an image displays. The Source property is a BitmapImage, that can be converted using the following code.
ImageViewer1.Source = new BitmapImage(new Uri("Creek.jpg", UriKind.Relative));
In the preceding code snippet, UriKind lets you specify if the image is relative to the application path or has an absolute path.
I've created a WPF application with two labels, a button, and an Image control. The XAML code looks like this.
<StackPanel Orientation="Horizontal" Background="LightBlue" Height="40">
<Label Margin="10,0,0,0" Height="23" Name="Label1">
Current File:
</Label>
<Label Margin="5,0,0,0" Height="25" Name="FileNameLabel" Width="300" />
<Button Margin="5,0,0,0" Height="23" Name="BrowseButton" Width="75" Click="BrowseButton_Click">
Browse
</Button>
</StackPanel>
<StackPanel >
<Image Name="ImageViewer1" Height="400" Width="400" />
</StackPanel>
The application UI looks like this.
![App UI]()
Figure 1
Now double clock on the Browse button and add an event handler. This is where we will browse a file on the computer using Windows File Dialog. The Browse button click event handler looks like the following:
private void BrowseButton_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog dlg = new OpenFileDialog();
dlg.InitialDirectory = "c:\\";
dlg.Filter = "Image files (*.jpg)|*.jpg|All Files (*.*)|*.*";
dlg.RestoreDirectory = true;
if (dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
string selectedFileName = dlg.FileName;
FileNameLabel.Content = selectedFileName;
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(selectedFileName);
bitmap.EndInit();
ImageViewer1.Source = bitmap;
}
}
Click on the Browse button to browse the files, and the selected file will be displayed in the Viewer.
![Window 1]()
Figure 2
How to view an Image in WPF?
The Image element in XAML represents a WPF Image control and is used to display images in WPF. The Source property takes an image file that will be displayed by the Image control. The following code snippet shows the Flower.jpg file using an Image control.
<Image Source="Flower.jpg" />
You can control the width and height of an image that is being displayed in the Image control by setting its Width and Height properties.
<Image Width="300" Height="200" Source="Flower.jpg" />
One other way to set the Image.Source is by creating a BitmapImage. The following code snippet uses a BitmapImage created from a URI.
How to view an Image in WPF Dynamically?
The Image class in WPF represents an Image control. The following code snippet creates an Image control and sets its width, height, and Source properties.
How to stretch an Image in WPF using Image control?
The Stretch property of the Image describes how an image should be stretched to fill the destination rectangle. A value of Fill will cause your image to stretch to completely fill the output area. When the output area and the image have different aspect ratios, the image is distorted by this stretching. To make an Image preserve the aspect ratio of the image, set this property to Uniform, which is the default value of Stretch.
The StretchDirection property of Image describes how scaling applies to content and restricts the scaling to named axis types. It has three values UpOnly, DownOnly, and Both. The UpOnly value indicates that the image is scaled upward only when it is smaller than the parent. The DownOnly value indicates that the image is scaled downward when it is larger than the parent. Both value stretches the image to fit the parent.
The following code snippet sets Stretch and StretchDirection of an Image control.
How to rotate an Image in WPF?
The Rotation property of BitmapImage is used to rotate an image. It has the four values Rotate0, Rotate90, Rotate180 and Rotate270. The following code snippet rotates an image to 270 degrees.
How to apply grayscale on an Image in WPF?
The FormatConvertedBitmap is used to apply the formatting of images in WPF. The FormatConvertedBitmap.Source property is a BitmapImage that will be used in the formatting process.
This code creates a BitmapImage.
This code snippet creates a FormatConvertedBitmap from the BitmapImage created above.
The DestinationFormat property of FormatConvertedBitmap is used to apply formatting to images. The following code snippet sets the formatting of an image to Gray.
The complete source code looks like this.
How to crop an Image in WPF?
CroppedBitmap is used to crop an image. It takes a BitmapImage as the source and a rectangle that you would like to crop.
The following code snippet crops and displays an image.
private void CropImageButton_Click(object sender, RoutedEventArgs e)
{
// Create a BitmapImage
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(@"C:\Books\Book WPF\How do I\ImageSample\ImageSample\Flower.JPG");
bitmap.EndInit();
// Create an Image
Image croppedImage = new Image();
croppedImage.Width = 200;
croppedImage.Margin = new Thickness(2);
// Create a CroppedBitmap from BitmapImage
CroppedBitmap cb = new CroppedBitmap((BitmapSource)bitmap,
new Int32Rect(20, 20, 100, 100));
// Set Image.Source to cropped image
croppedImage.Source = cb;
// Add Image to Window
LayoutRoot.Children.Add(croppedImage);
}