Create Tiff Image Viewer for WPF

Environment

Property	Value
Product	Progress Telerik UI for WPF
Version	2024.1.312

Description

How to create a control that shows TIFF images.

Solution 1

You can use the RadImageEditor control to show the .tiff image format.

At the moment of writing this article (2024), the RadImageEditor displays the .tiff only as static image.

Solution 2

If RadImageEditor is not suitable and you need to change between the multiple images in the .tiff file, then you can implement custom tiff image viewer control.

Custom Tiff Viewer Code-Behind Definition

public partial class TiffImageViewer : UserControl 
{ 
    private const double zoomStep = 0.1; 
    private const double maxZoom = 4; 
    private const double minZoom = 0.5; 
    private Point origin; 
    private Point start; 
    private BitmapImage currentImage; 
    private int currentFrame = 0; 
 
    TransformGroup transformGroup; 
    ScaleTransform scaleTransform; 
    TranslateTransform translateTransform; 
    RotateTransform rotateTransform; 
 
    public BitmapImage Source 
    { 
        get { return (BitmapImage)GetValue(SourceProperty); } 
        set { SetValue(SourceProperty, value); } 
    } 
 
    public static readonly DependencyProperty SourceProperty = 
        DependencyProperty.Register( 
            "Source",  
            typeof(BitmapImage), 
            typeof(TiffImageViewer),  
            new PropertyMetadata(null, OnImageSourceChanged)); 
 
    private static void OnImageSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
    } 
 
    public TiffImageViewer() 
    { 
        InitializeComponent(); 
 
        transformGroup = new TransformGroup(); 
        scaleTransform = new ScaleTransform(); 
        translateTransform = new TranslateTransform(); 
        rotateTransform = new RotateTransform(); 
        transformGroup.Children.Add(scaleTransform);             
        transformGroup.Children.Add(translateTransform); 
        transformGroup.Children.Add(rotateTransform); 
 
        imageVisual.RenderTransform = transformGroup; 
 
        this.slider.Minimum = minZoom; 
        this.slider.Maximum = maxZoom; 
        this.slider.Value = 1; 
    } 
 
    public void imgTiffReport_MouseWheel(object sender, MouseWheelEventArgs e) 
    {    
        double zoom = e.Delta > 0 ? zoomStep : -zoomStep;             
        if ((zoom > 0 && scaleTransform.ScaleX < maxZoom) || zoom < 0 && scaleTransform.ScaleX > minZoom) 
        { 
            scaleTransform.ScaleX += zoom; 
            scaleTransform.ScaleY += zoom; 
            imageVisual.Width = svTiffReport.ActualWidth * scaleTransform.ScaleX; 
            imageVisual.Height = svTiffReport.ActualHeight * scaleTransform.ScaleY; 
 
            this.slider.Value = scaleTransform.ScaleX; 
        } 
    } 
 
    public void imgTiffReport_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
        imageVisual.Cursor = Cursors.Hand; 
        imageVisual.CaptureMouse(); 
        start = e.GetPosition(bdrTiffReport); 
        origin = new Point(translateTransform.X, translateTransform.Y); 
    } 
 
    public void imgTiffReport_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    { 
        imageVisual.ReleaseMouseCapture(); 
        imageVisual.Cursor = Cursors.Arrow; 
    } 
 
    public void imgTiffReport_MouseMove(object sender, MouseEventArgs e) 
    { 
        if (!imageVisual.IsMouseCaptured) 
        { 
            return; 
        } 
        var vMM = start - e.GetPosition(bdrTiffReport); 
        translateTransform.X = origin.X - vMM.X; 
        translateTransform.Y = origin.Y - vMM.Y; 
    } 
 
    private void OnNextButtonClick(object sender, RoutedEventArgs e) 
    { 
        if (currentImage == null) 
        { 
            currentImage = Source; 
            currentFrame = 0; 
        } 
 
        TiffBitmapDecoder dec = new TiffBitmapDecoder(currentImage.UriSource, BitmapCreateOptions.None, BitmapCacheOption.None); 
        if (dec.Frames.Count > currentFrame + 1) 
        { 
            currentFrame += 1; 
        } 
        imageVisual.Source = dec.Frames[currentFrame]; 
    } 
 
    private void OnPreviousButtonClick(object sender, RoutedEventArgs e) 
    { 
        if (currentImage == null) 
        { 
            currentImage = Source; 
            currentFrame = 0; 
        } 
 
        TiffBitmapDecoder dec = new TiffBitmapDecoder(currentImage.UriSource, BitmapCreateOptions.None, BitmapCacheOption.None); 
        if (currentFrame > 0) 
        { 
            currentFrame -= 1; 
        } 
        imageVisual.Source = dec.Frames[currentFrame]; 
    } 
 
    private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
    { 
        if (scaleTransform != null) 
        { 
            scaleTransform.ScaleX = e.NewValue; 
            scaleTransform.ScaleY = e.NewValue; 
        }             
    } 
} 

Using the Custom Tiff Viewer

<local:TiffImageViewer> 
    <local:TiffImageViewer.Source> 
        <BitmapImage UriSource="sample.tiff" /> 
    </local:TiffImageViewer.Source> 
</local:TiffImageViewer>