Display Image In WPF using XAML and C#

ImageViewer1.Source = new BitmapImage(new Uri("Creek.jpg", UriKind.Relative));  

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

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;  
    }  
}  

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);  
}