Pas de designer visuel sous MAUI, mais cela n'empêche pas de créer des données de design servant à la création et la mise au point des Apps !
Introduction aux Données de Design sous MAUI
.NET MAUI permet aux développeurs de créer des applications pour plusieurs plateformes avec une seule base de code. Cependant, l'absence d'outils de prévisualisation en temps réel, comme ceux disponibles dans certains autres environnements de développement, rend nécessaire l'utilisation de solutions alternatives pour gérer les données de design.
D'ailleurs puisqu'il n'y a pas de designer visuel de quoi parle-t-on ici ?
Il est vrai que sans mode "preview" au minimum, il n'y a pas besoin de "données de design time", mais de simple "données de design" vous notez la subtile différence ! Car vous allez designer vos Apps de toute façon, notamment en utilisant le Hot Reload. Or, à ce moment de la conception de l'App il est fort possible qu'il n'y ait pas encore de données véritables à afficher. Comment régler la bonne position ou la taille de tel ou tel bouton ou de telle zone de texte si rien ne s'affiche ? Hot Relead sur un texte vide n'aide pas vraiment à voir les problèmes visuels ! Donc ici j'aborde les données de design qui ne sont en effet pas des données de "design time" dans un concepteur visuel classique, mais qui servent l'exact même but : voir de vraies données pour aider à peaufiner les mises en page. On pourrait parler de "données de debug" ce qui serait techniquement plus exact, mais pas sémantiquement. Ces données dont je parle dans cet article ne servent pas à aider au debug (elles le peuvent mais de façon très limitée), mais bien au design de l'App.
Attribut x:DataType
L'attribut x:DataType est crucial pour le binding des données au moment du design dans MAUI. Voici comment l'utiliser :
1. Ajouter l'Attribut x:DataType :
Dans votre XAML, ajoutez l'attribut x:DataType aux éléments pertinents, tels que ContentPage ou DataTemplate. Spécifiez le namespace et le type de l'objet auquel vous souhaitez lier.
<ContentPage x:DataType="local:MyViewModel">
<!-- Contenu ici -->
</ContentPage>
```
Remplacez `local` par le namespace approprié et `MyViewModel` par le type réel que vous souhaitez utiliser.
2. Définir le Namespace :
Assurez-vous d'avoir défini le namespace pour votre view model dans votre XAML en utilisant la déclaration xmlns.
xmlns:local="clr-namespace:YourApp.ViewModels"
3. Protection durant la compilation :
Contrairement à l'ancien système, x:DataType offre une protection au temps de compilation pour vos bindings, assurant leur validité et évitant les erreurs d'exécution.
Stratégies pour les Données de Design
Données de Design dans le XAML
Vous pouvez définir des données fictives directement dans vos vues XAML en utilisant le namespace `d:`. Ces données ne seront utilisées que pendant le temps de design.
<ContentPage xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:YourApp.ViewModels">
<ContentPage.BindingContext>
<local:MyViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<local:MyViewModel x:Key="DesignViewModel">
<local:MyViewModel.Items>
<x:Array Type="{x:Type local:Item}">
<local:Item Name="Item 1" />
<local:Item Name="Item 2" />
<!-- Ajoutez plus de données fictives ici -->
</x:Array>
</local:MyViewModel.Items>
</local:MyViewModel>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage d:DataContext="{StaticResource DesignViewModel}">
<!-- Vos éléments UI ici -->
</ContentPage>
</ContentPage>
Le namespace `d:` garantit que ces données ne seront utilisées qu'au temps de design.
Données Conditionnelles pour le Mode Debug
Dans votre view model, vous pouvez conditionnellement fournir des données spécifiques au débogage.
public class MyViewModel
{
public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>();
public MyViewModel()
{
if (Debugger.IsAttached)
{
// Ajouter des données spécifiques au débogage
Items.Add(new Item { Name = "Debug Item 1" });
Items.Add(new Item { Name = "Debug Item 2" });
}
}
}
De cette manière, les données de débogage ne seront présentes que lorsque l'application est en mode debug.
Utilisation des Symboles de Compilation Conditionnelle
Définissez des symboles de compilation personnalisés (par exemple, DEBUG) dans les paramètres de votre projet, puis conditionnellement, peupler vos données en fonction de ces symboles.
public class MyViewModel
{
public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>();
public MyViewModel()
{
#if DEBUG
// Ajouter des données spécifiques au débogage
Items.Add(new Item { Name = "Debug Item 1" });
Items.Add(new Item { Name = "Debug Item 2" });
#endif
}
}
Cette approche vous permet de contrôler les données de débogage au niveau du code tout en garantissant que ce code de design ne fera pas partie du code compilé en version Release. Eviter de distribuer des Apps contenant du code inutile ou technique est une bonne pratique à appliquer systématiquement.
Conclusion
En exploitant les attributs x:DataType, les données fictives dans le XAML, et les symboles de compilation conditionnelle, vous pouvez efficacement gérer les données de design dans vos projets MAUI. Ces stratégies garantissent que vous avez des données à utiliser pendant le développement sans affecter la version de production de votre application. Certes rien ne vaudra un véritablement designer visuel, c'est vrai. Et il est dommage que la technologie la plus avancées de développement de Microsoft n'offre pas les facilités de celles d'il y a parfois plusieurs décennies (Silverlight ou WPF toujours bien vivant !). Mais avec une bonne organisation et de bonnes méthodes de travail, comme cet article vous l'a montré jel'espère, on peut atteindre des conditions de conception visuelle tout à fait efficace !
Stay Tuned !