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.