Exploration de la visionneuse PDF pour vos applications d’éducation .net Maui

De quoi votre application éducative a-t-elle besoin? Un spectateur PDF! Voici comment en ajouter une à votre application .net Maui avec facilité.

Vous souvenez-vous de ces moments où vous aviez besoin d’étudier des matériaux, mais votre imprimante a manqué d’encre quand vous en avez le plus besoin? 🥲 (J’y suis allé aussi.) Mais imaginez si vous aviez la possibilité d’accéder à tous ces documents numériquement pour votre préparation académique. Cette seule chose aurait pu vous éviter de ne pas avoir votre matériel prêt simplement parce que vous ne pouviez pas les imprimer.

La technologie continue d’évoluer pour rendre notre vie quotidienne moins stressante et nous donner un accès plus facile aux outils dont nous avons besoin – et l’éducation ne fait pas exception. Les applications éducatives peuvent désormais inclure des écosystèmes entiers où les documents peuvent être ouverts directement au format PDF. C’est exactement ce que nous explorerons dans cet article.

Nous allons jeter un œil à la progression de l’interface utilisateur de Telerik Visionneuse PDF .net Mauiun outil qui facilite l’affichage des PDF à l’intérieur de vos applications .net Maui – parfait pour l’éducation et au-delà!

Qu’est-ce que le téléspectateur Telerik PDF?

L’interface utilisateur Telerik pour .NET MAUI PDF Viewer permet aux utilisateurs d’ouvrir et de visualiser les documents PDF directement dans leurs applications .NET MAUI. Il comprend tout ce dont vous avez besoin pour une expérience de mise en œuvre en douceur – du support complet et de la documentation détaillée aux démos et aux ressources explicatives.

Ce contrôle fait partie de l’interface utilisateur de Telerik pour Bibliothèque .net Mauiqui comprend plus de 60 composants d’interface utilisateur conçus par des professionnels pour vous aider à créer des applications multiplateformes puissantes et modernes.

Apprenez-en plus sur la structure du spectateur PDF

Le spectateur PDF est composé de deux éléments principaux:

• Contrôle de la visionneuse PDF: C’est le domaine où le contenu PDF est affiché. Les utilisateurs peuvent afficher et interagir avec le document directement dans votre interface d’application.
• Barbaire d’outils PDF Viewer: Ceci est la barre d’outils située au haut de la visionneuse PDF composant. Il comprend plusieurs boutons intégrés qui permettent aux utilisateurs d’effectuer des actions communes telles que zoomer, zoomer, naviguer entre les pages, rechercher dans le document et plus encore.

Par défaut, la barre d’outils PDF Viewer fournit les éléments suivants, comme détaillé dans le tableau ci-dessous:

Et la meilleure partie? En plus des éléments prédéfinis, si vous avez besoin de quelque chose qui n’est pas déjà inclus, vous pouvez facilement Ajoutez vos propres éléments personnalisés dans la barre d’outils Pour adapter l’expérience à vos besoins spécifiques! 😎 Vous pouvez trouver plus d’informations sur la façon de Personnalisez les articles ici.

À quoi ressemblerait le composant?

Vous trouverez ci-dessous un exemple de la façon dont le composant apparaîtrait sur vos différentes applications de plate-forme. 😎

Curieux de savoir comment commencer? 🤔

Maintenant que vous avez vu les résultats incroyables que vous pouvez obtenir, passons à la façon de le donner vie! Vous pouvez être opérationnel en quelques étapes faciles en utilisant l’essai gratuit de Telerik.

Assurez-vous d’abord que vous disposez des conditions suivantes prêtes:

Une fois que toutes les conditions préalables sont définies, vous êtes prêt à commencer!

Étape 1: Ajouter l’espace de noms Telerik

Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Étape 2: Ajoutez la visionneuse PDF au XAML

<telerik:RadPdfViewer x:Name="pdfViewer" AutomationId="pdfViewer"/>

Étape 3: Enregistrez Telerik dans Mauiprogram.cs

Dirigez-vous vers votre Mauprogram.cs fichier et, à l’intérieur du Createmauiapp Méthode, ajouter .UseTelerik() Pour permettre les commandes de Telerik. Placez-le juste au-dessus .UseMauiApp<App>()comme ça:

using Telerik.Maui.Controls.Compatibility;

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

Étape 4: Définissez la source PDF

Pour afficher le document PDF, affectez simplement le fichier au .Source propriété du composant PDFViewer.

Cette propriété s’attend à un délégué de type Func<CancellationToken, Task<Stream>>qui devrait renvoyer un flux contenant le contenu du fichier PDF que vous souhaitez afficher dans la visionneuse.

Jetons un coup d’œil à afficher un document PDF intégré comme une ressource:

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() => 
{ 
    Assembly assembly = typeof(GettingStartedXaml).Assembly; 
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdf-hello-sample.pdf")); 
    Stream stream = assembly.GetManifestResourceStream(fileName); 
    return stream; 
});
    
this.pdfViewer.Source = streamFunc;

Explorons quelques choses supplémentaires 👀

Affichage d’un document à partir d’un URI

Vous pouvez facilement charger un PDF à partir d’une source en ligne en utilisant l’une des approches suivantes:

🔹 Option 1 – Attribuez directement l’URI:

Uri uri = this.GetUri();
this.pdfViewer.Source = uri;

🔹 Option 2 – Utilisez la classe UridoCuntSource:

Uri uri = this.GetUri();
this.pdfViewer.Source = new UriDocumentSource(uri);

Choisissez celui qui convient le mieux à vos besoins de mise en œuvre. 😉

Affichage d’un document à partir d’un fichier

Vous pouvez également afficher un document stocké localement sur l’appareil! Pour ce faire, passez simplement le chemin du fichier au Source une propriété comme tel:

this.pdfViewer.Source = filePath;

Pour vous assurer que le fichier existe, vous pouvez valider le chemin en utilisant la ligne suivante:

System.IO.File.OpenRead(filePath);

✍️ Gardez à l’esprit que votre application doit avoir les autorisations nécessaires pour accéder au stockage local.

Affichage d’un document à partir d’un tableau d’octets

Il est très simple d’afficher un document à partir d’un tableau d’octets – vous pouvez le faire comme ceci:

byte[] bytes = this.GetBytes(); 
this.pdfViewer.Source = bytes;

Ou en utilisant le ByteArrayDocumentsource classe:

byte[] bytes = this.GetBytes();
this.pdfViewer.Source = new ByteArrayDocumentSource(bytes, true);

Modes de mise en page

Vous pouvez choisir entre deux modes de mise en page, qui peuvent être configurés à l’aide du LayoutMode propriété du composant:

• Continu (Mode par défaut): affiche les pages dans une colonne verticale continue. Contrairement à la deuxième option de mise en page, ce mode vous permet de voir le flux de la page suivante, offrant une expérience de lecture plus transparente.
• SinglePage: Affiche une page à la fois. Pour voir d’autres pages, vous devrez glisser.

Vous pouvez basculer entre les modes de mise en page en utilisant le Togglelayoutmodecommand ou le Togglelayoutmodetoolbaritem.

Documents PDF protégés par mot de passe

Vous pouvez également travailler avec des documents PDF protégés par mot de passe. 😎

Pour informer le spectateur que le document nécessite un mot de passe pour accéder, il vous suffit de gérer l’événement SourcePasswordNeed. Cet événement fournit deux paramètres:

• expéditeur (Type Object): Bien qu’il s’agisse d’un objet générique, dans ce contexte, il représente le contrôle RADPDFViewer.
• PasswordNeedEventEventArgs: Contient la propriété du mot de passe, où vous pouvez définir le mot de passe requis pour accéder au document.

Vous pouvez l’implémenter comme suit:

🔹Déclaration de contrôle de la visionneuse PDF

<telerik:RadPdfViewer x:Name="pdfViewer" SourcePasswordNeeded="pdfViewer_SourcePasswordNeeded" />

🔹 Implémentation du gestionnaire d’événements

private void pdfViewer_SourcePasswordNeeded(object sender, Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.Import.PasswordNeededEventArgs e) 
{ 
    e.Password = "my_user_password_here"; 
}

Lien annotations

Oui! Vous pouvez également travailler avec des liens dans la visionneuse PDF .net Maui. 😎

Vous pouvez le faire en cliquant sur un hyperlien pour ouvrir le navigateur, ou en naviguant vers des signets dans le même document!

Pour y parvenir, vous devez gérer le LinkAnnotationTapped événement, qui est déclenché lorsque l’utilisateur tape sur un lien. Cet événement fournit deux paramètres:

🔹 expéditeur (type d’objet): Bien qu’il s’agisse d’un objet générique, dans ce contexte, il représente le contrôle RADPDFViewer.
🔹 LinkAnnotationTappeEventArgs: Fournit des informations sur le lien taraudé et vous permet de contrôler son comportement. Il comprend:

• LinkAnnotation: Contient des détails sur le lien sélectionné, y compris l’action associée:
• Uriction: Ouvre une URL dans le navigateur de l’appareil.
• Gotoaction: navigue vers une position spécifique dans le même document PDF.
• Manipulé (bool): vous permet d’annuler le comportement par défaut de l’ouverture du lien.

Voyons un exemple

Étape 1 – Déclarez la visionneuse PDF

<telerik:RadPdfViewer x:Name="pdfViewer" LinkAnnotationTapped="LinkTapped" />

Étape 2 – Implémentez le gestionnaire de l’événement LinkAnnotationTapt

private void LinkTapped(object sender, Telerik.Maui.Controls.PdfViewer.Annotations.LinkAnnotationTappedEventArgs e) 
    { 
    if (e.LinkAnnotation.Action is UriAction uriAction)
	    { 
	    e.Handled = true;
		    Application.Current.MainPage.DisplayAlert("Confirm", "Are you sure you want to navigate", "Yes", "No").ContinueWith(t => 
		    { 
		    bool shouldNavigateAway = t.Status == TaskStatus.RanToCompletion ? t.Result : false; 
		    if (shouldNavigateAway) 
		    { 
			    Dispatcher.Dispatch(() => 
		    { 
		    Launcher.OpenAsync(uriAction.Uri); 
		    }); 
		    } 
	    }); 
    } 
}

C’est ça! Vous avez réussi à intégrer des annotations de liaison dans votre application .net Maui en quelques étapes faciles!

Conclusion

Dans cet article, vous avez appris à implémenter facilement la visionneuse PDF dans vos applications .net Maui, ainsi qu’à explorer des fonctionnalités puissantes telles que les annotations de liaison, les modes de mise en page, différentes façons d’afficher des fichiers PDF et d’autres capacités super utiles!

✨ J’espère que vous l’avez apprécié et qu’à partir de maintenant, vous commencerez à l’intégrer dans vos applications .net Maui pour offrir à vos utilisateurs une expérience encore meilleure et plus polie.

N’oubliez pas que Telerik UI pour .net Maui est livré avec un essai gratuit de 30 jours.

Essayer maintenant

Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires. 💚💕

Rendez-vous la prochaine fois! 🙋‍♀️

Références