Bagikan melalui

Xamarin.Forms RefreshView

  • Artikel

RefreshView adalah kontrol kontainer yang menyediakan tarik untuk menyegarkan fungsionalitas untuk konten yang dapat digulir. Oleh karena itu, anak dari RefreshView harus kontrol yang dapat digulir, seperti ScrollView, , CollectionViewatau ListView.

RefreshView menentukan properti berikut:

  • Command, dari jenis ICommand, yang dijalankan ketika refresh dipicu.
  • CommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke Command.
  • IsRefreshing, dari jenis bool, yang menunjukkan status saat ini dari RefreshView.
  • RefreshColor, dari jenis Color, warna lingkaran kemajuan yang muncul selama refresh.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Universal Windows PlatformPada , arah RefreshView penarikan dapat diatur dengan khusus platform. Untuk informasi selengkapnya, lihat RefreshView Arah Penarikan.

Membuat RefreshView

Contoh berikut menunjukkan cara membuat RefreshView instans di 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>

Juga RefreshView dapat dibuat dalam kode:

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;

Dalam contoh ini, RefreshView menyediakan tarik untuk menyegarkan fungsionalitas ke ScrollView anaknya adalah FlexLayout. FlexLayout menggunakan tata letak yang dapat diikat untuk menghasilkan kontennya dengan mengikat kumpulan item, dan mengatur tampilan setiap item dengan DataTemplate. Untuk informasi selengkapnya tentang tata letak yang dapat diikat, lihat Tata Letak yang Dapat Diikat di Xamarin.Forms.

Nilai RefreshView.IsRefreshing properti menunjukkan status saat ini dari RefreshView. Ketika refresh dipicu oleh pengguna, properti ini akan secara otomatis beralih ke true. Setelah refresh selesai, Anda harus mengatur ulang properti ke false.

Saat pengguna memulai refresh, ICommand yang ditentukan oleh Command properti dijalankan, yang harus me-refresh item yang ditampilkan. Visualisasi refresh ditampilkan saat refresh terjadi, yang terdiri dari lingkaran kemajuan animasi:

Cuplikan layar data refresh RefreshView , di iOS dan Android

Catatan

Mengatur properti secara IsRefreshing manual untuk true akan memicu visualisasi refresh, dan akan menjalankan yang ICommand ditentukan oleh Command properti .

RefreshView Penampilan

Selain properti yang RefreshView mewarisi dari VisualElement kelas , RefreshView juga menentukan RefreshColor properti . Properti ini dapat diatur untuk menentukan warna lingkaran kemajuan yang muncul selama refresh:

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

Cuplikan layar berikut menunjukkan RefreshView dengan RefreshColor kumpulan properti:

RefreshView Cuplikan layar dengan lingkaran kemajuan teal, di iOS dan Android

Selain itu, BackgroundColor properti dapat diatur ke Color yang mewakili warna latar belakang lingkaran kemajuan.

Catatan

Di iOS, BackgroundColor properti mengatur warna UIView latar belakang yang berisi lingkaran kemajuan.

Menonaktifkan RefreshView

Aplikasi mungkin memasuki status di mana tarik untuk di-refresh bukanlah operasi yang valid. Dalam kasus seperti itu RefreshView , dapat dinonaktifkan dengan mengatur propertinya IsEnabled ke false. Ini akan mencegah pengguna untuk dapat memicu penarikan untuk menyegarkan.

Atau, saat menentukan Command properti, CanExecute delegasi ICommand dapat ditentukan untuk mengaktifkan atau menonaktifkan perintah.