Display Images in an Image Viewer - WPF C#

This tutorial shows how to load, display, and save images using the LEADTOOLS SDK in a WPF C# application.

Required Knowledge

Get familiar with the basic steps of creating a project by reviewing Add References and Set a License Tutorial, before working on the Display Images in an Image Viewer - WPF C# tutorial.

Create the Project and Add LEADTOOLS References

In Visual Studio, create a new WPF C# project, and add the below necessary LEADTOOLS references.

The references needed depend upon the purpose of the project. References can be added by one or the other of the following two methods (but not both). For this project, the following references are needed:

If using NuGet references, this tutorial requires the following NuGet packages:

• Leadtools.Formats.Raster.Common
• Leadtools.Viewer.Controls.Wpf

If local DLL references are used, the following DLLs are needed. The DLLs are located at <INSTALL_DIR>\LEADTOOLS21\Bin\Dotnet4\x64:

• Leadtools.dll
• Leadtools.Codecs.dll
• Leadtools.Codecs.Cmp.dll
• Leadtools.Codecs.Fax.dll
• Leadtools.Codecs.Tif.dll
• Leadtools.Controls.Wpf.dll

For a complete list of which Codec DLLs are required for specific file formats, refer to File Format Support.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to [Setting a Runtime License.

There are two types of runtime licenses:

• Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
• Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS NuGet and local references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Initialize the Image Viewer

Now that the LEADTOOLS references have been added to the project and the license has been set, coding can begin.

In Solution Explorer, open the MainWindow.xaml file and add the following XAML code inside the main grid.

    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"></RowDefinition> 
            <RowDefinition Height="*"></RowDefinition> 
        </Grid.RowDefinitions> 
        <Grid Grid.Row="1" Name="imageViewerGrid"> 
        </Grid> 
    </Grid> 

After the above XAML code is added, open MainWindow.xaml.cs in the Solution Explorer, then add a new method called InitViewer(). Call it in the Main method after the SetLicense() method. Add the below code to initialize the Image Viewer.

// Add the using statements to the block at the top 
using System; 
using System.IO; 
using System.Windows; 
using Microsoft.Win32; 
using Leadtools; 
using Leadtools.Codecs; 
using Leadtools.Controls; 

// Add these global variables 
private ImageViewer imageViewer; 
private RasterCodecs codecs; 

// Initialize Image Viewer 
private void InitViewer() 
{ 
    // Create new instance of ImageViewer 
    imageViewer = new ImageViewer 
    { 
        Background = SystemColors.AppWorkspaceBrush, 
        UseDpi = true, 
        ViewPadding = new ControlPadding(), 
        ViewHorizontalAlignment = ControlAlignment.Center, 
        ViewVerticalAlignment = ControlAlignment.Center, 
    }; 
    // Add viewer to the imageViewerGrid 
    imageViewerGrid.Children.Add(imageViewer); 
    // Add pan and zoom functionality 
    var panZoom = new ImageViewerPanZoomInteractiveMode(); 
    imageViewer.InteractiveModes.Add(panZoom); 
    // Instantiate RasterCodecs 
    codecs = new RasterCodecs(); 
} 

Add the Load and Display Image Code

Open the MainWindow.xaml in the Solution Explorer, then add a menu with new File and Open menu items in the Designer Window.

<Grid> 
    <Menu Name="_mainMenu"> 
        <MenuItem Name="_file" Header="File"> 
            <MenuItem Name="_fileOpen" Header="Open" InputGestureText="Ctrl+O" Click="_fileOpen_Click"/> 
        </MenuItem> 
    </Menu> 
</Grid> 

Open MainWindow.xaml.cs in the Solution Explorer. In the Program class add the following load image code to the _fileOpen_Click event.

private void _fileOpen_Click(object sender, RoutedEventArgs e) 
{ 
    try 
    { 
        OpenFileDialog dlg = new OpenFileDialog(); 
        dlg.InitialDirectory = @"C:\LEADTOOLS21\Resources\Images"; 
        if (dlg.ShowDialog() == true) 
        { 
            imageViewer.Image = codecs.Load(dlg.FileName); 
        } 
    } 
    catch (Exception ex) 
    { 
        MessageBox.Show(ex.ToString()); 
    } 
} 

Add the Save Image Code

In the MainWindow.xaml add a new menu item underneath the _fileOpen menu item and name it _fileSave.

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <Grid Grid.Row="1" Name="imageViewerGrid"> 
    </Grid> 
    <Menu Name="_mainMenu"> 
        <MenuItem Name="_file" Header="File"> 
            <MenuItem Name="_fileOpen" Header="Open" InputGestureText="Ctrl+O" Click="_fileOpen_Click"/> 
            <MenuItem Name="_saveOpen" Header="Save" InputGestureText="Ctrl+S" Click="_saveOpen_Click"/> 
        </MenuItem> 
    </Menu> 
</Grid> 

In the Program class add the following save image code to the _fileSave_Click event.

private void _saveOpen_Click(object sender, RoutedEventArgs e) 
{ 
    try 
    { 
        SaveFileDialog dlg = new SaveFileDialog(); 
        dlg.InitialDirectory = @"C:\LEADTOOLS21\Resources\Images"; 
        dlg.Filter = "JPEG | *.jpg"; 
        if (dlg.ShowDialog() == true) 
            codecs.Save(imageViewer.Image, dlg.FileName, RasterImageFormat.Jpeg, 0); 
    } 
    catch (Exception ex) 
    { 
        MessageBox.Show(ex.ToString()); 
    } 
} 

Run the Project

Run the project by pressing F5, or by selecting Debug -> Start Debugging.

If the steps were followed correctly, the application runs and loads any image that is supported by the above codecs filters. Then the Image Viewer displays the image. Pressing the Save button opens a Save dialog to select where to save a JPEG file.

Wrap-up

This tutorial showed how to add the necessary references to load, display, and save images. In addition, it showed how to use the ImageViewer and RasterCodecs classes.

See Also

• LEADTOOLS ImageViewer Documentation
• LEADTOOLS RasterImage Documentation
• LEADTOOLS RasterCodecs Documentation
• LEADTOOLS SDK Download