Image Viewer In WPF

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.