RefreshView

Parcourir l’exemple

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) RefreshView est un contrôle de conteneur qui fournit des fonctionnalités d’actualisation pour le contenu défilant. Par conséquent, l’enfant d’un RefreshView doit être un contrôle de défilement, tel que ScrollView, CollectionViewou ListView.

RefreshView définit les propriétés suivantes :

• Command, de type ICommand, qui est exécuté lorsqu’une actualisation est déclenchée.
• CommandParameter, de type object : paramètre passé à la commande Command.
• IsRefreshing, de type bool, qui indique l’état actuel du RefreshView.
• RefreshColor, de type Color, couleur du cercle de progression qui apparaît pendant l’actualisation.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

Remarque

Sur Windows, la direction d’extraction d’un RefreshView peut être définie avec une plateforme spécifique à la plateforme. Pour plus d’informations, consultez RefreshView la direction de tirage sur Windows.

Créez une classe RefreshView

Pour ajouter un RefreshView objet à une page, créez un RefreshView objet et définissez ses IsRefreshing propriétés.Command Définissez ensuite son enfant sur un contrôle de défilement.

L’exemple suivant montre comment instancier un RefreshView instanciation en XAML :

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <ScrollView>
        <FlexLayout Direction="Row"
                    Wrap="Wrap"
                    AlignItems="Center"
                    AlignContent="Center"
                    BindableLayout.ItemsSource="{Binding Items}"
                    BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
    </ScrollView>
</RefreshView>

Vous pouvez également créer un RefreshView code :

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

ScrollView scrollView = new ScrollView();
FlexLayout flexLayout = new FlexLayout { ... };
scrollView.Content = flexLayout;
refreshView.Content = scrollView;

Dans cet exemple, l’extraction RefreshView fournit des fonctionnalités d’actualisation à un ScrollView enfant dont l’enfant est un FlexLayout. L’utilisation FlexLayout d’une disposition pouvant être liée pour générer son contenu en s’liant à une collection d’éléments et définit l’apparence de chaque élément avec un DataTemplate. Pour plus d’informations sur les dispositions pouvant être liées, consultez disposition pouvant être liée.

La valeur de la RefreshView.IsRefreshing propriété indique l’état actuel du RefreshView. Lorsqu’une actualisation est déclenchée par l’utilisateur, cette propriété passe automatiquement à true. Une fois l’actualisation terminée, vous devez réinitialiser la propriété sur false.

Lorsque l’utilisateur lance une actualisation, la ICommand Command propriété définie est exécutée, ce qui doit actualiser les éléments affichés. Une visualisation d’actualisation s’affiche lorsque l’actualisation se produit, qui se compose d’un cercle de progression animé. La capture d’écran suivante montre le cercle de progression sur iOS :

Remarque

La définition manuelle de la IsRefreshing propriété pour true déclenchera la visualisation d’actualisation et exécutera la ICommand propriété définie par la Command propriété.

Apparence RefreshView

Outre les propriétés qui RefreshView héritent de la VisualElement classe, RefreshView définit également la RefreshColor propriété. Cette propriété peut être définie pour définir la couleur du cercle de progression qui s’affiche pendant l’actualisation :

<RefreshView RefreshColor="Teal"
             ... />

La capture d’écran Android suivante montre une RefreshView avec la RefreshColor propriété :

En outre, la BackgroundColor propriété peut être définie sur une Color valeur qui représente la couleur d’arrière-plan du cercle de progression.

Remarque

Sur iOS, la BackgroundColor propriété définit la couleur d’arrière-plan du cercle de UIView progression.

Désactiver un RefreshView

Une application peut entrer un état dans lequel l’extraction à actualiser n’est pas une opération valide. Dans ce cas, le RefreshView paramètre peut être désactivé en définissant sa IsEnabled propriété sur false. Cela empêche les utilisateurs d’être en mesure de déclencher l’extraction pour l’actualisation.

Vous pouvez également spécifier le délégué de la CanExecute ICommand propriété pour activer ou désactiver la commande lors de la Command définition de la propriété.