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:
<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>
The application UI looks like Figure 1.
Figure 1.
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. See Figure 2.
Figure 2.
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.