RefreshView

Examina el ejemplo.

.NET Multi-platform App UI (.NET MAUI) RefreshView es un control de contenedor que proporciona la funcionalidad de deslizar para actualizar el contenido desplazable. Por lo tanto, el elemento secundario de RefreshView debe ser un control desplazable, como ScrollView, CollectionView o ListView.

RefreshView define las siguientes propiedades:

• Command, de tipo ICommand, que se ejecuta cuando se desencadena una actualización.
• CommandParameter, de tipo object, que es el parámetro que se pasa al objeto Command.
• IsRefreshing, de tipo bool, que indica el estado actual de RefreshView.
• RefreshColor, de tipo Color, el color del círculo de progreso que aparece durante la actualización.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Nota:

En Windows, la dirección de deslizamiento de RefreshView se puede establecer con una plataforma específica. Para obtener más información, consulta Dirección de extracción de RefreshView en Windows.

Creación de RefreshView

Para agregar RefreshView a una página, crea un objeto RefreshView y establece sus propiedades IsRefreshing y Command. Después establece su elemento secundario en un control desplazable.

En el siguiente ejemplo se muestra cómo crear una instancia de RefreshView 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>

RefreshView también se puede crear en el código:

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;

En este ejemplo, RefreshView proporciona la funcionalidad de deslizar para actualizar a ScrollView cuyo elemento secundario es FlexLayout. FlexLayout usa un diseño enlazable para generar su contenido mediante el enlace a una colección de elementos y establece la apariencia de cada elemento con DataTemplate. Para obtener más información sobre los diseños enlazables, consulta Diseños vinculables.

El valor de la propiedad RefreshView.IsRefreshing indica el estado actual de RefreshView. Cuando el usuario desencadena una actualización, esta propiedad pasará automáticamente a true. Una vez completada la actualización, debes restablecer la propiedad a false.

Cuando el usuario inicia una actualización, se ejecuta ICommand definido por la propiedad Command, que debe actualizar los elementos que se muestran. Mientras se produce la actualización se muestra una visualización de actualización, que consiste en un círculo de progreso animado. En la captura de pantalla siguiente se muestra el círculo de progreso en iOS:

Nota:

Al establecer manualmente la propiedad IsRefreshing en true se desencadenará la visualización de actualización y se ejecutará ICommand definido por la propiedad Command.

Apariencia de RefreshView

Además de las propiedades que RefreshView hereda de la clase VisualElement, RefreshView también define la propiedad RefreshColor. Esta propiedad se puede establecer para definir el color del círculo de progreso que aparece durante la actualización:

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

La siguiente captura de pantalla de Android muestra RefreshView con la propiedad RefreshColor:

Además, la propiedad BackgroundColor se puede establecer en Color que representa el color de fondo del círculo de progreso.

Nota:

En iOS, la propiedad BackgroundColor establece el color de fondo de UIView que contiene el círculo de progreso.

Deshabilitación de RefreshView

Una aplicación puede entrar en un estado en el que el deslizamiento para actualizar no es una operación válida. En tales casos, se puede deshabilitar el objeto RefreshView estableciendo su propiedad IsEnabled en false. Esto impedirá que los usuarios puedan desencadenar el deslizamiento para actualizar.

Como alternativa, al definir la propiedad Command, se puede especificar el delegado CanExecute de ICommand para habilitar o deshabilitar el comando.