Découvrez comment utiliser les ControlTemplates dans .NET MAUI pour créer des interfaces utilisateur modulaires et maintenables, avec des exemples pratiques et une intégration MVVM.
Qu'est-ce qu'un ControlTemplate?
Les ControlTemplates permettent de séparer la logique de l'interface utilisateur (UI) d'un contrôle personnalisé ou d'une page dans une application MAUI. Ils définissent la structure visuelle d'un contrôle, qui peut ensuite être appliquée à plusieurs instances de ce contrôle ou de cette page, assurant ainsi la cohérence visuelle tout en permettant la personnalisation. C'est un outil de conception véritablement précieux qui ajoute de la flexibilité, de la réutilisabilité et de la personnalisation simplifiée à vos UI, le tout, toujours dans un but, servir une UX de qualité. Si le mécanisme est utilisé dans la mise en page, il est aussi très efficace pour créer des contrôles personnalisés.
Création d'un ControlTemplate
Un ControlTemplate est créé en utilisant le type ControlTemplate. Voici un exemple basique montrant comment définir un template pour un contrôle personnalisé CardView:
public class CardView : ContentView
{
public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);
public static readonly BindableProperty CardDescriptionProperty = BindableProperty.Create(nameof(CardDescription), typeof(string), typeof(CardView), string.Empty);
public string CardTitle
{
get => (string)GetValue(CardTitleProperty);
set => SetValue(CardTitleProperty, value);
}
public string CardDescription
{
get => (string)GetValue(CardDescriptionProperty);
set => SetValue(CardDescriptionProperty, value);
}
...
}
Ensuite, le template pour ce contrôle pourrait être défini dans XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewControlTemplate">
<Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
BackgroundColor="{Binding CardColor}"
BorderColor="{Binding BorderColor}">
<!-- Définition visuelle de CardView -->
</Frame>
</ControlTemplate>
</ContentPage.Resources>
</ContentPage>
Application d'un ControlTemplate
Pour appliquer un ControlTemplate à un contrôle ou une page, il suffit de définir la propriété ControlTemplate du contrôle ou de la page concernée. Par exemple :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<StackLayout>
<local:CardView ControlTemplate="{StaticResource CardViewControlTemplate}" />
</StackLayout>
</ContentPage>
Utilisation de TemplateBinding
Le markup TemplateBinding permet de lier une propriété d'un élément défini dans un ControlTemplate à une propriété publique du contrôle ou de la page templée. Voici un exemple :
<ControlTemplate x:Key="CardViewControlTemplate">
<Frame BackgroundColor="{TemplateBinding CardColor}"
BorderColor="{TemplateBinding BorderColor}">
<!-- Définition visuelle de CardView -->
</Frame>
</ControlTemplate>
Utilisation des ControlTemplates et TemplateBinding dans le Contexte de MVVM avec MAUI Toolkit
Comme tout ce qui fonctionne en XAML le Binding joue un rôle important ici. Et qui dit Binding et XAML dit... MVVM. Il me semble donc essentiel de montrer comment les ControlTemplates peuvent être utilisé dans un cadre plus réaliste que les démos précédentes, notamment en s'insérant dans une application utilisant MVVM.
Configuration de l'Environnement MVVM
Pour commencer, assurez-vous d'avoir installé le MVVM Toolkit de MAUI. Ajoutez les packages nécessaires dans votre projet et configurez-les comme suit :
// Installation des packages nécessaires
dotnet add package CommunityToolkit.Mvvm
// Configuration des services MVVM
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers => { /* Configuration des handlers */ })
.ConfigureFonts(fonts => { /* Configuration des fonts */ });
// Enregistrement des services MVVM
builder.Services.AddSingleton<MainViewModel>();
builder.Services.AddTransient<MainPage>();
return builder.Build();
}
}
Création du ViewModel
Créez un ViewModel qui contient les propriétés nécessaires pour lier les données à la vue. Par exemple :
public class MainViewModel : ObservableObject
{
private string _cardTitle;
public string CardTitle
{
get => _cardTitle;
set => SetProperty(ref _cardTitle, value);
}
private string _cardDescription;
public string CardDescription
{
get => _cardDescription;
set => SetProperty(ref _cardDescription, value);
}
}
Définition du ControlTemplate avec TemplateBinding
Définissez un ControlTemplate en XAML qui utilise TemplateBinding pour lier les propriétés de la vue au ViewModel :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:YourNamespace.ViewModels"
x:Class="YourNamespace.MainPage">
<ContentPage.BindingContext>
<vm:MainViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewTemplate">
<Frame Padding="10" BackgroundColor="LightGray">
<StackLayout>
<Label Text="{TemplateBinding CardTitle}" FontSize="24" />
<Label Text="{TemplateBinding CardDescription}" FontSize="14" />
</StackLayout>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<ContentPage.Content>
<ContentView ControlTemplate="{StaticResource CardViewTemplate}" />
</ContentPage.Content>
</ContentPage>
Liaison des Données au ControlTemplate
Pour lier les données du ViewModel au ControlTemplate, utilisez TemplateBinding pour créer des liaisons dynamiques. Assurez-vous que les propriétés du ViewModel sont bien définies et implémentent les interfaces de notification de changement (INPC).
Exemple Complet
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:YourNamespace.ViewModels"
x:Class="YourNamespace.MainPage">
<ContentPage.BindingContext>
<vm:MainViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewTemplate">
<Frame Padding="10" BackgroundColor="LightGray">
<StackLayout>
<Label Text="{TemplateBinding CardTitle}" FontSize="24" />
<Label Text="{TemplateBinding CardDescription}" FontSize="14" />
</StackLayout>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<ContentPage.Content>
<ContentView ControlTemplate="{StaticResource CardViewTemplate}" />
</ContentPage.Content>
</ContentPage>
Conclusion
Les ControlTemplates dans .NET MAUI offrent une flexibilité accrue pour séparer l'UI de la logique de l'application, permettant ainsi de créer des applications plus modulaires et maintenables, qu'il s'agisse de mise en page pure ou bien de la création de contrôles personnalisés. En suivant les bonnes pratiques et en exploitant pleinement les fonctionnalités offertes par .NET MAUI, on peut facilement améliorer la cohérence visuelle et la réutilisabilité des composants UI dans les applications. Il ne faut surtout pas s'en priver !
Pour plus d'informations, consultez la documentation officielle sur les ControlTemplates dans .NET MAUI.
Stay Tuned !