Xamarin.Forms ContentView

Article
07/13/2023

La Xamarin.FormsContentView classe est un type de Layout qui contient un seul élément enfant et est généralement utilisée pour créer des contrôles personnalisés et réutilisables. La classe ContentView hérite des données de l’élément TemplatedView. Cet article et l’exemple associé expliquent comment créer un contrôle personnalisé CardView basé sur la ContentView classe .

La capture d’écran suivante montre un CardView contrôle qui dérive de la ContentView classe :

La ContentView classe définit une propriété unique :

Content est un objet View. Cette propriété est adossée à un BindableProperty objet afin qu’elle puisse être la cible de liaisons de données.

Hérite ContentView également d’une propriété de la TemplatedView classe :

ControlTemplate est un ControlTemplate qui peut définir ou remplacer l’apparence du contrôle.

Pour plus d’informations sur la ControlTemplate propriété, consultez Personnaliser l’apparence 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é. L’exemple de projet définit un CardView contrôle : un élément d’interface utilisateur qui affiche une image, un titre et une description dans une disposition de type carte.

Le processus de création d’un contrôle personnalisé consiste à :

Créez une classe à l’aide du ContentView modèle dans Visual Studio 2019.
Définissez des propriétés ou des événements uniques dans le fichier code-behind pour le nouveau contrôle personnalisé.
Créez l’interface utilisateur pour le contrôle personnalisé.

Notes

Il est possible de créer un contrôle personnalisé dont la disposition est définie dans le code au lieu de XAML. Par souci de simplicité, l’exemple d’application définit uniquement une seule CardView classe avec une disposition XAML. Toutefois, l’exemple d’application contient une classe CardViewCodePage qui montre le processus d’utilisation du contrôle personnalisé dans le code.

Créer des propriétés code-behind

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

CardTitlestring: objet qui représente le titre affiché sur le carte.
CardDescriptionstring: objet qui représente la description affichée sur le carte.
IconImageSourceImageSource: objet qui représente l’image affichée sur le carte.
IconBackgroundColor: objet qui représente la couleur d’arrière-plan Color de l’image affichée sur le carte.
BorderColorColor: objet qui représente la couleur de la bordure carte, de la bordure d’image et de la ligne de séparation.
CardColorColor: objet qui représente la couleur d’arrière-plan du carte.

Notes

La BorderColor propriété affecte plusieurs éléments à des fins de démonstration. Cette propriété peut être divisée en trois propriétés si nécessaire.

Chaque propriété est soutenue par un BindableProperty instance. Le stockage BindableProperty permet à chaque propriété d’être stylée et liée à l’aide du modèle MVVM.

L’exemple suivant montre comment créer une sauvegarde BindableProperty:

public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(
    "CardTitle",        // the name of the bindable property
    typeof(string),     // the bindable property type
    typeof(CardView),   // the parent object type
    string.Empty);      // the default value for the property

La propriété personnalisée utilise les GetValue méthodes et SetValue pour obtenir et définir les valeurs de l’objet BindableProperty :

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

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

Définir l’interface utilisateur

L’interface utilisateur du contrôle personnalisé utilise un ContentView comme élément racine pour le CardView contrôle. L’exemple suivant montre le CardView code XAML :

<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é sur ceci, qui peut être utilisé pour accéder à l’objet lié à l’instance CardView . Les éléments du jeu de disposition établissent 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 Xamarin.Forms Liaison de données.

Notes

La FallbackValue propriété fournit une valeur par défaut au cas où la liaison est null. Cela permet également au générateur d’aperçu XAML dans Visual Studio d’afficher le CardView contrôle.

Instancier un contrôle personnalisé

Une référence à l’espace de noms de contrôle personnalisé doit être ajoutée à une page qui instancie le contrôle personnalisé. L’exemple suivant montre une référence d’espace de noms appelée contrôles ajoutés à un ContentPage instance en XAML :

<ContentPage ...
             xmlns:controls="clr-namespace:CardViewDemo.Controls" >

Une fois la référence ajoutée, le CardView peut être instancié en XAML et ses propriétés définies :

<controls:CardView BorderColor="DarkGray"
                   CardTitle="Slavko Vlasic"
                   CardDescription="Lorem ipsum dolor sit..."
                   IconBackgroundColor="SlateGray"
                   IconImageSource="user.png"/>

Un CardView peut également être instancié dans le code :

CardView card = new CardView
{
    BorderColor = Color.DarkGray,
    CardTitle = "Slavko Vlasic",
    CardDescription = "Lorem ipsum dolor sit...",
    IconBackgroundColor = Color.SlateGray,
    IconImageSource = ImageSource.FromFile("user.png")
};

Personnaliser l’apparence avec un ControlTemplate

Un contrôle personnalisé qui dérive de la classe peut définir l’apparence ContentView à l’aide du code XAML ou peut ne pas définir l’apparence du tout. Quelle que soit la façon dont l’apparence est définie, un ControlTemplate objet peut remplacer l’apparence par une disposition personnalisée.

La CardView disposition peut occuper trop d’espace pour certains cas d’usage. Un ControlTemplate peut remplacer la CardView disposition pour fournir un affichage plus compact, adapté à 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 Grid.Row="0"
                       Grid.Column="0"
                       Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <StackLayout Grid.Row="0"
                             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 TemplateBinding de balisage pour spécifier des liaisons. La ControlTemplate propriété peut ensuite être définie sur l’objet ControlTemplate défini à l’aide de sa x:Key valeur. L’exemple suivant montre la ControlTemplate propriété définie sur un CardView instance :

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

Les captures d’écran suivantes montrent un instance standard CardView et CardView dont ControlTemplate a été remplacé :

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

Xamarin.Forms ContentView

Créer un contrôle personnalisé

Créer des propriétés code-behind

Définir l’interface utilisateur

Instancier un contrôle personnalisé

Personnaliser l’apparence avec un ControlTemplate

Liens connexes

Ressources supplémentaires