Maîtrisez l’inspection des objets .Net avec la grille de propriétés WinUI

Vous recherchez une approche simple et polyvalente pour traiter les propriétés de n’importe quel objet .NET à l’aide d’éditeurs intégrés générés automatiquement ? Tout cela, plus la prise en charge de l’imbrication et de la personnalisation des définitions de propriétés, et, bien sûr, la possibilité de tout organiser. Tu l’as eu.

Ohé, amoureux de .NET ! Combien d’instances de Visual Studio avez-vous en cours d’exécution en ce moment ? 😅 Je parie que ce n’est pas qu’un, et je parie que la vue Propriétés est l’une des choses que vous utilisez au moins une fois par jour. Oui, celui-ci :

Vous voulez aussi l’avoir dans vos applications WinUI ? Eh bien, écartez-vous et faites du bruit lorsque le PropertyGrid passe ! Examinons l’étoile la plus brillante du Interface utilisateur Telerik pour la version 2.2.0 de WinUI ensemble.

À quoi s’attendre?

Une approche simple et polyvalente pour traiter les propriétés de n’importe quel objet .NET à l’aide d’éditeurs intégrés générés automatiquement. Prise en charge des propriétés imbriquées, ainsi que possibilité de personnaliser les définitions de propriétés et les éditeurs de données correspondants. Et enfin, mais non des moindres, la possibilité d’organiser les propriétés en utilisant le tri, le regroupement et le filtrage (recherche). Lisez la suite dans les sections suivantes.

Où commencer?

Vous n’aurez besoin d’aucune formation professionnelle avant de plonger dans les profondeurs, mais vous aurez besoin d’un projet WinUI et d’une référence à l’assembly Telerik.WinUI.Controls.dll. Et encore une chose essentielle – un bon Article à attribuer au PropertyGrid. Essayons.

Voici une classe DataInfo simple avec différents types de propriétés :

public class DataInfo
{
	public int IntegerValue { get; set; }
	public string StringValue { get; set; }
	public bool BoolValue { get; set; }
	public DateTime DateTimeValue { get; set; }
	public MyEnum EnumValue { get; set; }
	public ObservableCollection<string> StringsCollection { get; set; }
}

public enum MyEnum
{
	ValueA,
	ValueB,
	ValueC
}

Il ne reste plus qu’à en créer une instance et à l’affecter à la propriété Item de PropertyGrid :

this.propertyGrid.Item = new DataInfo()
{
	IntegerValue = 7,
	StringValue = "My String Value",
	BoolValue = true,
	DateTimeValue = DateTime.Today,
	EnumValue = MyEnum.ValueA,
	StringsCollection = new ObservableCollection<string>() { "Collection Item 1", "Collection Item 2", "Collection Item 3" }
};

Oups, mais où est le PropertyGrid ?

<telerikControls:RadPropertyGrid x:Name="propertyGrid"/>

Désireux de voir ce que nos pouvoirs de sorcellerie ont créé ?

Si ce System.Collections.ObjectModel.ObservableCollection1[System.String] vous ennuie, voici le remède :

public class CoolerObservableCollection : ObservableCollection<string>
{
    public override string ToString()
    {
        return "MyAwesomeCollection";
    }
}

Et puis, modifiez StringsCollection pour qu’il soit de type CoolerObservableCollection. Le résultat sera le suivant :

Tant qu’on est sur le sujet des collections, voici un autre bonus : les boosters de collection. je parle de la Éditeur de collection et CollectionEditorPicker— deux composants utilisés pour visualiser les éléments d’une collection et générer des éditeurs pour chaque propriété en utilisant — devinez quoi ! — le contrôle PropertyGrid intégré.

Il y en a un de plus, le CollectionNavigator—qui est un composant offrant une navigation et une édition transparentes d’une collection, ainsi que des commandes personnalisables intégrées, des boutons personnalisables prédéfinis et plus encore. Assurez-vous de consulter le Éditeur de collection et CollectionNavigator sections de la documentation d’aide.

Maintenant, revenons à la grille des propriétés et étendons un peu les données pour jeter un coup d’œil au nid.

Qu’y a-t-il à l’intérieur du nid ?

La première chose qui m’est venue à l’esprit était de créer une classe d’autorisations système simple :

public class SystemPermissionsInfo
{
	public bool CanRead { get; set; }
	public bool CanWrite { get; set; }
	public bool CanModify { get; set; }
}

Allons-nous ajouter cela au DataInfo ?

public SystemPermissionsInfo SystemPermissions { get; set; }

Et, bien sûr, à l’article :

SystemPermissions = new SystemPermissionsInfo() { CanRead = true, CanWrite = false, CanModify = false }

N’oubliez pas de régler le NestedPropertiesVisibility à Visible comme je l’ai fait, car le seul nid que vous verrez sera vide. 😅

Dans le GIF ci-dessus, vous avez non seulement vu ce qu’il y a à l’intérieur du nid, mais vous avez également constaté que le PropertyGrid permet de modifier les valeurs de propriété affichées dans l’interface utilisateur. Vous devriez totalement vérifier le Édition de la documentation en ligne du contrôle pour connaître les trucs et astuces permettant d’ajuster le processus d’édition.

Je pense qu’une grande possibilité ici serait de changer les modèles d’éditeur pour les autorisations système. Suis-moi.

<telerikControls:RadPropertyGrid x:Name="propertyGrid2"
                                 NestedPropertiesVisibility="Visible"
                                 AutoGeneratePropertyDefinitions="False"
                                 Margin="20">
    <telerikControls:RadPropertyGrid.PropertyDefinitions>
        <propertyGrid:PropertyDefinition DisplayName="SystemPermissions"
                                         Binding="{Binding SystemPermissions}">
            <propertyGrid:PropertyDefinition.NestedProperties>
                <propertyGrid:PropertyDefinition DisplayName="CanRead" Binding="{Binding CanRead}">
                    <propertyGrid:PropertyDefinition.EditorTemplate>
                        <DataTemplate>
                            <ToggleSwitch IsOn="{Binding SystemPermissions.CanRead, Mode=TwoWay}"/>
                        </DataTemplate>
                    </propertyGrid:PropertyDefinition.EditorTemplate>
                </propertyGrid:PropertyDefinition>
                <propertyGrid:PropertyDefinition DisplayName="CanWrite" Binding="{Binding CanWrite}">
                    <propertyGrid:PropertyDefinition.EditorTemplate>
                        <DataTemplate>
                            <ToggleSwitch IsOn="{Binding SystemPermissions.CanWrite, Mode=TwoWay}"/>
                        </DataTemplate>
                    </propertyGrid:PropertyDefinition.EditorTemplate>
                </propertyGrid:PropertyDefinition>
                <propertyGrid:PropertyDefinition DisplayName="CanModify" Binding="{Binding CanModify}">
                    <propertyGrid:PropertyDefinition.EditorTemplate>
                        <DataTemplate>
                            <ToggleSwitch IsOn="{Binding SystemPermissions.CanModify, Mode=TwoWay}"/>
                        </DataTemplate>
                    </propertyGrid:PropertyDefinition.EditorTemplate>
                </propertyGrid:PropertyDefinition>
            </propertyGrid:PropertyDefinition.NestedProperties>
        </propertyGrid:PropertyDefinition>
    </telerikControls:RadPropertyGrid.PropertyDefinitions>
</telerikControls:RadPropertyGrid>

Oui, j’ai créé une deuxième instance de PropertyGrid et changé les éditeurs pour mes autorisations en ToggleSwitch au lieu de CheckBox. Voyez comme c’est cool :

La gamme d’arrangement

Au tout début de mon blog, j’énumérais quelques attentes. Pour que tous ces éléments soient satisfaits, je dois vous montrer la gamme d’arrangements que propose la grille de propriétés. Je vous ai dit que vous pouviez organiser les propriétés à travers trois opérations très courantes et essentielles : le tri, le regroupement et le filtrage (recherche).

Il s’agit de la structure visuelle du PropertyGrid, mais l’accent est mis sur les éléments visuels responsables des opérations mentionnées ci-dessus. J’ai eu une idée géniale où vous pouvez les voir tous en action.

Mesdames et messieurs, ce n’est que la démo First Look de ce composant génial – il y a plus. Assurez-vous d’obtenir le application démos et vérifiez le reste – cela en vaut vraiment la peine.

Soyez au volant

Vos commentaires sont très importants car ils nous aident à entendre votre voix et à déterminer la direction à prendre pour le développement des produits. Si vous souhaitez ajouter ou modifier quelque chose, ne restez pas immobile – partagez vos réflexions dans les commentaires ci-dessous ou utilisez le Portail de commentaires.

Branchez le PropertyGrid dans votre application WinUI et faites-nous savoir quelle impression cela a fait. Les clients existants peuvent accéder aux éléments de Telerik UI pour WinUI dans leur compte Telerik. Nouveaux utilisateurs—suivez le lien ci-dessous.

Essayez la dernière interface utilisateur Telerik pour WinUI