Display files in the Image Viewer - MAUI C#

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

Overview  
Summary This tutorial covers how to display images in an Image Viewer using the LEADTOOLS SDK in a C# MAUI application.
Completion Time 30 minutes
Visual Studio Project Download tutorial project (160 KB)
Platform C# MAUI Cross-Platform Application
IDE Visual Studio 2019, 2022
Development License Download LEADTOOLS

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.

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:

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.

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:

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 MainPage.xaml.cs and ensure that the following are added to the using area at the top of the code:

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

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

C#
   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.

C#
<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" 
             Title=""> 
 
 
   <ScrollView> 
 
      <StackLayout> 
 
         <Grid> 
            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="ImageViewerContainer" Margin="0" Padding="0" BackgroundColor="Grey"/> 
            <controls:ImageViewer x:Name="ImageViewer" BackgroundColor="Transparent" /> 
         </Grid> 
         <Button x:Name="_loadFromGallery" Text="Load" BorderColor="LightCoral" Clicked="_loadFromGallery_Clicked" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> 
 
      </StackLayout> 
 
   </ScrollView> 
 
</ContentPage> 

Create the Viewer

Using the Solution Explorer, open the MainPage.xaml.cs and add the following code to create the image viewer.

C#
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 () => 
      { 
         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.

Android Device Screen Capture

Wrap-up

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

See Also

Help Version 23.0.2024.3.11
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2024 LEAD Technologies, Inc. All Rights Reserved.


Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.