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 imates including extensions .bmp, .gif, .ico, .jpg, .png, .wdp, and .tiff. The application looks like 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 = new BitmapImage(new Uri("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 create 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 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 let you browse the files and 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.

private void RotateButton_Click(object sender, RoutedEventArgs e)

{

    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;

    }

}

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.