ImageGear .NET - Updated
WPF Application
User Guide > Getting Started > Tutorial: Create Your First Project > WPF Application

In this tutorial, you will configure a C# or VB.NET project for a WPF application and use ImageGear .NET capabilities. You will also learn how to zoom in/out and rotate a file that is loaded.

It should be noted that ImageGear .NET provides WPF GUI components which can help speed up the integration of ImageGear .NET with your application. Steps to install these components can be found under Installing GUI Components.

The following tutorial refers specifically to 64-bit installations; for 32-bit installations:

Using the desired version of Visual Studio (2010 or later):

  1. Create a new "WPF Application" project, using C# or VB.NET and name the project: IG_Tutorial_WPF.
  2. If you installed ImageGear .NET 64-bit, using the Configuration Manager, create a new project platform (if you don’t have one already) for x64. Make sure your project is set to compile targeting Debug and x64. Make sure you now have $YOURLOCALPROJ\bin\x64\Debug\, and if is not there, create it.
  3. Add references and required resources into your projects in one of the following ways:
    • Recommended: use our NuGet Packages. For this project, you need the following packages:
      Accusoft.ImageGear.WPF.nupkg (https://www.nuget.org/packages/Accusoft.ImageGear.WPF/)
      Accusoft.ImageGear.ART.WPF.nupkg (https://www.nuget.org/packages/Accusoft.ImageGear.ART.WPF/)
    • Manually:
      1. Copy all files (and folders) inside $INSTALLDIR\ImageGear .NET v24 64-bit\Bin\ to your local output bin directory in your project (i.e., $YOURLOCALPROJ\bin\x64\Debug\ ).
      2. Manually add the reference System.Windows.Forms to your project from the .NET Assemblies tab.
      3. Add the following references to your project from $YOURLOCALPROJ\bin\x64\Debug\:
        • ImageGear24.Core.dll
        • ImageGear24.Art.dll
        • ImageGear24.Evaluation.dll
        • ImageGear24.Formats.Common.dll
        • ImageGear24.Presentation.dll
        • ImageGear24.Windows.Controls.dll
        • ImageGear24.Wpf.dll

    Your output target directory should be set to $YOURLOCALPROJ\bin\x64\Debug\  

  4. Open the MainWindow.xaml screen with both the Design and XAML panels for the window visible. You will use the XAML panel to create the graphical user interface. First, in the XAML panel, create a custom alias namespace. So, add some code to the header so it looks like this:
    XAML
    Copy Code

    <Window x:Class="MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:custom="clr-namespace:IG_Tutorial_WPF"
           xmlns:IGWC="clr-namespace:ImageGear.Windows.Controls;assembly=ImageGear24.Windows.Controls"
           Title="MainWindow" Height="300" Width="300">
    </Window>

  5. For organizational purposes, we will use a Grid. Inside of that Grid we will have a Menu. That Menu will have a File > Open item that will be responsible for opening a file, View > Zoom In | Zoom Out for zoom in/out on the file loaded and Processing > Rotate 90 for rotating the file loaded. To finish the GUI, we also need a PageView control, which will be used to display the file. After adding these controls, the XAML code should result in the following:
    XAML
    Copy Code

    <Window x:Class="MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:custom="clr-namespace:IG_Tutorial_WPF"
           xmlns:IGWC="clr-namespace:ImageGear.Windows.Controls;assembly=ImageGear24.Windows.Controls"
           Title="MainWindow" Height="300" Width="300">
      
       <Window.CommandBindings>
           <CommandBinding
       Command="Open"
       Executed="OpenExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.ZoomInCmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ZoomInExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.ZoomOutCmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ZoomOutExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.Rotate90Cmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ExectutedRotate90"/>
       </Window.CommandBindings>
     
       <Grid>
           <DockPanel Name="DockPanel1">
               <Menu DockPanel.Dock="Top" Height="22" Name="menu1">
                   <MenuItem Name="mnuFile" Header="_File">
                       <MenuItem Name="mnuFileOpen" Header="_Open" Command="Open"/>
                   </MenuItem>
                   <MenuItem Name="mnuView" Header="_View">
                       <MenuItem Name="mnuViewZoomIn" Header="Zoom _In" Command="{x:Static custom:MainWindow.ZoomInCmd}"/>
                       <MenuItem Name="mnuViewZoomOut" Header="Zoom _Out" Command="{x:Static custom:MainWindow.ZoomOutCmd}"/>
                   </MenuItem>
                   <MenuItem Name="mnuProcessing" Header="_Processing">
                       <MenuItem Name="mnuProcessingRot90" Header="Rotate 90" Command="{x:Static custom:MainWindow.Rotate90Cmd}"/>
                   </MenuItem>
               </Menu>
               <IGWC:PageView x:Name="imGearPageView1"/>
           </DockPanel>
       </Grid>
    </Window>

  6. Each Command Binding entry will have its own handler for Executed, but all of the them will share a single handler for CanExecute. Right-click over each handler created and navigate to its definition in the .xaml.cs file. In the case of CanExecute, you can navigate to its definition through any of the controls.
  7. Next, add the functionality to the controls in the MainWindow.xaml.cs file:  
    1. First, add some using statements and declare the some members required for this project.
    2. Second, declare the static RoutedCommands required for the controls created.  
    3. Third, two member variables will need to be added to the class: ImGearPage to hold the image data and ImGearPageDisplay that will control the ways it is shown.
    4. Finally, add the code for the commands that will be executed by each control.

    The body of the MainWindow class should look like this:

    C#
    Copy Code
    using System.Diagnostics;
    using System.IO;
    using System.Windows;
    using System.Windows.Input;
    
    using ImageGear.Core;
    using ImageGear.Display;
    using ImageGear.Evaluation;
    using ImageGear.Formats;
    using ImageGear.Processing;
    
    namespace IG_Tutorial_WPF
    {
    
       public partial class MainWindow : Window
       {
           public static RoutedCommand ZoomInCmd = new RoutedCommand();
           public static RoutedCommand ZoomOutCmd = new RoutedCommand();
           public static RoutedCommand Rotate90Cmd = new RoutedCommand();
    
           // Hold the image data.
           ImGearPage igPage = null;
           // Control how the page is displayed.
           ImGearPresentationPageDisplay igPageDisplay = null;
    
           public MainWindow()
           {
               // Initialize license for a Deployment(Runtime) license.
               //***The SetSolutionName, SetSolutionKey and possibly the SetOEMLicenseKey
               //methods must be called to distribute the runtime.***
               //ImGearLicense.SetSolutionName("YourSolutionName");
               //ImGearLicense.SetSolutionKey(12345, 12345, 12345, 12345);
               //Manually Reported Runtime licenses also require the following method
               //call to SetOEMLicenseKey.
               //ImGearLicense.SetOEMLicenseKey("2.0.AStringForOEMLicensing...");
    
               // Initialize evaluation license.
               ImGearEvaluationManager.Initialize();
    
               // Initialize common formats.
               ImGearCommonFormats.Initialize();
    
               InitializeComponent();
           }
    
           private void OpenExecuted(object sender, ExecutedRoutedEventArgs e)
           {
                  // Initialize open file dialog.
                  Microsoft.Win32.OpenFileDialog dialog = new Microsoft.Win32.OpenFileDialog();
                  dialog.Filter = ImGearFileFormats.GetSavingFilter(ImGearSavingFormats.UNKNOWN);
                  // Run open file dialog.
                  if (dialog.ShowDialog(this) == true)
                  {
                         using (Stream stream = new FileStream(dialog.FileName, FileMode.Open, FileAccess.Read))
                         {
                                igPage = ImGearFileFormats.LoadPage(stream, 0);
                         }
                         if (null != igPage && null != igPage.DIB && !igPage.DIB.IsEmpty())
                         {
                                // Create a new page display.
                                imGearPageDisplay = new ImGearPresentationPageDisplay(igPage);
     
                                // Associate the page display with the page view.
                                imGearPageView1.Display = imGearPageDisplay;
     
                                // Cause the page view to update.
                                imGearPageView1.Update();
                         }
                  }
           }
    
    
           private void ZoomInExecuted(object sender, ExecutedRoutedEventArgs e)
           {
               // Get the current zoom info.  
               ImGearZoomInfo igZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1);
               // Increase the zoom.  
               igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * 1.25;
               igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * 1.25;
               igZoomInfo.Horizontal.Fixed = true;
               igZoomInfo.Vertical.Fixed = true;
               // Set the new zoom values.
               igPageDisplay.UpdateZoomFrom(igZoomInfo);
               // Trigger an update, letting it know only the layout has changed.
               imGearPageView1.Update(true);
    
           }
    
           private void ZoomOutExecuted(object sender, ExecutedRoutedEventArgs e)
           {
               // Get the current zoom info.  
               ImGearZoomInfo igZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1);
               igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * (1 / 1.25);
               igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * (1 / 1.25);
               igZoomInfo.Horizontal.Fixed = true;
               igZoomInfo.Vertical.Fixed = true;
               // Set the new zoom values.
               igPageDisplay.UpdateZoomFrom(igZoomInfo);
               // Trigger an update, letting it know only the layout has changed.
               imGearPageView1.Update(true);
           }
    
           private void ExectutedRotate90(object sender, ExecutedRoutedEventArgs e)
           {
               try
               {
                   // Rotate the given page 90 degrees using ImGearRotationValues.VALUE_90.
                   // ImGearRotationValues.VALUE_90 is the constant value for indicating the amount of the rotation.
                   // It may be changed for other values, e.g. ImGearRotationValues.VALUE_180, ImGearRotationValues.VALUE_270.
                   ImGearProcessing.Rotate(igPage, ImGearRotationValues.VALUE_90);
                   imGearPageView1.Update();
               }
               catch (ImGearException ex)
               {
                   Debug.WriteLine(ex.Message);
               }
    
           }
    
           private void CanExectutePageAvailable(object sender, CanExecuteRoutedEventArgs e)
           {
               e.CanExecute = (null != igPage && null != igPage.DIB
                   && !igPage.DIB.IsEmpty() && null != igPageDisplay);
           }
    
       }
    }
    VB.NET
    Copy Code
    Imports System.Diagnostics
    Imports System.IO
    Imports System.Windows
    Imports System.Windows.Input
    
    Imports ImageGear.Core
    Imports ImageGear.Display
    Imports ImageGear.Evaluation
    Imports ImageGear.Formats
    Imports ImageGear.Processing
    
    Class MainWindow
    Inherits Window
    
       Public Shared ZoomInCmd As New RoutedCommand()
       Public Shared ZoomOutCmd As New RoutedCommand()
       Public Shared Rotate90Cmd As New RoutedCommand()
    
       ' Hold the image data.
       Private igPage As ImGearPage
       ' Control how the page is displayed.
       Private igPageDisplay As ImGearPresentationPageDisplay
    
       Public Sub New()
    
           ' Initialize license for a Deployment(Runtime) license.
           '***The SetSolutionName, SetSolutionKey and possibly the SetOEMLicenseKey
           'methods must be called to distribute the runtime.***
           'ImGearLicense.SetSolutionName("YourSolutionName");
           'ImGearLicense.SetSolutionKey(12345, 12345, 12345, 12345);
           'Manually Reported Runtime licenses also require the following method
           'call to SetOEMLicenseKey.
           'ImGearLicense.SetOEMLicenseKey("2.0.AStringForOEMLicensing...");
    
           'Initialize evaluation license.
           ImGearEvaluationManager.Initialize()
    
           'Initialize common formats.
           ImGearCommonFormats.Initialize()
    
           ' This call is required by the designer.
           InitializeComponent()
    
       End Sub
    
       Private Sub OpenExecuted(sender As Object, e As ExecutedRoutedEventArgs)
          Try
             ' Initialize open file dialog.
             Dim dialog As New Microsoft.Win32.OpenFileDialog()
             dialog.Title = "Select File"
             ' Run open file dialog.
             If dialog.ShowDialog(Me) = True Then
                ' Load the image into the page.
                Using stream As System.IO.Stream = New System.IO.FileStream(dialog.FileName, System.IO.FileMode.Open, System.IO.FileAccess.Read)
                   ' Load the image into the page.
                   igPage = ImGearFileFormats.LoadPage(stream, 0)
                End Using
             End If
             If Not igPage Is Nothing AndAlso Not igPage.DIB Is Nothing AndAlso Not igPage.DIB.IsEmpty() Then
                ' Create a new page display.
                igPageDisplay = New ImGearPresentationPageDisplay(igPage)
                ' Associate the page display with the page view.
                imGearPageView1.Display = igPageDisplay
                ' Cause the page view to update.
                imGearPageView1.Update()
             End If
          Catch exp As Exception
             ' Expose the error in status bar and message box.
             MessageBox.Show(Me, exp.Message)
          End Try
       End Sub
                      
     
       Private Sub ZoomInExecuted(sender As Object, e As ExecutedRoutedEventArgs)
           ' Get the current zoom info.  
           Dim igZoomInfo As ImGearZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1)
           'Increase the zoom.  
           igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * 1.25
           igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * 1.25
           igZoomInfo.Horizontal.Fixed = True
           igZoomInfo.Vertical.Fixed = True
           ' Set the New zoom values.
           igPageDisplay.UpdateZoomFrom(igZoomInfo)
           ' Trigger an update, letting it know only the layout has changed.
           imGearPageView1.Update(True)
       End Sub
    
       Private Sub ZoomOutExecuted(sender As Object, e As ExecutedRoutedEventArgs)
           ' Get the current zoom info.  
           Dim igZoomInfo As ImGearZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1)
           igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * (1 / 1.25)
           igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * (1 / 1.25)
           igZoomInfo.Horizontal.Fixed = True
           igZoomInfo.Vertical.Fixed = True
           ' Set the New zoom values.
           igPageDisplay.UpdateZoomFrom(igZoomInfo)
           ' Trigger an update, letting it know only the layout has changed.
           imGearPageView1.Update(True)
       End Sub
    
       Private Sub ExectutedRotate90(sender As Object, e As ExecutedRoutedEventArgs)
           Try
               ' Rotate the given page 90 degrees using ImGearRotationValues.VALUE_90.
               ' ImGearRotationValues.VALUE_90 Is the constant value for indicating the amount of the rotation.
               ' It may be changed for other values, e.g. ImGearRotationValues.VALUE_180, ImGearRotationValues.VALUE_270.
               ImGearProcessing.Rotate(igPage, ImGearRotationValues.VALUE_90)
               imGearPageView1.Update()
           Catch ex As ImGearException
               Debug.WriteLine(ex.Message)
           End Try
       End Sub
    
       Private Sub CanExectutePageAvailable(sender As Object, e As CanExecuteRoutedEventArgs)
           e.CanExecute = (Not igPage Is Nothing AndAlso Not igPage.DIB Is Nothing AndAlso
               Not igPage.DIB.IsEmpty() AndAlso Not igPageDisplay Is Nothing)
       End Sub
    
    End Class

    In what follows, we will go over some areas of this sample code in more detail.

  8. We declare the route commands required for this project in the .xaml.cs file as:
    C#
    Copy Code
    public static RoutedCommand ZoomInCmd = new RoutedCommand();
    public static RoutedCommand ZoomOutCmd = new RoutedCommand();
    public static RoutedCommand Rotate90Cmd = new RoutedCommand();
    VB.NET
    Copy Code
       Public Shared ZoomInCmd As New RoutedCommand()
       Public Shared ZoomOutCmd As New RoutedCommand()
       Public Shared Rotate90Cmd As New RoutedCommand()
  9. Then, the Command Bindings in the .xaml file for the RoutedCommands created above:
    XAML
    Copy Code

    <Window.CommandBindings>
           <CommandBinding
       Command="Open"
       Executed="OpenExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.ZoomInCmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ZoomInExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.ZoomOutCmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ZoomOutExecuted"/>
           <CommandBinding
       Command="{x:Static custom:MainWindow.Rotate90Cmd}"
       CanExecute="CanExectutePageAvailable"
       Executed="ExectutedRotate90"/>
    </Window.CommandBindings>

  10. If you are using a Deployment (Runtime) licensing, add the license initialization code to the Main Window constructor. This is not necessary if you are using an Evaluation or Development (Toolkit) license. Please add the ImGearEvaluationManager.Initialize() call if you are evaluating the product.
    C#
    Copy Code
                   public MainWindow()
           {
               // Initialize license for a Deployment(Runtime) license.
               //***The SetSolutionName, SetSolutionKey and possibly the SetOEMLicenseKey
               //methods must be called to distribute the runtime.***
               //ImGearLicense.SetSolutionName("YourSolutionName");
               //ImGearLicense.SetSolutionKey(12345, 12345, 12345, 12345);
               //Manually Reported Runtime licenses also require the following method
               //call to SetOEMLicenseKey.
               //ImGearLicense.SetOEMLicenseKey("2.0.AStringForOEMLicensing...");
    
               // Initialize evaluation license.
               ImGearEvaluationManager.Initialize();
    
               // Insert the HD Photo format held by the IGWPF component.
               ImGearFileFormats.Filters.Insert(0, ImGearHDPhoto.CreateHDPhotoFormat());
               // Initialize common formats.
               ImGearCommonFormats.Initialize();
    
               InitializeComponent();
           }
    VB.NET
    Copy Code
       Public Sub New()
    
           ' Initialize license for a Deployment(Runtime) license.
           '***The SetSolutionName, SetSolutionKey and possibly the SetOEMLicenseKey
           'methods must be called to distribute the runtime.***
           'ImGearLicense.SetSolutionName("YourSolutionName");
           'ImGearLicense.SetSolutionKey(12345, 12345, 12345, 12345);
           'Manually Reported Runtime licenses also require the following method
           'call to SetOEMLicenseKey.
           'ImGearLicense.SetOEMLicenseKey("2.0.AStringForOEMLicensing...");
    
           'Initialize evaluation license.
           ImGearEvaluationManager.Initialize()
    
           'Initialize common formats.
           ImGearCommonFormats.Initialize()
    
           ' This call is required by the designer.
           InitializeComponent()
    
       End Sub
  11. Load and display a document using:
    C#
    Copy Code
                      ImGearLoadingSelection selection = ImGearWinForms.SelectLocalFileToLoad(null, "Select File");
               if (null != selection)
               {
                   using (FileStream fileContent = ((ImGearLocalFile)
                      selection.File).OpenToRead())
                   {
                       try
                       {
                           igPage = ImGearFileFormats.LoadPage(fileContent, 0);
                       }
                       catch (ImGearException ex)
                       {
                           Debug.WriteLine(ex.Message);
                       }
                   }
                   if (null != igPage && null != igPage.DIB &&
                       !igPage.DIB.IsEmpty())
                   {
                       // Create a new page display.
                       igPageDisplay = new ImGearPresentationPageDisplay(igPage);
                       // Associate the page display with the page view.
                       imGearPageView1.Display = igPageDisplay;
                       // Cause the page view to update.
                       imGearPageView1.Update();
                   }
               }
    VB.NET
    Copy Code
           Dim selection As ImGearLoadingSelection = ImGearWinForms.SelectLocalFileToLoad(Nothing, "Select File")
           If Not selection Is Nothing Then
               Dim localFile As ImGearLocalFile = selection.File
               Using fileContent As FileStream = localFile.OpenToRead()
                   Try
                       ' Load the image into the page.
                       igPage = ImGearFileFormats.LoadPage(fileContent, 0)
                   Catch ex As ImGearException
                       Debug.WriteLine(ex.Message)
                   End Try
                   If Not igPage Is Nothing AndAlso Not igPage.DIB Is Nothing AndAlso Not igPage.DIB.IsEmpty() Then
                       ' Create a new page display.
                       igPageDisplay = New ImGearPresentationPageDisplay(igPage)
                       ' Associate the page display with the page view.
                       imGearPageView1.Display = igPageDisplay
                       ' Cause the page view to update.
                       imGearPageView1.Update()
                   End If
               End Using
           End If
  12. Execute the Zoom In operation as follows:
    C#
    Copy Code
               // Get the current zoom info.  
               ImGearZoomInfo igZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1);
               // Increase the zoom.  
               igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * 1.25;
               igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * 1.25;
               igZoomInfo.Horizontal.Fixed = true;
               igZoomInfo.Vertical.Fixed = true;
               // Set the new zoom values.
               igPageDisplay.UpdateZoomFrom(igZoomInfo);
               // Trigger an update, letting it know only the layout has changed.
               imGearPageView1.Update(true);
    VB.NET
    Copy Code
           ' Get the current zoom info.  
           Dim igZoomInfo As ImGearZoomInfo = igPageDisplay.GetZoomInfo(imGearPageView1)
           'Increase the zoom.  
           igZoomInfo.Horizontal.Value = igZoomInfo.Horizontal.Value * 1.25
           igZoomInfo.Vertical.Value = igZoomInfo.Vertical.Value * 1.25
           igZoomInfo.Horizontal.Fixed = True
           igZoomInfo.Vertical.Fixed = True
           ' Set the New zoom values.
           igPageDisplay.UpdateZoomFrom(igZoomInfo)
           ' Trigger an update, letting it know only the layout has changed.
           imGearPageView1.Update(True)

    Similarly, we can perform Zoom Out by just modifying the multiplier of the Horizontal and Vertical values as (1/1.25). See Zoom Out Click Event Handler.

  13. Finally, we can rotate the page displayed with:
    C#
    Copy Code
               try
               {
                   // Rotate the given page 90 degrees using ImGearRotationValues.VALUE_90.
                   // ImGearRotationValues.VALUE_90 is the constant value for indicating the amount of the rotation.
                   // It may be changed for other values, e.g. ImGearRotationValues.VALUE_180, ImGearRotationValues.VALUE_270.
                   ImGearProcessing.Rotate(igPage, ImGearRotationValues.VALUE_90);
                   imGearPageView1.Update();
               }
               catch (ImGearException ex)
               {
                   Debug.WriteLine(ex.Message);
               }
    VB.NET
    Copy Code
           Try
               ' Rotate the given page 90 degrees using ImGearRotationValues.VALUE_90.
               ' ImGearRotationValues.VALUE_90 Is the constant value for indicating the amount of the rotation.
               ' It may be changed for other values, e.g. ImGearRotationValues.VALUE_180, ImGearRotationValues.VALUE_270.
               ImGearProcessing.Rotate(igPage, ImGearRotationValues.VALUE_90)
               imGearPageView1.Update()
           Catch ex As ImGearException
               Debug.WriteLine(ex.Message)
           End Try

    Notice that for performing 180 and 270 rotations, we simply change the second parameter of the Rotate method to ImGearRotationValues.VALUE_180 and ImGearRotationValues.VALUE_270, respectively.