Using XAML Image in WPF

XAML Image in WPF

The attached project with this article is a simple Image Viewer that allows users to browse an image and display it in WPF and XAML.

The Image Class

The Image class is used to load and view an image in WPF. This class displays .bmp, .gif, .ico, .jpg, .png, .wdp and .tiff files. If a file is a multiframe image, only the first frame is displayed. The frame animation is not supported by this class.

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


Figure 1.

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.


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.

<Image Width="300">
    <Image.Source>
        <BitmapImage DecodePixelWidth="200"  UriSource="Flower.jpg" />
    </Image.Source>
</Image>

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.

private void CreateViewImageDynamically()
{
    // Create Image and set its width and height
    Image dynamicImage = new Image();
    dynamicImage.Width = 300;
    dynamicImage.Height = 200;

    // Create a BitmapSource
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(@"C:\Books\Book WPF\How do I\ImageSample\ImageSample\Flower.JPG");
    bitmap.EndInit();

    // Set Image.Source
    dynamicImage.Source = bitmap;

    // Add Image to Window
    LayoutRoot.Children.Add(dynamicImage);
}

How to stretch Image in WPF using Image control

The Stretch property of 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, that 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 the 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. The Both value stretches the image to fit the parent.

The following code snippet sets Stretch and StretchDirection of an Image control.

private void CreateViewImageDynamically()
{
    // Create Image and set its width and height
    Image dynamicImage = new Image();
    dynamicImage.Stretch = Stretch.Fill;
    dynamicImage.StretchDirection = StretchDirection.Both;
    dynamicImage.Width = 300;
    dynamicImage.Height = 200;

    // Create a BitmapSource
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(@"C:\Books\Book WPF\How do I\ImageSample\ImageSample\Flower.JPG");
    bitmap.EndInit();

    // Set Image.Source
    dynamicImage.Source = bitmap;

    // Add Image to Window
    LayoutRoot.Children.Add(dynamicImage);
}

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.

<Image Width="300">
    <Image.Source>
        <BitmapImage DecodePixelWidth="200"  UriSource="Flower.jpg" Rotation="Rotate180" />
    </Image.Source>
</Image>

How to apply gray scale on an Image in WPF

The FormatConvertedBitmap is used to apply 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.

BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(@"C:\Books\Book WPF\How do I\ImageSample\ImageSample\Flower.JPG");
bitmap.EndInit();

This code snippet creates a FormatConvertedBitmap from the BitmapImage created above.

FormatConvertedBitmap grayBitmapSource = new FormatConvertedBitmap();
grayBitmapSource.BeginInit();
grayBitmapSource.Source = bitmap;

The DestinationFormat property of FormatConvertedBitmap is used to apply formatting to images. The follow code snippet sets the formatting of an image to Gray.

grayBitmapSource.DestinationFormat = PixelFormats.Gray32Float;
grayBitmapSource.EndInit();

The complete source code looks like this.

private void GrayScaleButton_Click(object sender, RoutedEventArgs e)
{
    // Create a BitmapSource
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(@"C:\Books\Book WPF\How do I\ImageSample\ImageSample\Flower.JPG");
    bitmap.EndInit();

    // Create a FormatConvertedBitmap
    FormatConvertedBitmap grayBitmapSource = new FormatConvertedBitmap();

    // BitmapSource objects like FormatConvertedBitmap can only have their properties
    // changed within a BeginInit/EndInit block.
    grayBitmapSource.BeginInit();

    // Use the BitmapSource object defined above as the source for this new
    // BitmapSource (chain the BitmapSource objects together).
    grayBitmapSource.Source = bitmap;

    // Key of changing the bitmap format is DesitnationFormat property of BitmapSource.
    // It is a type of PixelFormat. FixelFormat has dozens of options to set
    // bitmap formatting.
    grayBitmapSource.DestinationFormat = PixelFormats.Gray32Float;
    grayBitmapSource.EndInit();

    // Create a new Image
    Image grayImage = new Image();
    grayImage.Width = 300;
    // Set Image source to new FormatConvertedBitmap
    grayImage.Source = grayBitmapSource;

    // Add Image to Window
    LayoutRoot.Children.Add(grayImage);

}

How to crop an Image in WPF

CroppedBitmap is used to crop an image. It takes a BitmapImage as 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);
}