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.
Image Class with source property :
<Image Name="ImageViewer1" Source="Creek.jpg" Height="400" Width="400" />
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 Sub BrowseButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim dlg As New OpenFileDialog()
dlg.InitialDirectory = "c:\"
dlg.Filter = "Image files (*.jpg)|*.jpg|All Files (*.*)|*.*"
dlg.RestoreDirectory = True
If dlg.ShowDialog() = System.Windows.Forms.DialogResult.OK Then
Dim selectedFileName As String = dlg.FileName
FileNameLabel.Content = selectedFileName
Dim bitmap As New BitmapImage()
bitmap.BeginInit()
bitmap.UriSource = New Uri(selectedFileName)
bitmap.EndInit()
ImageViewer1.Source = bitmap
End If
End Sub
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.