RefreshView de Xamarin. FormsXamarin.Forms RefreshView

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

El RefreshView es un control contenedor que proporciona funcionalidad de extracción para actualizar el contenido desplazable.The RefreshView is a container control that provides pull to refresh functionality for scrollable content. Por lo tanto, el elemento secundario de un RefreshView debe ser un control desplazable, como ScrollView, CollectionViewo ListView.Therefore, the child of a RefreshView must be a scrollable control, such as ScrollView, CollectionView, or ListView.

RefreshView define las siguientes propiedades:RefreshView defines the following properties:

  • Command, de tipo ICommand, que se ejecuta cuando se desencadena una actualización.Command, of type ICommand, which is executed when a refresh is triggered.
  • CommandParameter, de tipo object, que es el parámetro que se pasa a Command.CommandParameter, of type object, which is the parameter that's passed to the Command.
  • IsRefreshing, de tipo bool, que indica el estado actual de la RefreshView.IsRefreshing, of type bool, which indicates the current state of the RefreshView.
  • RefreshColor, de tipo Color, el color del círculo de progreso que aparece durante la actualización.RefreshColor, of type Color, the color of the progress circle that appears during the refresh.

Estas propiedades están respaldadas por objetos BindableProperty , lo que significa que pueden ser destinos de enlaces de datos y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Nota

En el Plataforma universal de Windows, la dirección de extracción de una RefreshView se puede establecer con una plataforma específica.On the Universal Windows Platform, the pull direction of a RefreshView can be set with a platform-specific. Para obtener más información, vea dirección de extracción de RefreshView.For more information, see RefreshView Pull Direction.

Creación de un RefreshViewCreate a RefreshView

En el ejemplo siguiente se muestra cómo crear una instancia de un RefreshView en XAML:The following example shows how to instantiate a RefreshView in 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>

También se puede crear un RefreshView en el código:A RefreshView can also be created in 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;

En este ejemplo, el RefreshView proporciona la funcionalidad de extracción para actualizar a una ScrollView cuyo elemento secundario es un FlexLayout.In this example, the RefreshView provides pull to refresh functionality to a ScrollView whose child is a FlexLayout. En el FlexLayout se usa un diseño enlazable para generar su contenido enlazando con una colección de elementos y se establece la apariencia de cada elemento con un DataTemplate.The FlexLayout uses a bindable layout to generate its content by binding to a collection of items, and sets the appearance of each item with a DataTemplate. Para obtener más información sobre los diseños enlazables, vea diseños enlazables en Xamarin. Forms.For more information about bindable layouts, see Bindable Layouts in Xamarin.Forms.

El valor de la propiedad RefreshView.IsRefreshing indica el estado actual del RefreshView.The value of the RefreshView.IsRefreshing property indicates the current state of the RefreshView. Cuando el usuario desencadena una actualización, esta propiedad pasará automáticamente a true.When a refresh is triggered by the user, this property will automatically transition to true. Una vez finalizada la actualización, debe restablecer la propiedad a false.Once the refresh completes, you should reset the property to false.

Cuando el usuario inicia una actualización, se ejecuta el ICommand definido por la propiedad Command, que debe actualizar los elementos que se muestran.When the user initiates a refresh, the ICommand defined by the Command property is executed, which should refresh the items being displayed. Se muestra una visualización de actualización mientras se produce la actualización, que consta de un círculo de progreso animado:A refresh visualization is shown while the refresh occurs, which consists of an animated progress circle:

Captura de pantalla de una RefreshView actualización de datos, en iOS y AndroidScreenshot of a RefreshView refreshing data, on iOS and Android

Nota

Establecer manualmente la propiedad IsRefreshing en true desencadenará la visualización de la actualización y ejecutará el ICommand definido por la propiedad Command.Manually setting the IsRefreshing property to true will trigger the refresh visualization, and will execute the ICommand defined by the Command property.

Apariencia de RefreshViewRefreshView appearance

Además de las propiedades que RefreshView heredan de la clase VisualElement , RefreshView también define la propiedad RefreshColor.In addition to the properties that RefreshView inherits from the VisualElement class, RefreshView also defines the RefreshColor property. Esta propiedad se puede establecer para definir el color del círculo de progreso que aparece durante la actualización:This property can be set to define the color of the progress circle that appears during the refresh:

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

En la captura de pantalla siguiente se muestra un RefreshView con el conjunto de propiedades RefreshColor:The following screenshot shows a RefreshView with the RefreshColor property set:

Captura de pantalla de un RefreshView con un círculo de progreso de verde azulado, en iOS y AndroidScreenshot of a RefreshView with a teal progress circle, on iOS and Android

Además, la propiedad BackgroundColor se puede establecer en un Color que representa el color de fondo del círculo de progreso.In addition, the BackgroundColor property can be set to a Color that represents the background color of the progress circle.

Nota

En iOS, la propiedad BackgroundColor establece el color de fondo del UIView que contiene el círculo de progreso.On iOS, the BackgroundColor property sets the background color of the UIView that contains the progress circle.

Deshabilitar un RefreshViewDisable a RefreshView

Una aplicación puede entrar en un estado en el que la extracción para actualizar no es una operación válida.An application may enter a state where pull to refresh is not a valid operation. En tales casos, el RefreshView se puede deshabilitar estableciendo su propiedad IsEnabled en false.In such cases, the RefreshView can be disabled by setting its IsEnabled property to false. Esto impedirá que los usuarios puedan desencadenar la incorporación de cambios a la actualización.This will prevent users from being able to trigger pull to refresh.

Como alternativa, al definir la propiedad Command, se puede especificar el delegado CanExecute de la ICommand para habilitar o deshabilitar el comando.Alternatively, when defining the Command property, the CanExecute delegate of the ICommand can be specified to enable or disable the command.