Display Files in the Image Viewer - MAUI C#

This tutorial shows how to display images in an Image Viewer container using the LEADTOOLS SDK in a C# MAUI application.

Required Knowledge

Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License tutorial, before working on the Display Image in an Image Viewer - MAUI C# tutorial.

This tutorial requires the implementation of several methods that are included in the aforementioned tutorial.

Create the Project and Add the LEADTOOLS References

In Visual Studio, create a new C# MAUI project, and add the following necessary LEADTOOLS references.

The references needed depend upon the purpose of the project. For this project, the following NuGet package are needed:

• Leadtools.Viewer.Controls.Maui
• Leadtools.Formats.Raster.Common
• CommunityToolkit.Maui
• SkiaSharp.Views.Maui.Controls

Add the Helper files

This project uses the helper files that can be downloaded from the Add References and Set a License tutorial to load files.

• Copy PicturePicker_Main.cs to the root of your project
• Copy PicturePicker_Android to the <APP_DIR>\Platforms\Android directory of your application
• Copy PicturePicker_iOS to the <APP_DIR>\Platforms\iOS folder of your application

Note:

Ensure that the namespace of each helper file matches that of your project, as you will need to be able to reference the methods provided by these files.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

• Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
• Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS NuGet references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Configure the build

With the project created, the references added, and the license set, coding can begin.

In the Solution Explorer, open the MauiProgram.cs and ensure that the following are added to the using area at the top of the file:

using CommunityToolkit.Maui; 
using Leadtools.Controls.Hosting; 

Configure the method chaining used in the application to reflect the dependencies

   public static MauiApp CreateMauiApp() 
   { 
      var builder = MauiApp.CreateBuilder(); 
      builder 
         .UseMauiApp<App>() 
         .ConfigureFonts(fonts => 
         { 
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); 
         }) 
         .UseLeadtoolsControls() 
         .UseMauiCommunityToolkit(); 
 
      return builder.Build(); 
   } 

Set the Application Layout

In the Project Explorer window, open the MainPage.xaml file found in the <APP_DIR> and add the following code to add a load image button and Image Viewer container.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:controls="clr-namespace:Leadtools.Controls;assembly=Leadtools.Controls.MAUI" 
             x:Class="MauiImageViewer.MainPage" 
             BackgroundColor="Transparent"> 
 
   <ScrollView> 
      <StackLayout Grid.Row="500"> 
 
         <Grid x:Name="ImageViewerContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent"> 
            <controls:ImageViewer x:Name="ImageViewer"/> 
         </Grid> 
          
         <Button x:Name="_loadFromGallery" Text="Load" Clicked="_loadFromGallery_Clicked" Padding="10" Margin="20" HorizontalOptions="Center" VerticalOptions="Center"/> 
       
      </StackLayout> 
   </ScrollView> 
    
</ContentPage> 

Note:

Ensure that the Class name in the ContentPage tag matches that of your project.

Create the Viewer

Using the Solution Explorer, open the MainPage.xaml.cs and add the following code to create the image viewer. This connects the XAML Image Viewer container with our Image Viewer object so that it will be rendered appropriately.

using Leadtools; 
using Leadtools.Codecs; 
using System.ComponentModel; 
using System.Text; 
using Leadtools.Controls; 
 
 
public partial class MainPage : ContentPage 
{ 
   private ImageViewer imageviewer; 
   private RasterImage image; 
 
   public MainPage() 
   { 
      InitializeComponent(); 
 
      Dispatcher.Dispatch(async () => 
      { 
         InitLead(this); 
         InitViewer(this); 
      }); 
   } 
 
   private void InitViewer(Page mainPage) 
   { 
      imageviewer = new ImageViewer(); 
      ImageViewer.AutoResetOptions = ImageViewerAutoResetOptions.None; 
      imageviewer.InteractiveModes.BeginUpdate(); 
      imageviewer.InteractiveModes.Add(new ImageViewerPanZoomInteractiveMode { IsEnabled = true }); 
      ImageViewerContainer.Children.Add(imageviewer); 
      imageviewer.InteractiveModes.EndUpdate(); 
   } 
 
   private async void _loadFromGallery_Clicked(object sender, EventArgs e) 
   { 
      try 
      { 
         Stream stream = await new PicturePicker().GetImageStreamAsync(); 
         { 
            if (stream != null) 
            { 
               using (RasterCodecs codecs = new RasterCodecs()) 
               { 
                  image = codecs.Load(stream); 
                  imageviewer.Image = image; 
               } 
            } 
         } 
      } 
      catch (Exception ex) 
      { 
         await DisplayAlert("Error", ex.ToString(), "OK"); 
      } 
   } 
} 

Run the Project

Select the desired emulator (iOS, Android, or Windows) and run the project by pressing F5, or by selecting Debug -> Start Debugging.

If the steps were followed correctly, the application now runs. Click the Load button at the bottom of the device's screen and select any of the images in the device's gallery. The image will then load as a RasterImage and display in the ImageViewer container.

Wrap-up

This tutorial showed how to load and display images in a MAUI application. In addition, it showed how to use the ImageViewer and RasterCodecs classes.

See Also

• LEADTOOLS ImageViewer Documentation
• LEADTOOLS RasterImage Documentation
• LEADTOOLS RasterCodecs Documentation
• LEADTOOLS SDK Download