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:
- Your project should already be set to compile to target Debug and x86, and you should have the directory: $YOURLOCALPROJ\bin\x86\Debug\.
- Throughout these instructions, replace x64 with x86.
- The 32-bit ImageGear binaries are found in $INSTALLDIR\Bin\x86
Using Visual Studio 2015 or later:
- Create a new "WPF Application" project, using C# or VB.NET and name the project: IG_Tutorial_WPF.
- 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 it is not there, create it.
- 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:
- Copy all files (and folders) inside $INSTALLDIR\Bin\x64 to your local output bin directory in your project (i.e., $YOURLOCALPROJ\bin\x64\Debug\ ).
- Manually add the reference System.Windows.Forms to your project from the .NET Assemblies tab.
- Add the following references to your project from $YOURLOCALPROJ\bin\x64\Debug\:
- ImageGear.Core.dll
- ImageGear.Art.dll
- ImageGear.Evaluation.dll
- ImageGear.Formats.Common.dll
- ImageGear.Presentation.dll
- ImageGear.Windows.Controls.dll
- ImageGear.Wpf.dll
Your output target directory should be set to $YOURLOCALPROJ\bin\x64\Debug\
- 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=ImageGear.Windows.Controls" Title="MainWindow" Height="300" Width="300"> </Window> |
- 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=ImageGear.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> |
- Each Command Binding entry will have its own handler for Executed, but all of 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.
- Next, add the functionality to the controls in the MainWindow.xaml.cs file:
- First, add some using statements and declare the some members required for this project.
- Second, declare the static RoutedCommands required for the controls created.
- Third, add two member variables to the class: ImGearPage to hold the image data and ImGearPageDisplay to control how it is shown.
- Finally, add the code for the commands that will be executed by each control.
The body of the MainWindow class should look like this:
Now, we will go over some areas of this sample code in more detail.
- Declare the route commands required for this project in the .xaml.cs file as:
- Then, add 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> |
- Then, add the ImGearEvaluationManager.Initialize() call if you are evaluating the product. You also need to initialize some formats.
- Load and display a document:
- Execute the Zoom In operation:
Similarly, you can perform Zoom Out by modifying the multiplier of the Horizontal and Vertical values as (1/1.25). See the zoomOutToolStripMenuItem_Click function in the code example in step 5 of the WinForms Application.
- Finally, rotate the page displayed:
Notice that for performing 180 and 270 rotations, you can change the second parameter of the Rotate method to ImGearRotationValues.VALUE_180 and ImGearRotationValues.VALUE_270, respectively.