Xamarin.Forms RefreshView

Ejemplo de descarga Descarga del ejemplo

es RefreshView un control de contenedor que proporciona la funcionalidad de extracción para actualizar para el contenido desplazable. Por lo tanto, el elemento secundario RefreshView de debe ser un control desplazable, como , o ScrollViewCollectionViewListView .

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 a Command.
  • IsRefreshing, de tipo bool , que indica el estado actual de RefreshView .
  • RefreshColor, de tipo Color , 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 Universal Windows Platform , la dirección de extracción de RefreshView un se puede establecer con una específica de la plataforma. Para obtener más información, vea RefreshView Pull Direction.

Creación de una clase RefreshView

En el ejemplo siguiente se muestra cómo crear instancias 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>

También RefreshView se puede crear un 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, proporciona RefreshView la extracción para actualizar la funcionalidad a un ScrollView cuyo elemento secundario es FlexLayout . utiliza un diseño enlazable para generar su contenido mediante el enlace a una colección de elementos y establece la apariencia de cada FlexLayout elemento con DataTemplate . Para obtener más información sobre los diseños enlazables, vea Bindable Layouts in Xamarin.Forms .

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

Cuando el usuario inicia una actualización, se ejecuta el definido por la propiedad , que debe ICommand actualizar los elementos que se Command muestran. Se muestra una visualización de actualización mientras se produce la actualización, que consta de un círculo de progreso animado:

RefreshView refreshing data" data-linktype="relative-path">Screenshot of a <span class=RefreshView Screenshot of a <span class= refreshing data, on iOS and Android" title=" RefreshView refreshing data" data-linktype="relative-path"/>

Nota:

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

RefreshView Aspecto

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

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

En la captura de pantalla siguiente se RefreshView muestra un con la propiedad RefreshColor establecida:

RefreshView with a teal progress circle" data-linktype="relative-path">Screenshot of a <span class=RefreshView with a Screenshot of a <span class= teal progress circle, on iOS and Android" title=" RefreshView with a teal progress circle" data-linktype="relative-path"/>

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

Nota:

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

Deshabilitar un RefreshView

Una aplicación puede entrar en un estado en el que la extracción 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 la extracción para actualizar.

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