Image Viewer In WPF

Mahesh Chand

8y273.9k29100Article

WPF XAML Silverlight ImageImageViewerView Image in WPFWPF Image Viewer

29 Comments

Join the conversation! Your thoughts help the community grow.

Sagar Pandurang Kap7y ago
Helpful and informative...
Pushparaj R8y ago
Hi sir this use full code sir,
Rushi Mehta8y ago
Nice Article....!
Narayan Sirvi10y ago
Zip file is not latest. Events are missing. Can you please upload latest zip file or source code?
yogendra waghale12y ago
hello mahesh sir i have code for crop image selected area and drageble usning wpf
Sophia Ranjani14y ago
I tried the above mentioned code and i got the following two errors. 1.The name 'ImageViewer1' does not exist in the current context 2.'System.Nullable<bool>' does not contain a defintion for 'ok' and no extension method 'OK' accepting a first argument of type 'System.Nullable<bool>'could be found(are you missing a using directive or an assembly reference?) Please help me .... thanks in advance.
- Pushparaj R8y ago
  Hi sophia ranjani, please try this 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; Nullable<bool> result = dlg.ShowDialog(); if (result == true) { string selectedFileName = dlg.FileName; FileNameLabel.Content = selectedFileName; BitmapImage bitmap = new BitmapImage(); bitmap.BeginInit(); bitmap.UriSource = new Uri(selectedFileName); bitmap.EndInit(); ImageControl.Source = bitmap; } } private void RotateButton_Click(object sender, RoutedEventArgs e) { Microsoft.Win32.SaveFileDialog dlg = new Microsoft.Win32.SaveFileDialog(); string selectedFileName = FileNameLabel.Content.ToString(); if (selectedFileName.Length > 0) { BitmapImage bitmap = new BitmapImage(); bitmap.BeginInit(); bitmap.UriSource = new Uri(selectedFileName); bitmap.Rotation = (Rotation)Enum.Parse(typeof(Rotation), RotationList.SelectionBoxItemStringFormat); bitmap.EndInit(); ImageControl.Source = bitmap; } } private void RotationList_SelectionChanged(object sender, SelectionChangedEventArgs e) { }
suleyman vural15y ago
I could not picture 20 degrees rotation. Can you help?
- suleyman vural15y agoedited
  How do I make the printer to print from an angle of 20 degrees? Please help me!
- suleyman vural15y ago
  I'm using WPF, how can I do this? In addition to the printer at an angle I know how the plot?
- Mahesh Chand15y ago
  There is no option to rotate 20 degree in GDI+. If you're using WPF, you can any angle.
Robert16y ago
I tried copy and paste. It presented problems. I am not a c# programmer and couldn't fix them.
- Mahesh Chand16y ago
  You need to make sure you have a WPF project. Code will not work in Windows Forms or other project types.
- Mahesh Chand16y ago
  You need to make sure you have a WPF project. Code will not work in Windows Forms or other project types.
Robert16y ago
I just finished a WPF application that presents me with a listviewbox of thumbnails from which I can select an image and display the metadata for that image and allow the metadata to be edited. I had wanted to add some basic image manipulation but just don't have the expertise to deal with images. I wanted to add: Rotation - by degree, either plus or minus. Being able to rotate by 90 degrees is good but many of my family pictures were just a little off, maybe a degree or two Cropping Make Black&White Resize Brighten or Lighten the image There are many posts that show how to do some of these things but NONE of them showed how to do it AND SAVE the image. I did find that if you wanted to display the image AND edit it or the metadata it contains you had to use code similar to that below: Dim result As New List(Of MyImage)() ' For Each filename As String In System.IO.Directory.GetFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures)) For Each filename As String In System.IO.Directory.GetFiles(opt.pDefImageLocation) Try If Not String.IsNullOrEmpty(filename.ToString()) Then If Path.GetExtension(filename.ToString) = ".jpg" Then Dim bi As New BitmapImage() bi.BeginInit() bi.UriSource = New Uri(filename.ToString()) bi.CacheOption = BitmapCacheOption.OnLoad bi.EndInit() result.Add(New MyImage(bi, System.IO.Path.GetFileName(filename))) End If End If Catch End Try Next filename Me.Cursor = System.Windows.Input.Cursors.Arrow Return result I look forward to seeing your improvements.
Robert16y ago
Please post a new zip file with your updated VS2010 code. Thank you.
- Mahesh Chand16y ago
  Thank you. One of these days, I will start updating my articles to VS 2010. In the mean time, you can copy and paste code and it should work.
tony turner16y ago
Just wish to thank you for your article, new to wpf xaml and C#, examining your code and commenting each line with its operation, learning by dissection, if your interested can send you a copy when I,m done to see how much I have understood
- Mahesh Chand16y ago
  Thank you Tony. I would love to see your project. Please post it here by adding extension to this article. There is an option at the end of this article where you can add your updated code.
Robert16y ago
You said you added rotation and updated code to vs2010. I can only find the old code. Where is the new??? Thank you,
Christopher Kromkowski16y ago
Hey thanks for great work. I want to ask how to load an image to the wpf application if it is out of the project but the path i relative to the application. I mean something like this: Bitmap b = new Bitmap(".\\MyFolder\\myImage.jpg); ? Because I always get an error that image is out of the project.
mitesh16y ago
Hi Mahesh, My project demands opening a pdf file and do some manipulations on the pdf files such as rotation, zoom-in,zoom-out. Can I use this image control for the same? If not, what is the best approach for WPF to open and manipulate .tif and .pdf files using a common control?
lau lau17y ago
hey, i have downloaded the zip file, i want to ask why i use the code to my homework it said the system.window.forms wrong
- Mahesh Chand17y ago
  What version of Visual Studio are you using? Make sure you have Visual Studio 2008. If you do not have VS 2008, go to MSDN.com and download Visual Studio 2008 Express which is free and then open and run the project.
- Mahesh Chand17y ago
  You need to add reference to Windows.Forms.Dll to your project. By default, this reference is not added in a WPF application. Right click on Project name in Solution Explorer, select Add Reference and then look for System.Windows.Forms.dll
lau lau17y ago
hey, i have downloaded the zip file, i want to ask why i use the code to my homework it said the system.window.forms wrong
venki shan17y ago
hi mahesh, i need to zoom in/out the pictures and rotate at 360 degree pls help me on this..
Henri de Feraudy17y ago
Hi Mahesh, I'd like to be able to zoom in on details in the image, and of course this entails scrolling. Henri
- Mahesh Chand17y ago
  Thanks. I will look into it and see if I can update the project.

Image Viewer

The ImageViewer project is an open source project written using WPF, XAML, and C#. This project allows users to view and manipulate images including extensions .bmp, .gif, .ico, .jpg, .png, .wdp, and .tiff. The application looks like the following and supports viewing and rotation at this time. I am adding more features to this project and will be uploading new features soon. If you plan to work on this project, let me know and we can share the functionality.

Latest Updates: Feb 07, 2010

Project updated to Visual Studio 2010
Cleaned up UI
Added Rotate feature

Features currently I am working on

Image Transformation - Skew, Scale, Translate
GrayScale
Zoom In/Zoom Out

Need Help On

Cool Toolbar buttons
Cool menu options
Bitmap effects

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 Image class is the file an image displays. The Source property is a BitmapImage, which can be converted using the following code:

ImageViewer1.Source = newBitmapImage(newUri("Creek.jpg", UriKind.Relative));

In the above code snippet, UriKind let you set 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 following:

<Window x:Class="WPFImageViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="409" Width="574">
<Grid>
<Label Content="Label" Height="32" HorizontalAlignment="Left" Margin="11,10,0,0" Name="FileNameLabel" VerticalAlignment="Top" Width="393" Background="LightGray" BorderBrush="Gray" BorderThickness="1" />
<Button Content="Browse a File" Height="34" HorizontalAlignment="Left" Margin="410,8,0,0" Name="BrowseButton" VerticalAlignment="Top" Width="119" Foreground="Maroon" FontSize="16" FontFamily="Georgia" Click="BrowseButton_Click" />
<Image Height="305" HorizontalAlignment="Left" Margin="14,53,0,0" Name="ImageControl" Stretch="Fill" VerticalAlignment="Top" Width="390" />
<Button Content="Rotate" FontFamily="Georgia" FontSize="12" Foreground="Maroon" Height="26" HorizontalAlignment="Left" Margin="410,61,0,0" Name="RotateButton" VerticalAlignment="Top" Width="56" Click="RotateButton_Click" />
<ComboBox Height="30" HorizontalAlignment="Right" Margin="0,57,12,0" Name="RotationList" VerticalAlignment="Top" Width="68" SelectedIndex="0" SelectionChanged="RotationList_SelectionChanged">
<ComboBoxItem Content="Rotate0" ContentStringFormat="Rotate0" />
<ComboBoxItem Content="Rotate90" ContentStringFormat="Rotate90" />
<ComboBoxItem Content="Rotate180" ContentStringFormat="Rotate180" />
<ComboBoxItem Content="Rotate270" ContentStringFormat="Rotate270" />
</ComboBox>
</Grid>
</Window>

The Browse button click event handler looks like the following:

privatevoid BrowseButton_Click(object sender, RoutedEventArgs e) {
OpenFileDialog dlg = newOpenFileDialog();
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 = newBitmapImage();
bitmap.BeginInit();
bitmap.UriSource = newUri(selectedFileName);
bitmap.EndInit();
ImageViewer1.Source = bitmap;
}
}

Clicking on the Browse button lets you browse the files and the selected file is displayed in the Viewer.

The Rotate button rotates an image based on the rotate drop down selection. It has Rotate0, Rotate90, Rotate180, and Rotate270 options.

The Rotate button click event handler code is listed below.

privatevoid RotateButton_Click(object sender, RoutedEventArgs e) {
if (selectedFileName.Length > 0) {
BitmapImage bitmap = newBitmapImage();
bitmap.BeginInit();
bitmap.UriSource = newUri(selectedFileName);
bitmap.Rotation = (Rotation) Enum.Parse(typeof(Rotation), RotationList.SelectionBoxItemStringFormat);
bitmap.EndInit();
ImageControl.Source = bitmap;
}
}

Summary

This article showed how to use the Image control of WPF to load and view the image files. I will be working with this Image Viewer for a while and will build a full-fledged image viewer.