:::no-loc(Xamarin.Forms)::: :::no-loc(RefreshView)::::::no-loc(Xamarin.Forms)::: :::no-loc(RefreshView):::

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

O :::no-loc(RefreshView)::: é um controle de contêiner que fornece a funcionalidade de pull para atualizar para conteúdo rolável.The :::no-loc(RefreshView)::: is a container control that provides pull to refresh functionality for scrollable content. Portanto, o filho de um :::no-loc(RefreshView)::: deve ser um controle rolável, como ScrollView , CollectionView ou ListView .Therefore, the child of a :::no-loc(RefreshView)::: must be a scrollable control, such as ScrollView, CollectionView, or ListView.

:::no-loc(RefreshView)::: define as propriedades a seguir::::no-loc(RefreshView)::: defines the following properties:

  • Command, do tipo ICommand , que é executado quando uma atualização é disparada.Command, of type ICommand, which is executed when a refresh is triggered.
  • CommandParameter, do tipo object, que é o parâmetro passado para Command.CommandParameter, of type object, which is the parameter that's passed to the Command.
  • IsRefreshing, do tipo bool , que indica o estado atual do :::no-loc(RefreshView)::: .IsRefreshing, of type bool, which indicates the current state of the :::no-loc(RefreshView):::.
  • RefreshColor, do tipo Color , a cor do círculo de progresso que aparece durante a atualização.RefreshColor, of type Color, the color of the progress circle that appears during the refresh.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que eles podem ser destinos de associações de dados e com estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Observação

No :::no-loc(Universal Windows Platform)::: , a direção de pull de um :::no-loc(RefreshView)::: pode ser definida com uma plataforma específica.On the :::no-loc(Universal Windows Platform):::, the pull direction of a :::no-loc(RefreshView)::: can be set with a platform-specific. Para obter mais informações, consulte :::no-loc(RefreshView)::: direção de pull.For more information, see :::no-loc(RefreshView)::: Pull Direction.

Criar um :::no-loc(RefreshView):::Create a :::no-loc(RefreshView):::

O exemplo a seguir mostra como criar uma instância de :::no-loc(RefreshView)::: em XAML:The following example shows how to instantiate a :::no-loc(RefreshView)::: in XAML:

<:::no-loc(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>
</:::no-loc(RefreshView):::>

Um :::no-loc(RefreshView)::: também pode ser criado no código:A :::no-loc(RefreshView)::: can also be created in code:

:::no-loc(RefreshView)::: refreshView = new :::no-loc(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;

Neste exemplo, o :::no-loc(RefreshView)::: fornece a funcionalidade de pull para atualizar para um ScrollView cujo filho é um FlexLayout .In this example, the :::no-loc(RefreshView)::: provides pull to refresh functionality to a ScrollView whose child is a FlexLayout. O FlexLayout usa um layout vinculável para gerar seu conteúdo ligando-se a uma coleção de itens e define a aparência de cada item com um 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 obter mais informações sobre layouts vinculáveis, consulte layouts :::no-loc(Xamarin.Forms)::: vinculáveis no .For more information about bindable layouts, see Bindable Layouts in :::no-loc(Xamarin.Forms):::.

O valor da :::no-loc(RefreshView):::.IsRefreshing propriedade indica o estado atual do :::no-loc(RefreshView)::: .The value of the :::no-loc(RefreshView):::.IsRefreshing property indicates the current state of the :::no-loc(RefreshView):::. Quando uma atualização for disparada pelo usuário, essa propriedade passará automaticamente para o true .When a refresh is triggered by the user, this property will automatically transition to true. Quando a atualização for concluída, você deverá redefinir a propriedade para false .Once the refresh completes, you should reset the property to false.

Quando o usuário inicia uma atualização, o ICommand definido pela Command propriedade é executado, o que deve atualizar os itens que estão sendo exibidos.When the user initiates a refresh, the ICommand defined by the Command property is executed, which should refresh the items being displayed. Uma visualização de atualização é mostrada enquanto a atualização ocorre, que consiste em um círculo de progresso animado:A refresh visualization is shown while the refresh occurs, which consists of an animated progress circle:

Captura de tela de um::: no-Loc (RefreshView)::: Atualizando dados, no iOS e no AndroidScreenshot of a :::no-loc(RefreshView)::: refreshing data, on iOS and Android

Observação

Definir manualmente a IsRefreshing propriedade como disparará true a visualização de atualização e executará o ICommand definido pela Command propriedade.Manually setting the IsRefreshing property to true will trigger the refresh visualization, and will execute the ICommand defined by the Command property.

:::no-loc(RefreshView)::: aparência:::no-loc(RefreshView)::: appearance

Além das propriedades :::no-loc(RefreshView)::: herdadas da VisualElement classe, :::no-loc(RefreshView)::: também define a RefreshColor propriedade.In addition to the properties that :::no-loc(RefreshView)::: inherits from the VisualElement class, :::no-loc(RefreshView)::: also defines the RefreshColor property. Essa propriedade pode ser definida para definir a cor do círculo de progresso que aparece durante a atualização:This property can be set to define the color of the progress circle that appears during the refresh:

<:::no-loc(RefreshView)::: RefreshColor="Teal"
             ... />

A captura de tela a seguir mostra um :::no-loc(RefreshView)::: com o RefreshColor conjunto de propriedades:The following screenshot shows a :::no-loc(RefreshView)::: with the RefreshColor property set:

Captura de tela de um::: no-Loc (RefreshView)::: com um círculo de progresso azul-petróleo, no iOS e no AndroidScreenshot of a :::no-loc(RefreshView)::: with a teal progress circle, on iOS and Android

Além disso, a BackgroundColor propriedade pode ser definida como um Color que representa a cor do plano de fundo do círculo de progresso.In addition, the BackgroundColor property can be set to a Color that represents the background color of the progress circle.

Observação

No iOS, a BackgroundColor propriedade define a cor do plano de fundo do UIView que contém o círculo de progresso.On iOS, the BackgroundColor property sets the background color of the UIView that contains the progress circle.

Desabilitar um :::no-loc(RefreshView):::Disable a :::no-loc(RefreshView):::

Um aplicativo pode inserir um estado em que o pull para atualizar não é uma operação válida.An application may enter a state where pull to refresh is not a valid operation. Nesses casos, o :::no-loc(RefreshView)::: pode ser desabilitado definindo sua IsEnabled propriedade como false .In such cases, the :::no-loc(RefreshView)::: can be disabled by setting its IsEnabled property to false. Isso impedirá que os usuários possam disparar pull para atualização.This will prevent users from being able to trigger pull to refresh.

Como alternativa, ao definir a Command propriedade, o CanExecute delegado de ICommand pode ser especificado para habilitar ou desabilitar o comando.Alternatively, when defining the Command property, the CanExecute delegate of the ICommand can be specified to enable or disable the command.