Personnalisation de l’interface utilisateur Telerik pour WinForms RadOpenFileDialog

Besoin de personnaliser les fenêtres de fichiers et les boîtes de dialogue de votre application ? Découvrez comment procéder avec l’interface utilisateur Telerik pour WinForms RadOpenFileDialog.

Progrès Interface utilisateur Telerik pour WinForms inclut un composant hautement personnalisable qui remplace le composant par défaut OpenFileDialog à partir de .NET. J’ai participé au développement, en faisant une demande de fonctionnalité pour ajouter des emplacements personnalisés au navigateur de dialogue. La fonctionnalité a été implémentée dans la prochaine version.

Cet article illustre cela ainsi qu’une autre personnalisation qui aide un utilisateur à sélectionner rapidement le dernier fichier modifié dans les dossiers lors de leur navigation ; la personnalisation modifie l’ordre de la liste des fichiers en fonction du dernier changement de date/heure.

J’ai eu l’idée en accompagnant des utilisateurs dans un cabinet d’avocats car ils ajoutaient souvent au suivi de l’application que je développais le dernier dossier sur lequel ils travaillaient.

Les autres personnalisations présentées dans cet article incluent :

• Définissez des emplacements personnalisés tels que :
  » Le chemin de l’application du dossier
  » Le parcours OneDrive
  » Le chemin des téléchargements
  
  » Les unités motrices sur le PC
• Changer le texte dans une boîte de dialogue
• Configurer un thème spécifique pour la boîte de dialogue Ouvrir un fichier
• Afficher les lignes du quadrillage
• Restaurer le dernier répertoire par défaut

Implémentation des personnalisations

Commencez par créer un fichier .CS avec une classe héritée de RadOpenFileDialog. Ajoutez la méthode du composant conteneur, requise pour l’implémentation. Votre fichier ressemblera à ceci :

using System.ComponentModel;
using Telerik.WinControls.UI;

namespace Telerik.Customized;

public class MyRadOpenFileDialog : RadOpenFileDialog
{
    public MyRadOpenFileDialog()
    {
       
    }

    public MyRadOpenFileDialog(IContainer components)
    {

    }
}

Choisissez un espace de noms et un nom de classe qui conviennent à votre projet.

Définir des lieux personnalisés

Les emplacements personnalisés vous permettent d’ajouter par programme des chemins en haut de l’arborescence de navigation. Vous pouvez configurer le chemin à partir des variables d’environnement ou des paramètres de configuration de l’application.

Créez une liste des lieux initialisés avec ces éléments :

• Chemin d’accès au dossier Application (codé en dur dans cet exemple)
• Le chemin de la variable d’environnement OneDrive
• Le chemin de téléchargement depuis l’environnement du système d’exploitation

var places = new List<string>
{
    "C:\\MyAppPlace",
    Environment.GetEnvironmentVariable("OneDrive") ?? "C:\\",
    Environment.GetFolderPath(Environment.SpecialFolder.UserProfile) + "\\Downloads"
};

Ajoutez les pilotes d’unité prêts :

places.AddRange(DriveInfo.GetDrives()
    .ToList()
    .Where(t => t.IsReady)
    .Select(drv => drv.Name));

Ajoutez les lieux personnalisés sur le ExplorerControl méthode de la OpenFileDialogForm propriété:

this.OpenFileDialogForm.ExplorerControl.AddCustomPlacesNode("My custom places",
            TelerikWinFormsApp1.Properties.Resources.Clipe16, places);

Vous pouvez ajouter tout ce dont vous avez besoin sur l’étiquette (nodeName). Ajoutez également une image qui représentera le nœud.

À ce stade, votre personnalisation ressemblera à ceci :

Modifier le texte de la boîte de dialogue

Vous pouvez remplacer le texte des fenêtres de boîte de dialogue par du texte personnalisé provenant d’Open File. Corrigez-le pour l’ensemble de l’application en ajoutant le texte suivant dans l’initialisation de la classe :

this.OpenFileDialogForm.Text = "Open File - Default Text - Brand and My Company Name";

Et vous pouvez ajouter une nouvelle propriété pour personnaliser chaque boîte de dialogue que vous créez :

public string DialogText
{
    get => OpenFileDialogForm.Text;
    set => OpenFileDialogForm.Text = value;
}

Configurer un thème spécifique pour la boîte de dialogue Fichier

La boîte de dialogue de fichier peut utiliser un thème différent de celui de l’application. Par exemple, si vous utilisez un thème Fluent dans l’application et que votre système d’exploitation cible est Windows 11, vous pouvez appliquer le thème Windows 11 de Telerik.

this.OpenFileDialogForm.ExplorerControl.MainNavigationTreeView.ElementTree.EnableApplicationThemeName = false; 
this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ElementTree.EnableApplicationThemeName = false;
this.OpenFileDialogForm.ElementTree.ThemeName = "Windows11";
this.OpenFileDialogForm.ExplorerControl.MainNavigationTreeView.ElementTree.ThemeName = "Windows11";
this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ElementTree.ThemeName = "Windows11";

Avant de pouvoir utiliser le thèmeil faut le charger, donc avant ces lignes, ajoutez cette commande :

new Telerik.WinControls.Themes.Windows11Theme().DeserializeTheme();

Trier les fichiers par dernière modification

Pour trier les fichiers, vous devez configurer le descripteur de tri dans l’événement de chargement. Ajoutez cette ligne à l’initialisation de la classe :

this.OpenFileDialogForm.Load += OpenFileDialogForm_Load;

this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ViewType = ListViewType.DetailsView;

this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableSorting = true;

this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableColumnSort = true;

Créez ensuite le OpenFileDialogForm_Load méthode définissant les descripteurs de tri. Le FileBrowserListView est un RadGridView que vous pouvez personnaliser, comme d’habitude.

private void OpenFileDialogForm_Load(object? sender, EventArgs e)
{
    if (this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.SortDescriptors.Count == 0)
    {
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableSorting = true;
        var sort = new SortDescriptor(OpenFileDialogForm.ExplorerControl.FileBrowserListView.Columns[2].Name,
            ListSortDirection.Descending);
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.SortDescriptors.Add(sort);
    }
    this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ViewType = ListViewType.DetailsView;

}

Afficher les lignes de quadrillage

Pour aider les personnes malvoyantes, activez ShowGridLines. Les lignes de quadrillage peuvent être une option cohérente avec votre RadGridView conception d’applications.

this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ShowGridLines = true;

Restaurer le dernier répertoire par défaut

Vous pouvez activer une option par défaut pour mémoriser le dernier répertoire pendant que l’instance de classe OpenFileDialogForm est en cours d’utilisation (si vous créez une nouvelle instance ou redémarrez l’application, le dernier répertoire ne sera pas stocké). Faites-le en définissant cette ligne lors de l’initialisation :

  this.RestoreDirectory = true;

Utilisation de la boîte de dialogue Fichier personnalisé

Pour remplacer l’existant RadOpenFileDialogremplacez-le par le nom de la classe personnalisée lors de l’initialisation :

var fileDialog = new MyRadOpenFileDialog();
fileDialog.DialogText = "My Brand and My Company Name";
fileDialog.Filter = "Microsoft Excel (*.xls;*.xlsx)|*.xls;*.xlsx";
DialogResult dr = fileDialog.ShowDialog();
if (dr == System.Windows.Forms.DialogResult.OK)
{
    var file = fileDialog.FileName;
    
}

Conclusion

Les personnalisations constituent un moyen important de rendre les applications plus efficaces. Faciliter le tri de nombreux fichiers dans un répertoire permet aux utilisateurs de gagner du temps en un seul clic sur le Nom colonne. La personnalisation d’une légende pourrait faire la différence dans l’image de marque de votre produit. Être capable d’utiliser un thème contrasté pour une boîte de dialogue de fichier peut encourager un utilisateur à y prêter attention.

Le résultat de ces personnalisations pourrait ressembler à ceci :

Si vous souhaitez consulter le code source complet utilisé dans cet article, veuillez le consulter ci-dessous :

using System.Collections.Generic;
using System;
using System.Linq;
using System.ComponentModel;
using System.IO;
using Telerik.WinControls.Data;
using Telerik.WinControls.UI;

namespace Telerik.Customized;

public class MyRadOpenFileDialog : RadOpenFileDialog
{
    public MyRadOpenFileDialog()
    {
        this.OpenFileDialogForm.Load += OpenFileDialogForm_Load;

        var places = new List<string>
        {
            "C:\\MyAppPlace",
            Environment.GetEnvironmentVariable("OneDrive") ?? "C:\\",
            Environment.GetFolderPath(Environment.SpecialFolder.UserProfile) + "\\Downloads"
        };

        places.AddRange(DriveInfo.GetDrives()
            .ToList()
            .Where(t => t.IsReady)
            .Select(drv => drv.Name));

        this.OpenFileDialogForm.ExplorerControl.AddCustomPlacesNode("My custom places",
                TelerikWinFormsApp1.Properties.Resources.Clipe16, places);

        this.OpenFileDialogForm.Text = "Open File - Defatult Text - Brand and My Company Name";

        new WinControls.Themes.Windows11Theme().DeserializeTheme();

        this.OpenFileDialogForm.ExplorerControl.MainNavigationTreeView.ElementTree.EnableApplicationThemeName = false;
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ElementTree.EnableApplicationThemeName = false;
        this.OpenFileDialogForm.ElementTree.ThemeName = "Windows11";
        this.OpenFileDialogForm.ExplorerControl.MainNavigationTreeView.ElementTree.ThemeName = "Windows11";
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ElementTree.ThemeName = "Windows11";

        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ShowGridLines = true;

        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ViewType = ListViewType.DetailsView;
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableSorting = true;
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableColumnSort = true;

        this.RestoreDirectory = true;

    }

    private void OpenFileDialogForm_Load(object? sender, EventArgs e)
    {
        if (this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.SortDescriptors.Count == 0)
        { 
            this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.EnableSorting = true;
            var sort = new SortDescriptor(OpenFileDialogForm.ExplorerControl.FileBrowserListView.Columns[2].Name,
                ListSortDirection.Descending);
            this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.SortDescriptors.Add(sort);
        }
        this.OpenFileDialogForm.ExplorerControl.FileBrowserListView.ViewType = ListViewType.DetailsView;

    }

    public string DialogText
    {
        get => OpenFileDialogForm.Text;
        set => OpenFileDialogForm.Text = value;
    }

    public MyRadOpenFileDialog(IContainer components)
    {

    }
}

Notez que pour personnaliser RadSaveFileDialogil vous suffit de remplacer le nom de la classe et OpenFileDialogForm avec SaveFileDialogForm.

Les références