ImageBox Class

Represents a control that displays a WPF/Silverlight System.Windows.Media.ImageSource.

Object Model

Syntax

C#
Visual Basic
Objective-C
Java
C++

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

'Declaration
 
Public Class ImageBox 
   Inherits System.Windows.Controls.Panel
   Implements System.ComponentModel.ISupportInitialize, System.Windows.IFrameworkInputElement, System.Windows.IInputElement, System.Windows.Markup.IAddChild, System.Windows.Markup.IQueryAmbient, System.Windows.Media.Animation.IAnimatable

'Usage
 
Dim instance As ImageBox

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

Remarks

The ImageBox 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 RasterImageBox control.

This control is suitable when you want to display a static image, i.e. an image that does not require scrolling or any other interactive operations in your WPF/Silverlight application. If such interactive operations are required, use the ImageViewer or RasterImageViewer 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 ImageBox controls supports the following functionality:

Viewing a WPF/Silverlight image using the Source property
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

Example

C#
Visual Basic
WinRT C#
WinRT JavaScript
Silverlight C#
Silverlight VB

Copy Code

Imports Leadtools.Windows.Controls

Private Class MyWindow1 : Inherits Window
    Private theImage As ImageBox
    Public Sub New()
        ' Create the  viewer
        theImage = New ImageBox()

        ' Create Dock Panel

        Dim panel As DockPanel = New DockPanel()
        Content = panel

        DockPanel.SetDock(theImage, Dock.Bottom)

        theImage.HorizontalAlignment = HorizontalAlignment.Center
        theImage.VerticalAlignment = VerticalAlignment.Bottom
        theImage.UseDpi = True
        theImage.ScreenDpiX = 96
        theImage.ScreenDpiY = 96

        panel.Children.Add(theImage)

        ' load an image into the viewer
        theImage.Source = New BitmapImage(New Uri(Path.Combine(LEAD_VARS.ImagesDir, "cannon.jpg")))

        Title = String.Format("Size mode = {0}, click to change", theImage.SizeMode)

        AddHandler theImage.MouseDown, AddressOf theImage_MouseClick
    End Sub

    Private Sub theImage_MouseClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
        Select Case theImage.SizeMode
            Case SizeMode.Normal
                theImage.SizeMode = SizeMode.Stretch

            Case SizeMode.Stretch
                theImage.SizeMode = SizeMode.Fit

            Case SizeMode.Fit
                theImage.SizeMode = SizeMode.FitAlways

            Case SizeMode.FitAlways
                theImage.SizeMode = SizeMode.FitWidth

            Case SizeMode.FitWidth
                theImage.SizeMode = SizeMode.Normal
        End Select

        Title = String.Format("Size mode = {0}, double click to change", theImage.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
{
   ImageBox theImage;
   public MyWindow1()
   {
      // Create the  viewer
      theImage = new ImageBox();

      // Create Dock Panel

      DockPanel panel = new DockPanel();
      Content = panel;

      DockPanel.SetDock(theImage, Dock.Bottom);

      theImage.HorizontalAlignment = HorizontalAlignment.Center;
      theImage.VerticalAlignment= VerticalAlignment.Bottom;
      theImage.UseDpi = true;
      theImage.ScreenDpiX = 96;
      theImage.ScreenDpiY = 96;

      panel.Children.Add(theImage);

      // load an image into the viewer
      theImage.Source = new BitmapImage(new Uri(Path.Combine(LEAD_VARS.ImagesDir, "cannon.jpg")));

      Title = string.Format("Size mode = {0}, click to change", theImage.SizeMode);

      theImage.MouseDown += new MouseButtonEventHandler(theImage_MouseClick);
   }

   void theImage_MouseClick(object sender, MouseButtonEventArgs e)
   {
      switch(theImage.SizeMode)
      {
         case SizeMode.Normal:
            theImage.SizeMode = SizeMode.Stretch;
            break;

         case SizeMode.Stretch:
            theImage.SizeMode = SizeMode.Fit;
            break;

         case SizeMode.Fit:
            theImage.SizeMode = SizeMode.FitAlways;
            break;

         case SizeMode.FitAlways:
            theImage.SizeMode = SizeMode.FitWidth;
            break;

         case SizeMode.FitWidth:
            theImage.SizeMode = SizeMode.Normal;
            break;
      }

      Title = string.Format("Size mode = {0}, double click to change", theImage.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
{
   ImageBox theImage;
   public MyWindow1()
   {
      // Create the  viewer
      theImage = new ImageBox();

      // Create Dock Panel

      StackPanel panel = new StackPanel();
      Content = panel;

      theImage.HorizontalAlignment = HorizontalAlignment.Center;
      theImage.VerticalAlignment= VerticalAlignment.Bottom;
      theImage.UseDpi = true;
      theImage.ScreenDpiX = 96;
      theImage.ScreenDpiY = 96;

      panel.Children.Add(theImage);

      // load an image into the viewer
      theImage.Source = new BitmapImage(new Uri(LeadtoolsExamples.Common.ImagesPath.Path + "cannon.jpg"));

      Title = string.Format("Size mode = {0}, click to change", theImage.SizeMode);

      theImage.MouseLeftButtonDown +=new MouseButtonEventHandler(theImage_MouseLeftButtonDown);
   }

   void theImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
   {
      switch (theImage.SizeMode)
      {
         case SizeMode.Normal:
            theImage.SizeMode = SizeMode.Stretch;
            break;

         case SizeMode.Stretch:
            theImage.SizeMode = SizeMode.Fit;
            break;

         case SizeMode.Fit:
            theImage.SizeMode = SizeMode.FitAlways;
            break;

         case SizeMode.FitAlways:
            theImage.SizeMode = SizeMode.FitWidth;
            break;

         case SizeMode.FitWidth:
            theImage.SizeMode = SizeMode.Normal;
            break;
      }

      Title = string.Format("Size mode = {0}, double click to change", theImage.SizeMode);
   }
}

Imports Leadtools.Windows.Controls

Private Class MyWindow1 : Inherits ChildWindow
   Private theImage As ImageBox
   Public Sub New()
      ' Create the  viewer
      theImage = New ImageBox()

      ' Create Dock Panel

      Dim panel As StackPanel = New StackPanel()
      Content = panel

      theImage.HorizontalAlignment = HorizontalAlignment.Center
      theImage.VerticalAlignment= VerticalAlignment.Bottom
      theImage.UseDpi = True
      theImage.ScreenDpiX = 96
      theImage.ScreenDpiY = 96

      panel.Children.Add(theImage)

      ' load an image into the viewer
      theImage.Source = New BitmapImage(New Uri(LeadtoolsExamples.Common.ImagesPath.Path & "cannon.jpg"))

      Title = String.Format("Size mode = {0}, click to change", theImage.SizeMode)

      AddHandler theImage.MouseLeftButtonDown, AddressOf theImage_MouseLeftButtonDown
   End Sub

   Private Sub theImage_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
      Select Case theImage.SizeMode
         Case SizeMode.Normal
            theImage.SizeMode = SizeMode.Stretch

         Case SizeMode.Stretch
            theImage.SizeMode = SizeMode.Fit

         Case SizeMode.Fit
            theImage.SizeMode = SizeMode.FitAlways

         Case SizeMode.FitAlways
            theImage.SizeMode = SizeMode.FitWidth

         Case SizeMode.FitWidth
            theImage.SizeMode = SizeMode.Normal
      End Select

      Title = String.Format("Size mode = {0}, double click to change", theImage.SizeMode)
   End Sub
End Class

<!--WPF example-->
 <Window x:Class="WPFSamples.ImageBox"
 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:ImageBox
     Name="theImage"
   Source="file:///c:\users\Public\Documents\LEADTOOLS Images\cannon.jpg"
   DockPanel.Dock= "Bottom"
   HorizontalAlignment="Center" VerticalAlignment="Bottom" SizeMode="Fit" UseDpi="true">

     </Leadtools_Windows_Controls:ImageBox >
   </DockPanel>
   <Window.Title>
     "Apply a effect"
   </Window.Title>
 </Window>
 
 <!--Silverlight example-->
 <UserControl x:Class="SilverlightApplication1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:Leadtools_Windows_Controls="clr-namespace:Leadtools.Windows.Controls;assembly=Leadtools.Windows.Controls"
 mc:Ignorable="d"
 d:DesignHeight="300" d:DesignWidth="400">
   <Grid x:Name="LayoutRoot" Background="White">
      <Leadtools_Windows_Controls:ImageBox Name="theImage" Source="http://www.MyServer.com/images/MyImage.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" SizeMode="Fit" UseDpi="true">
      </Leadtools_Windows_Controls:ImageBox >
   </Grid>
</UserControl>

Requirements

Target Platforms

Reference

ImageBox Members
Leadtools.Windows.Controls Namespace
RasterImage and WPF/Silverlight