ContentView

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 ContentView classe définit une Content propriété, de type View, qui représente le contenu du ContentView. Cette propriété est sauvegardée par un BindableProperty objet, ce qui signifie qu’elle peut être la cible de liaisons de données et de style.

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

Créer un contrôle personnalisé

La ContentView classe 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 à :

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

Cet article montre comment créer un CardView contrôle, 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 ContentViewclasse dérivée peut ê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 de la ContentViewclasse dérivée.

Le CardView contrôle personnalisé 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 le carte.
• IconBackgroundColor, de type Color, qui représente la couleur d’arrière-plan de l’image affichée sur le carte.
• BorderColor, de type Color, qui représente la couleur de la bordure carte, la bordure d’image et 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 BindableProperty instance.

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

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 BindableProperty objets, 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 pour la ContentViewclasse dérivée -, qui utilise un ContentView élément racine du contrôle :

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

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

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 la référence ajoutée, l’instanciation 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 CardView objets :

Personnaliser l’apparence avec un ControlTemplate

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

Par exemple, une CardView disposition peut occuper trop d’espace pour certains cas d’usage. Un ControlTemplate peut être utilisé pour remplacer la CardView disposition pour 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 TemplateBinding balisage pour spécifier des liaisons. La ControlTemplate propriété peut ensuite être définie sur l’objet défini ControlTemplate à l’aide de sa x:Key valeur. L’exemple suivant montre la ControlTemplate propriété définie sur une CardView instance :

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

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

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