ContentView

Article
01/14/2025

Parcourir l'exemple. Parcourir l’exemple de

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) ContentView est un contrôle qui permet la création de contrôles personnalisés et réutilisables.

La classe ContentView définit une propriété Content, de type View, qui représente le contenu du ContentView. Cette propriété est prise en charge par un objet BindableProperty, ce qui signifie qu'elle peut être la cible de liaisons de données et être stylisée.

La classe ContentView dérive de la classe TemplatedView, qui définit la propriété ControlTemplate pouvant être liée, de type ControlTemplate, qui définit l’apparence du contrôle. Pour plus d’informations sur la propriété ControlTemplate, consultez Personnaliser l’apparence avec un « ControlTemplate ».

Note

Une ContentView ne peut contenir qu’un seul enfant.

Créer un contrôle personnalisé

La classe ContentView offre peu de fonctionnalités en soi, mais peut être utilisée pour créer un contrôle personnalisé. Le processus de création d’un contrôle personnalisé consiste à :

Créez une classe qui dérive de la classe ContentView.
Définissez les propriétés ou événements de contrôle dans le fichier code-behind du contrôle personnalisé.
Définissez l’interface utilisateur du contrôle personnalisé.

Cet article montre comment créer un contrôle CardView, qui est un élément d’interface utilisateur qui affiche une image, un titre et une description dans une disposition de type carte.

Créer une classe dérivée de ContentView

Une classe dérivée de ContentViewpeut être créée à l’aide du modèle d’élément ContentView dans Visual Studio. Ce modèle crée un fichier XAML dans lequel l’interface utilisateur du contrôle personnalisé peut être définie et un fichier code-behind dans lequel toutes les propriétés, événements et autres logiques du contrôle peuvent être définis.

Définir des propriétés de contrôle

Toutes les propriétés de contrôle, événements et autres logiques doivent être définies dans le fichier code-behind pour la classe dérivée de ContentView.

Le contrôle personnalisé CardView définit les propriétés suivantes :

CardTitle, de type string, qui représente le titre affiché sur la carte.
CardDescription, de type string, qui représente la description affichée sur la carte.
IconImageSource, de type ImageSource, qui représente l’image affichée sur la carte.
IconBackgroundColor, de type Color, qui représente la couleur d’arrière-plan de l’image affichée sur la carte.
BorderColor, de type Color, qui représente la couleur de la bordure de carte, de la bordure d’image et de la ligne de séparateur.
CardColor, de type Color, qui représente la couleur d’arrière-plan de la carte.

Chaque propriété est sauvegardée par une instance de BindableProperty.

L’exemple suivant montre la propriété CardTitle pouvant être liée dans le fichier code-behind de la classe CardView :

public partial class CardView : ContentView
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);

    public string CardTitle
    {
        get => (string)GetValue(CardView.CardTitleProperty);
        set => SetValue(CardView.CardTitleProperty, value);
    }
    // ...

    public CardView()
    {
        InitializeComponent();
    }
}

Pour plus d’informations sur les objets BindableProperty, consultez propriétés pouvant être liées.

Définir l’interface utilisateur

L’interface utilisateur du contrôle personnalisé peut être définie dans le fichier XAML de la classe dérivée ContentView, qui utilise un ContentView comme élément racine du contrôle :

<ContentView ...
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView">
    <Border BindingContext="{x:Reference this}"
            BackgroundColor="{Binding CardColor}"
            Stroke="{Binding BorderColor}"
            ...>
        <Grid>
            ...
            <Border Stroke="{Binding BorderColor, FallbackValue='Black'}"
                    BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Grey'}"
                   ...>
                <Image Source="{Binding IconImageSource}"
                       .. />
            </Border>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"
                   ... />
            <BoxView BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
                     ... />
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"
                   ... />
        </Grid>
    </Border>
</ContentView>

L’élément ContentView définit la propriété x:Name sur this, qui peut être utilisée pour accéder à l’objet lié à l’instance CardView. Les éléments de la mise en page définissent des liaisons sur leurs propriétés à des valeurs définies sur l’objet lié. Pour plus d’informations sur la liaison de données, consultez Liaison de données.

Note

La propriété FallbackValue dans l’expression Binding fournit une valeur par défaut si la liaison est null.

Instancier un contrôle personnalisé

Une référence à l’espace de noms de contrôle personnalisé doit être ajoutée à la page qui instancie le contrôle personnalisé. Une fois que la référence a été ajoutée, la CardView peut être instanciée et ses propriétés définies :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CardViewDemo.Controls"
             x:Class="CardViewDemo.CardViewXamlPage">
   <ScrollView>
       <StackLayout>
           <controls:CardView BorderColor="DarkGray"
                              CardTitle="Slavko Vlasic"
                              CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                              IconBackgroundColor="SlateGray"
                              IconImageSource="user.png" />
            <!-- More CardView objects -->
       </StackLayout>
   </ScrollView>
</ContentPage>

La capture d’écran suivante montre plusieurs objets CardView :

Capture d’écran des objets CardView.

Personnaliser l’apparence avec un ControlTemplate

Un contrôle personnalisé qui dérive de la classe ContentView peut définir son interface utilisateur à l’aide de XAML ou de code, ou peut ne pas définir son interface utilisateur du tout. Une ControlTemplate peut être utilisée pour remplacer l’apparence du contrôle, quelle que soit la façon dont cette apparence est définie.

Par exemple, une disposition CardView peut occuper trop d’espace pour certains cas d’usage. Une ControlTemplate peut être utilisée pour remplacer la disposition CardView afin de fournir une vue plus compacte, adaptée à une liste condensée :

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="CardViewCompressed">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100*" />
                </Grid.ColumnDefinitions>
                <Image Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                <StackLayout Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

La liaison de données dans un ControlTemplate utilise l’extension de balisage TemplateBinding pour définir les liaisons. La propriété ControlTemplate peut ensuite être définie sur l’objet ControlTemplate défini à l’aide de sa valeur de x:Key. L’exemple suivant montre la propriété ControlTemplate définie sur une instance de CardView :

<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}" />

La capture d’écran suivante montre une instance de CardView standard et plusieurs instances CardView dont les modèles de contrôle ont été remplacés :

Capture d’écran de CardView remplacée par un ControlTemplate.

Pour plus d’informations sur les modèles de contrôle, consultez modèles de contrôle.

Partage via