Fermer

décembre 13, 2021

Créer un sélecteur de fichiers à l'aide de Xamarin.Essentials et de l'interface utilisateur Telerik


Vous voulez récupérer des fichiers sur l'appareil et les visualiser dans vos applications mobiles et de bureau ? Aucun problème! C'est plus que facile avec les contrôles Xamarin.Essentials et Telerik UI for Xamarin.

Dans cet article de blog, nous verrons comment utiliser l'API FilePicker. Nous mettrons en œuvre un exemple d'interface utilisateur pour sélectionner des images, des documents pdf et sélectionner plusieurs images. Mais quelle est la suite ? 🧐 Nous voulons visualiser ces fichiers dans notre application, nous avons donc besoin de contrôles appropriés, n'est-ce pas ? Et la suite Telerik UI pour Xamarin vient nous aider ! 🎉

Mise en route avec Xamarin.Essentials FilePicker

Le FilePicker nous permet de sélectionner un ou plusieurs fichiers à partir de l'appareil plus que facilement. Nous avons besoin d'un seul package NuGet installé sur notre projet existant ou nouveau projet—Xamarin.Essentials NuGet package.

Platform Settings

📗 Sur Android

1. Assurez-vous que Xamarin.Essentials est initialisé dans la méthode OnCreate() du fichier MainActivity.cs du projet Android :

Xamarin.Essentials.Platform.Init (ceci,état de l'instance enregistré);

2. Pour gérer les autorisations d'exécution sur Android, dans le fichier MainActivity.cs — remplacez la OnRequestPermissionsResult() method:

public override void OnRequestPermissionsResult( int requestCode, string[] autorisations, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)

{

Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

base.OnRequestPermissionsResult, grantRequestCode, );

}

3. Accordez des autorisations pour lire les données du stockage externe. Nous pouvons utiliser l'une des options suivantes :

  • Ouvrir le fichier AssemblyInfo.cs situé dans le dossier Properties et ajouter le code suivant :

    [assembly: UsesPermission(Android.Manifest.Permission.ReadExternalStorage)]

  • Ouvrir le AndroidManifest .xml dans le dossier Properties et ajoutez ce qui suit à l'intérieur du nœud manifeste :

    <uses-permission android:name=" android.permission.READ_EXTERNAL_STORAGE" />

Système contextuel des autorisations Android :

Autorisations de stockage des appareils Android

✅ iOS et UWP

Ils ne nécessitent pas de configuration supplémentaire.

API FilePicker

]La classe FilePicker nous donne deux méthodes pour sélectionner le(s) fichier(s) :

  • PickAsync() – nous donne la possibilité de sélectionner un seul fichier sur l'appareil.
  • PickMultipleAsync () – nous donne la possibilité de choisir plusieurs fichiers sur l'appareil.

Les deux méthodes ont un paramètre PickOp tions pour spécifier des informations supplémentaires telles que :

  • PickerTitle – qui n'est utilisé que sur la plate-forme Android
  • FileTypes avec des types prédéfinis tels que Images, Png, Jpeg, Vidéos, Pdf

var seletedImage = wait FilePicker.PickAsync(new PickOptions

{

]FileTypes = FilePickerFileType.Images,

PickerTitle = "Sélectionnez une image"

});

Bien sûr, nous pouvons spécifier des types de fichiers personnalisés par plate-forme. Par exemple, si nous voulons que l'utilisateur puisse choisir un fichier .txt sur iOS, un fichier .pdf sur Android et des fichiers .txt/.pdf/.docx sur UWP, nous utiliserons le code simple suivant :[19659010]var customFileType =

new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>[19659002]{

{ DevicePlatform.iOS, nouveau[] { ". txt" } },

{ DevicePlatform.Android, nouveau[] { [19659034]".png" } },

{ DevicePlatform.UWP, nouveau[] { ".docx"".txt"".pdf" } },

});

var options = new PickOptions

{

PickerTitle = "Veuillez sélectionner une bande dessinée",

FileTypes = customFileType,

};

var result = wait FilePicker.PickAsync(options);[19659055]Nous utiliserons les méthodes PickAsync() et PickMultipleAsync() dans notre démo.👌

❗ Nous devons ajouter l'espace de noms suivant où l'API FilePicker est utilisée :

using Xamarin.Essentials;

Demo Time 😍

Voici à quoi ressemble la démo FilePicker :

file picker demo xamarin

La démo utilise l'interface utilisateur Telerik suivante pour les contrôles Xamarin :

  • RadTabView pour basculer entre n différentes options : image unique, fichier PDF et sélection d'images multiples
  • RadButton pour son événement Click, qui ouvrira le sélecteur de fichiers
  • RadPdfViewer pour visualiser le document PDF sélectionné
  • RadListView pour visualiser plusieurs images

J'ai ajouté l'interface utilisateur Telerik pour les contrôles Xamarin au projet à l'aide du Telerik NuGet Server.

Commençons par le XAML

<?xml version="1.0" encodage="utf-8" ?>

xmlns:telerikInput="clr -namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

xmlns:telerikPrimitives=[19659034]"clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"

xmlns:telerikPdfViewer="clr-namespace:Telerik.XamarinForms.PdfViewer;assembly=Telerik.XamarinForms.PdfViewer"[196][59002][19459025 xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls" ]

x:Class="FilePickerDemo.MainPage">

<ContentPage.Resources>

<[19659011]ResourceDictionary>

<Style TargetType="telerikPrimitives : TabViewHeaderItem">

<Setter Property="TextColor"[19659032]Valeur="Noir"/>

<Setter Propriété="CouleurSélectionnée" Valeur="#0E88F2"/>

</Style>

<Style TargetType[19659012]="telerikInput:RadButton">[19659002] <Setter Property="WidthRequest" Valeur="100" />

<Setter Property="CornerRadius"[19659032]Valeur="15"/>

<Setter Propriété ="Marge" Valeur="10"/>

<Setter Property="TextColor" Valeur="White"/>

<Setter Property="Ba ckgroundColor" Valeur="#0E88F2"/>

</[19659011]Style>

</ResourceDictionary>

</ContentPage.Resources>

<Grid RowDefinitions="Auto,*">

< Label Text="Bienvenue dans la démo FilePicker"

HorizontalTextAlignment= "Centre"

TextColor="Noir"

FontSize=" 36"/>

<telerikPrimitives:RadTabView Grid.Row=[19659034]"1"

IsContentPreserved="True"

IsContentSwipingEnabled="False">

<telerikPrimitives:RadTabView.Items>

<telerikPrimitives:TabViewItem[19659032]HeaderText="Choisir une image">

<telerikPrimitives:TabViewItem. Contenu>

<StackLayout Margin="10"[19659012]>

<telerikInput:RadButton Text="Choisir une image"[19659032]Clic="OnPickImageClicked"/>

<Label x :Name="PickedImageInfo" FontSize="16" Margin="10"/>

<Image x:Name="image" HeightRequest="200" WidthRequest[19659012]="200"/>

</StackLayout>

</telerikPrimitives:TabViewItem.Content>

</telerikPrimitives:TabViewItem>

<telerikPrimitives :TabViewItem HeaderText="Pick Pdf">

<telerikPrimitives :TabViewItem.Content[19659012]>

<Grid RowDefinitions="Auto,*"[19659032]Marge="10">

<telerikInput:RadButton Text="Pick Pdf Document" Clicked="OnPickPdfClicked"/>

<telerikPdfViewer:RadPdfViewer x:Name="pdfViewer" Grid.Row="1" BackgroundColor[19659012]="Transparent"/>

</Grille>

</telerikPrimitives:TabViewItem.Content>

</[19659011]telerikPrimitives:TabViewItem>

<telerikPrimitives:TabViewItem HeaderText[196599012]== ]"Choisir plusieurs images">

<telerikPrimitives:TabViewItem.Content>

<Grid RowDefinitions="Auto,*" Marge= "10">

<telerikInput:RadButton Text= "Choisir plusieurs images" Cliced="OnPickMultipleImagesClicked"/>

<telerikDataControls:RadListView x:Name="listView" Grid.Row="1">

<telerikDataControls:RadListView.ItemTemplate>

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<[19659011]telerikListView:ListViewTemplateCell.View>

<StackLayout Marge=[19659034]"10">

<Image HeightRequest="100 "

WidthRequest="100"

VerticalOptions="Centre" Source="{Reliure .}" />[19659002] </StackLayout>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

</telerikDataControls :RadListView.ItemTemplate>

</telerikDataControls:RadListView>

</Grid>

</telerikPrimitives:TabViewItem.Content>

</telerikPrimitives:TabViewItem>

</telerikPrimitives:RadTabView.Items>

</[19659011]telerikPrimitives:RadTabView>

</Grid>[19659002]</ContentPage>

Comme vous pouvez le voir dans le XAML, nous avons un contrôle TabView avec trois TabViewItems différents. Ensuite, laissez-moi vous expliquer ce que fait chaque TabViewItem.

Sélectionner une image

Le premier onglet permet de sélectionner une seule image de l'appareil. Lorsque le bouton est cliqué, nous pouvons choisir une image de l'appareil et la visualiser dans le champ Image. Voici l'implémentation OnPickImageClicked()  :

private async void OnPickImageClicked(object sender, System.EventArgs e)[1965959]{

try

{

var seletedImage = wait FilePicker.PickAsync(new PickOptions

{

FileTypes = FilePickerFileType.Images,

PickerTitle = "Sélectionner une image"

});

if (seletedImage != null)

{

var data = wait seletedImage.OpenReadAsync();

PickedImageInfo.Text = $"Le nom du fichier : {seletedImage.FileName} et le type de fichier : {seletedImage.ContentType}" ;

image.Source = ImageSource.FromStream(() => data);

}

retour;

}

capture (Exception)

{

}

}

Choisir un fichier PDF

Le deuxième onglet permet de sélectionner un document pdf et en le visualisant dans RadPdfViewer. Voici l'implémentation OnPickPdfClicked().

private async void OnPickPdfClicked(object sender, System.EventArgs e) ]{

try

{

var selectedFile = wait FilePicker.PickAsync(new PickOptions

{

FileTypes = FilePickerFileType .Pdf,

PickerTitle = "Sélectionnez un pdf"

});

if (selectedFile != null)

{

var data = wait selectedFile.OpenReadAsync();

PdfFormatProvider provider =new PdfFormatProvider();

RadFixedDocument document = provider.Import(data);

pdfViewer.Source = document;

pdfViewer.IsVisible = true ;

}

retour[19659012];

}

capture (Exception)

{

}

}

Choisir plusieurs images

Le troisième onglet permet de sélectionner plusieurs images. Lorsque le bouton est cliqué, nous pouvons sélectionner plusieurs images de l'appareil et les visualiser dans le contrôle RadListView. Voici l'implémentation OnPickMultipleImagesClicked() :

private async void OnPickMultipleImagesClicked(object sender, EventArgs e)[1965959{

try

{

var selectedImage = wait FilePicker.PickMultipleAsync(new PickOptions[19659002] {

FileTypes = FilePickerFileType.Images,

PickerTitle = "Sélectionner les images"

});

var imageList = new List();

if (selectedImage != null)

{

foreach ( var sélectionné dans selectedImage)

{

] var data = wait selected.OpenReadAsync();

imageList.Add(ImageSource. FromStream(()=>data));

}

listView.ItemsSource = imageList;

}

retour;

}

prise (Exception)

{

}

}

Choisissez des documents HTML

Vous pouvez facilement sélectionner des documents HTML, puis les visualiser dans vos applications de bureau et mobiles à l'aide de Telerik RichTextEditor for Xamarin.

Dites-nous ce que vous pensez

Nous aimerions entendre ce que vous pensez, donc si vous avez des questions et/ou des commentaires, veuillez les partager dans notre Telerik UI for Xamarin Feedback Portal.

Si vous êtes nouveau sur Telerik UI pour Xamarin, vous pouvez le apprenez-en plus via la page produit. Il est livré avec un essai gratuit de 30 jours ce qui vous donne le temps d'explorer la boîte à outils et d'envisager de l'utiliser pour votre développement Xamarin actuel ou à venir.

World of .NET Cross-Platform Application Development[19659004]Nous aimerions également partager avec vous nos composants d'interface utilisateur d'aperçu pour .NET MAUI—Telerik UI pour .NET MAUI. Vous pouvez consulter les contrôles disponibles et leurs fonctionnalités dans notre Telerik UI pour l'application de démonstration .NET MAUI.

Bon codage avec nos contrôles !

Le meilleur outil 2023 pour ta croissance Instagram !



Source link