Working With Images Using Visual Studio

Take the following steps to create and run a program to add images to LEADTOOLS ImageViewer object in Visual Studio.

Start Visual Studio.
Choose File->New->Project... from the menu.
In the New Project dialog box, choose "Project Types-->Visual C# Projects-->NET Framework 4.0". Then choose "WPF App (.NET Framework)".
Type the project name as "ImageViewerItems" in the Project Name field, and then click OK. If desired, type a new location for your project or select a directory using the Browse button, and then click OK.
In the "Solution Explorer" window, right-click on the "References" folder, and select "Add Reference..." from the context menu. In the "Add Reference..." dialog box, select the "Browse" tab and browse to LEAD Technologies For .NET "C:\LEADTOOLS22\Bin\DotNet4\Win32 " folder and select the following DLLs:
- Leadtools.dll
- Leadtools.Codecs.dll
- Leadtools.Controls.Wpf.dll Click Select and then click OK to add the above DLLs to the application.
Set MainWindow.xaml to horizontal split for easy viewing of the XAML code. The following steps involve inserting XAML code snippets into the source code of MainWindow.xaml. The source code provided is intended to build an application in Visual Studio and Expression Blend.

Display an image. Loading an image simply requires adding the following XAML code to the source. Make sure you remove any source code loaded by default into the window.

MainWindow.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ImageViewerItems.MainWindow" 
    x:Name="Window" 
    Title="ImageViewerItems"  
    Width="640" 
    Height="480" 
    xmlns:Leadtools_Controls_Wpf="clr-namespace:Leadtools.Controls;assembly=Leadtools.Controls.Wpf"> 
    <Grid x:Name="LayoutRoot"> 
        <Leadtools_Controls_Wpf:ImageViewer x:Name="_imageList" Margin="124,132,205,124" Loaded="ImageViewer_Loaded"/> 
    </Grid> 
</Window>

Open the code behind file named "MainWindow.xaml.cs", Remove the default code in this file and replace it all with the following code.

MainWindow.xaml.cs

using System.IO; 
using System.Windows; 
using Leadtools; 
using Leadtools.Codecs; 
using Leadtools.Controls; 
 
namespace ImageViewerItems 
{ 
   /// <summary> 
   /// Interaction logic for MainWindow.xaml 
   /// </summary> 
   public partial class MainWindow : Window 
   { 
      public MainWindow() 
      { 
         InitializeComponent(); 
      } 
 
      static class LEAD_VARS 
      { 
         public const string ImagesDir = @"C:\LEADTOOLS22\Resources\Images"; 
      }  
       
      private void ImageViewer_Loaded(object sender, RoutedEventArgs e) 
      { 
         _imageList.Zoom(ControlSizeMode.Stretch, 1.0, _imageList.DefaultZoomOrigin); 
 
         using (RasterCodecs codecs = new RasterCodecs()) 
         { 
            string srcFileName = Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\NaturalFruits.jpg"); 
            RasterImage image = codecs.Load(srcFileName); 
            _imageList.Image = image; 
         } 
      } 
   } 
}

Build, and Run the program to test it.

Magnifying Glass. Accessing the magnifying glass requires pasting the following XAML code. Make sure any other code is removed from the file.

MainWindow.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ImageViewerItems.MainWindow" 
    x:Name="Window" 
    Title="ImageViewerItems"  
    Width="640" 
    Height="480" 
    xmlns:Leadtools_Controls_Wpf="clr-namespace:Leadtools.Controls;assembly=Leadtools.Controls.Wpf"> 
   <Grid x:Name="LayoutRoot"> 
      <Leadtools_Controls_Wpf:ImageViewer x:Name="_imageList" Margin="124,132,205,124" Loaded="ImageViewer_Loaded"> 
         <Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
            <Leadtools_Controls_Wpf:ImageViewerMagnifyGlassInteractiveMode Shape="Rectangle" ScaleFactor="3" IsEnabled="True"/> 
         </Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
      </Leadtools_Controls_Wpf:ImageViewer> 
   </Grid> 
</Window>

Build, and Run the program to test it.

Image viewer with multiple items. To add multiple items into the image viewer control to look like thumbnails image list, replace the content of both XAML file and the code behind file with as below. Make sure any other source code is removed from the source files.

MainWindow.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ImageViewerItems.MainWindow" 
    x:Name="Window" 
    Title="ImageViewerItems"  
    Width="640" 
    Height="480" 
    xmlns:Leadtools_Controls_Wpf="clr-namespace:Leadtools.Controls;assembly=Leadtools.Controls.Wpf"> 
   <Grid x:Name="LayoutRoot"> 
      <Leadtools_Controls_Wpf:ImageViewer x:Name="_imageList" ViewHorizontalAlignment="Center" ViewVerticalAlignment="Center" ItemSpacing="10,10" ItemSize="150,150" ItemBorderThickness="1" Loaded="ImageViewer_Loaded"> 
         <Leadtools_Controls_Wpf:ImageViewer.ViewLayout> 
            <Leadtools_Controls_Wpf:ImageViewerVerticalViewLayout Columns="1"/> 
         </Leadtools_Controls_Wpf:ImageViewer.ViewLayout> 
 
         <Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
            <Leadtools_Controls_Wpf:ImageViewerMagnifyGlassInteractiveMode Shape="Rectangle" ScaleFactor="3" IsEnabled="True"/> 
         </Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
      </Leadtools_Controls_Wpf:ImageViewer> 
   </Grid> 
</Window>

MainWindow.xaml.cs

using System.IO; 
using System.Windows; 
using Leadtools; 
using Leadtools.Codecs; 
using Leadtools.Controls; 
 
namespace ImageViewerItems 
{ 
   /// <summary> 
   /// Interaction logic for MainWindow.xaml 
   /// </summary> 
   public partial class MainWindow : Window 
   { 
      public MainWindow() 
      { 
         InitializeComponent(); 
      } 
 
      LeadSize _imageSize = LeadSize.Create(130, 130); 
 
      private void ImageViewer_Loaded(object sender, RoutedEventArgs e) 
      { 
         AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\NaturalFruits.jpg")); 
         AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\Ani.gif")); 
         AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\Image2.jpg")); 
      } 
 
      private void AddItem(string fileName) 
      { 
         using (RasterCodecs codecs = new RasterCodecs()) 
         { 
            _imageList.BeginUpdate(); 
 
            RasterImage rasterImage = codecs.Load(fileName); 
 
            LeadRect destRect = LeadRect.Create(0, 0, _imageSize.Width, _imageSize.Height); 
            LeadRect imageRect = ImageViewer.GetDestinationRectangle( 
               rasterImage.ImageWidth, 
               rasterImage.ImageHeight, 
               destRect, 
               ControlSizeMode.Fit, 
               ControlAlignment.Near, 
               ControlAlignment.Near); 
 
            RasterImage thumbnail = rasterImage.CreateThumbnail( 
               imageRect.Width, 
               imageRect.Height, 
               32, 
               RasterViewPerspective.TopLeft, 
               RasterSizeFlags.Resample); 
 
            ImageViewerItem item = new ImageViewerItem(); 
            item.Image = thumbnail; 
 
            _imageList.Items.Add(item); 
 
            _imageList.EndUpdate(); 
         } 
      } 
 
      static class LEAD_VARS 
      { 
         public const string ImagesDir = @"C:\LEADTOOLS22\Resources\Images"; 
      } 
   } 
}