←Select platform

ImageViewer Class

Summary

Represents a scrollable control that displays a WPF/Silverlight System.Windows.Media.ImageSource with interactive UI operations.

Syntax

C++

public class ImageViewer : System.Windows.Controls.ContentControl, System.ComponentModel.ISupportInitialize, System.Windows.IFrameworkInputElement, System.Windows.IInputElement, System.Windows.Markup.IAddChild, System.Windows.Markup.IQueryAmbient, System.Windows.Media.Animation.IAnimatable

Public Class ImageViewer  
   Inherits System.Windows.Controls.ContentControl 
   Implements System.ComponentModel.ISupportInitialize, System.Windows.IFrameworkInputElement, System.Windows.IInputElement, System.Windows.Markup.IAddChild, System.Windows.Markup.IQueryAmbient, System.Windows.Media.Animation.IAnimatable

public ref class ImageViewer : public System.Windows.Controls.ContentControl, System.ComponentModel.ISupportInitialize, System.Windows.IFrameworkInputElement, System.Windows.IInputElement, System.Windows.Markup.IAddChild, System.Windows.Markup.IQueryAmbient, System.Windows.Media.Animation.IAnimatable

Remarks

The ImageViewer class enables you to display a WPF/Silverlight System.Windows.Media.ImageSource or one of its derived classes. To display a LEADTOOLS Leadtools.RasterImage, use the RasterImageViewer control.

This control is suitable when you want to display an image with scrolling and interactive UI operations such as panning, zooming and magnify glass in your WPF/Silverlight application. For a control to display a static image, i.e. an image that does not require scrolling or any other interactive operations, use the ImageBox or RasterImageBox controls.

Until the image content is loaded, the System.Windows.FrameworkElement.ActualWidth and System.Windows.FrameworkElement.ActualHeight of the control will report as zero, because the image content is used to determine the final size and location of the control.

For a fixed size control, the System.Windows.FrameworkElement.Width and/or System.Windows.FrameworkElement.Height properties can be set. However, to preserve the media's aspect ratio, set the System.Windows.FrameworkElement.Width or System.Windows.FrameworkElement.Height properties but not both.

The ImageViewer controls supports the following functionality:

Viewing a WPF/Silverlight image using the Source property
Automatic horizontal and vertical scrollbars
Determining how the control displays the image and automatic adjustment for viewing when the control size changes using the SizeMode property
Changing the zoom value used to display the image using the ScaleFactor property
Manual adjustment of extra horizontal and vertical stretching values using the AspectRatioCorrection property
Support for viewing an image using its actual resolution through the UseDpi property
Image viewing transformation using the Flip, Reverse and RotateAngle properties
Using animation to control how the image is displayed with the Transition property
Converting a point or a rectangle between image (logical) and control (display or physical) properties using the PointToImageCoordinates, BoundsToImageCoordinates, PointFromImageCoordinates and BoundsFromImageCoordinates methods.
Interactive modes that can be activated with the mouse such as pan, center at, zoom to, scale and magnify glass through the InteractiveMode property
Applying standard WPF and Silverlight pixel shader effects on the image through the ImageEffect property

Example

Silverlight C#

Silverlight VB

Imports Leadtools.Windows.Controls 
 
Private Class MyWindow1 : Inherits Window 
    Private theViewer As ImageViewer 
    Public Sub New() 
        ' Create the  viewer 
        theViewer = New ImageViewer() 
        ' Create Dock Panel 
 
        Dim panel As DockPanel = New DockPanel() 
        Content = panel 
 
        DockPanel.SetDock(theViewer, Dock.Bottom) 
 
        theViewer.HorizontalAlignment = HorizontalAlignment.Center 
        theViewer.VerticalAlignment = VerticalAlignment.Bottom 
        theViewer.ImageHorizontalAlignment = HorizontalAlignment.Left 
        theViewer.ImageVerticalAlignment = VerticalAlignment.Top 
        theViewer.UseDpi = True 
        theViewer.ScreenDpiX = 96 
        theViewer.ScreenDpiY = 96 
 
        panel.Children.Add(theViewer) 
 
        ' load an image into the viewer 
        theViewer.Source = New BitmapImage(New Uri(Path.Combine(LEAD_VARS.ImagesDir, "cannon.jpg"))) 
 
        Title = String.Format("Size mode = {0}, double click to change", theViewer.SizeMode) 
 
        AddHandler theViewer.MouseDoubleClick, AddressOf theViewer_MouseDoubleClick 
    End Sub 
 
    Private Sub theViewer_MouseDoubleClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs) 
        Select Case theViewer.SizeMode 
            Case SizeMode.Normal 
                theViewer.SizeMode = SizeMode.Stretch 
 
            Case SizeMode.Stretch 
                theViewer.SizeMode = SizeMode.Fit 
 
            Case SizeMode.Fit 
                theViewer.SizeMode = SizeMode.FitAlways 
 
            Case SizeMode.FitAlways 
                theViewer.SizeMode = SizeMode.FitWidth 
 
            Case SizeMode.FitWidth 
                theViewer.SizeMode = SizeMode.Normal 
        End Select 
 
        Title = String.Format("Size mode = {0}, double click to change", theViewer.SizeMode) 
 
    End Sub 
End Class 
 
Public NotInheritable Class LEAD_VARS 
Public Const ImagesDir As String = "C:\Users\Public\Documents\LEADTOOLS Images" 
End Class

using Leadtools.Help; 
using Leadtools.Windows.Controls; 
 
class MyWindow1 : Window 
{ 
   ImageViewer theViewer; 
   public MyWindow1() 
   { 
      // Create the  viewer 
      theViewer = new ImageViewer(); 
      // Create Dock Panel 
 
      DockPanel panel = new DockPanel(); 
      Content = panel; 
 
      DockPanel.SetDock(theViewer, Dock.Bottom); 
 
      theViewer.HorizontalAlignment= HorizontalAlignment.Center; 
      theViewer.VerticalAlignment= VerticalAlignment.Bottom; 
      theViewer.ImageHorizontalAlignment = HorizontalAlignment.Left; 
      theViewer.ImageVerticalAlignment = VerticalAlignment.Top; 
      theViewer.UseDpi = true; 
      theViewer.ScreenDpiX = 96; 
      theViewer.ScreenDpiY = 96; 
 
      panel.Children.Add(theViewer); 
 
      // load an image into the viewer 
      theViewer.Source = new BitmapImage(new Uri(Path.Combine(LEAD_VARS.ImagesDir, "cannon.jpg"))); 
 
      Title = string.Format("Size mode = {0}, double click to change", theViewer.SizeMode); 
 
      theViewer.MouseDoubleClick += new MouseButtonEventHandler(theViewer_MouseDoubleClick); 
   } 
 
   void theViewer_MouseDoubleClick(object sender, MouseButtonEventArgs e) 
   { 
      switch(theViewer.SizeMode) 
      { 
         case SizeMode.Normal: 
            theViewer.SizeMode = SizeMode.Stretch; 
            break; 
 
         case SizeMode.Stretch: 
            theViewer.SizeMode = SizeMode.Fit; 
            break; 
 
         case SizeMode.Fit: 
            theViewer.SizeMode = SizeMode.FitAlways; 
            break; 
 
         case SizeMode.FitAlways: 
            theViewer.SizeMode = SizeMode.FitWidth; 
            break; 
 
         case SizeMode.FitWidth: 
            theViewer.SizeMode = SizeMode.Normal; 
            break; 
      } 
 
      Title = string.Format("Size mode = {0}, double click to change", theViewer.SizeMode); 
 
   } 
} 
 
static class LEAD_VARS 
{ 
public const string ImagesDir = @"C:\Users\Public\Documents\LEADTOOLS Images"; 
}

using Leadtools.Help; 
using Leadtools.Windows.Controls; 
 
class MyWindow1 : ChildWindow 
{ 
   ImageViewer theViewer; 
   public MyWindow1() 
   { 
      // Create the  viewer 
      theViewer = new ImageViewer(); 
      // Create Dock Panel 
 
      StackPanel panel = new StackPanel(); 
      Content = panel; 
 
      theViewer.HorizontalAlignment= HorizontalAlignment.Center; 
      theViewer.VerticalAlignment= VerticalAlignment.Bottom; 
      theViewer.ImageHorizontalAlignment = HorizontalAlignment.Left; 
      theViewer.ImageVerticalAlignment = VerticalAlignment.Top; 
      theViewer.UseDpi = true; 
      theViewer.ScreenDpiX = 96; 
      theViewer.ScreenDpiY = 96; 
 
      panel.Children.Add(theViewer); 
 
      // load an image into the viewer 
      theViewer.Source = new BitmapImage(new Uri(LeadtoolsExamples.Common.ImagesPath.Path + "cannon.jpg")); 
 
      Title = string.Format("Size mode = {0}, double click to change", theViewer.SizeMode); 
 
      theViewer.MouseLeftButtonDown += new MouseButtonEventHandler(theViewer_MouseLeftButtonDown); 
   } 
 
   void theViewer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
   { 
      switch (theViewer.SizeMode) 
      { 
         case SizeMode.Normal: 
            theViewer.SizeMode = SizeMode.Stretch; 
            break; 
 
         case SizeMode.Stretch: 
            theViewer.SizeMode = SizeMode.Fit; 
            break; 
 
         case SizeMode.Fit: 
            theViewer.SizeMode = SizeMode.FitAlways; 
            break; 
 
         case SizeMode.FitAlways: 
            theViewer.SizeMode = SizeMode.FitWidth; 
            break; 
 
         case SizeMode.FitWidth: 
            theViewer.SizeMode = SizeMode.Normal; 
            break; 
      } 
 
      Title = string.Format("Size mode = {0}, double click to change", theViewer.SizeMode); 
   } 
}

Imports Leadtools 
Imports Leadtools.Windows.Controls 
 
Private Class MyWindow1 : Inherits ChildWindow 
   Private theViewer As ImageViewer 
   Public Sub New() 
      ' Create the  viewer 
      theViewer = New ImageViewer() 
      ' Create Dock Panel 
 
      Dim panel As StackPanel = New StackPanel() 
      Content = panel 
 
      theViewer.HorizontalAlignment = HorizontalAlignment.Center 
      theViewer.VerticalAlignment = VerticalAlignment.Bottom 
      theViewer.ImageHorizontalAlignment = HorizontalAlignment.Left 
      theViewer.ImageVerticalAlignment = VerticalAlignment.Top 
      theViewer.UseDpi = True 
      theViewer.ScreenDpiX = 96 
      theViewer.ScreenDpiY = 96 
 
      panel.Children.Add(theViewer) 
 
      ' load an image into the viewer 
      theViewer.Source = New BitmapImage(New Uri(LeadtoolsExamples.Common.ImagesPath.Path & "cannon.jpg")) 
 
      Title = String.Format("Size mode = {0}, double click to change", theViewer.SizeMode) 
 
      AddHandler theViewer.MouseLeftButtonDown, AddressOf theViewer_MouseLeftButtonDown 
   End Sub 
 
   Private Sub theViewer_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs) 
      Select Case theViewer.SizeMode 
         Case SizeMode.Normal 
            theViewer.SizeMode = SizeMode.Stretch 
 
         Case SizeMode.Stretch 
            theViewer.SizeMode = SizeMode.Fit 
 
         Case SizeMode.Fit 
            theViewer.SizeMode = SizeMode.FitAlways 
 
         Case SizeMode.FitAlways 
            theViewer.SizeMode = SizeMode.FitWidth 
 
         Case SizeMode.FitWidth 
            theViewer.SizeMode = SizeMode.Normal 
      End Select 
 
      Title = String.Format("Size mode = {0}, double click to change", theViewer.SizeMode) 
   End Sub 
End Class

<Window x:Class="WPFSamples.ImageViewer" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:Leadtools_Windows_Controls="clr-namespace:Leadtools.Windows.Controls;assembly=Leadtools.Windows.Controls" 
    Height="600" Width="800"> 
  <DockPanel> 
    <Leadtools_Windows_Controls:ImageViewer 
                Name="theViewer" 
                Source="file:///c:\users\Public\Documents\LEADTOOLS Images\cannon.jpg" 
                DockPanel.Dock= "Bottom" 
                HorizontalAlignment="Center" VerticalAlignment="Bottom" 
                UseDpi="false" 
                MouseDoubleClick="theViewer_MouseDoubleClick"/> 
  </DockPanel> 
  <Window.Title> 
    "Size mode =Normal, double click to change" 
  </Window.Title> 
</Window>