Xamarin.Forms Interaksi CarouselView

CarouselView menentukan properti berikut yang mengontrol interaksi pengguna:

• CurrentItem, dari jenis object, item saat ini sedang ditampilkan. Properti ini memiliki mode TwoWaypengikatan default , dan memiliki null nilai ketika tidak ada data yang ditampilkan.
• CurrentItemChangedCommand, dari jenis ICommand, yang dijalankan ketika item saat ini berubah.
• CurrentItemChangedCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke CurrentItemChangedCommand.
• IsBounceEnabled, dari jenis bool, yang menentukan apakah CarouselView akan memantul pada batas konten. Nilai defaultnya adalah true.
• IsSwipeEnabled, dari jenis bool, yang menentukan apakah gerakan gesek akan mengubah item yang ditampilkan. Nilai defaultnya adalah true.
• Loop, dari jenis bool, yang menentukan apakah CarouselView menyediakan akses yang diulang ke kumpulan itemnya. Nilai defaultnya adalah true.
• Position, dari jenis int, indeks item saat ini dalam koleksi yang mendasar. Properti ini memiliki mode TwoWaypengikatan default , dan memiliki nilai 0 ketika tidak ada data untuk ditampilkan.
• PositionChangedCommand, dari jenis ICommand, yang dijalankan ketika posisi berubah.
• PositionChangedCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke PositionChangedCommand.
• VisibleViews, dari jenis ObservableCollection<View>, yang merupakan properti baca-saja yang berisi objek untuk item yang saat ini terlihat.

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

CarouselViewCurrentItemChanged menentukan peristiwa yang diaktifkan saat CurrentItem properti berubah, baik karena pengguna menggulir, atau ketika aplikasi mengatur properti. Objek CurrentItemChangedEventArgs yang menyertai CurrentItemChanged peristiwa memiliki dua properti, kedua jenis object:

• PreviousItem – item sebelumnya, setelah properti berubah.
• CurrentItem – item saat ini, setelah properti berubah.

CarouselView juga mendefinisikan PositionChanged peristiwa yang diaktifkan saat Position properti berubah, baik karena pengguna menggulir, atau ketika aplikasi mengatur properti. Objek PositionChangedEventArgs yang menyertai PositionChanged peristiwa memiliki dua properti, kedua jenis int:

• PreviousPosition – posisi sebelumnya, setelah properti berubah.
• CurrentPosition – posisi saat ini, setelah properti berubah.

Merespons perubahan item saat ini

Ketika item yang ditampilkan saat ini berubah, CurrentItem properti akan diatur ke nilai item. Ketika properti ini berubah, CurrentItemChangedCommand dijalankan dengan nilai yang CurrentItemChangedCommandParameter diteruskan ke ICommand. Properti Position kemudian diperbarui, dan peristiwa diaktifkan CurrentItemChanged .

Penting

Properti Position berubah ketika CurrentItem properti berubah. Ini akan mengakibatkan PositionChangedCommand dijalankan, dan peristiwa menembak PositionChanged .

Kejadian

Contoh XAML berikut menunjukkan CarouselView yang menggunakan penanganan aktivitas untuk merespons perubahan item saat ini:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChanged="OnCurrentItemChanged">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.CurrentItemChanged += OnCurrentItemChanged;

Dalam contoh ini, penanganan OnCurrentItemChanged aktivitas dijalankan saat CurrentItemChanged peristiwa diaktifkan:

void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    Monkey previousItem = e.PreviousItem as Monkey;
    Monkey currentItem = e.CurrentItem as Monkey;
}

Dalam contoh ini, penanganan OnCurrentItemChanged aktivitas mengekspos item sebelumnya dan saat ini:

Perintah

Contoh XAML berikut menunjukkan CarouselView yang menggunakan perintah untuk merespons perubahan item saat ini:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChangedCommand="{Binding ItemChangedCommand}"
              CurrentItemChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=CurrentItem}">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandProperty, "ItemChangedCommand");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandParameterProperty, new Binding("CurrentItem", source: RelativeBindingSource.Self));

Dalam contoh ini, CurrentItemChangedCommand properti mengikat ke ItemChangedCommand properti , meneruskan CurrentItem nilai properti sebagai argumen. kemudian ItemChangedCommand dapat menanggapi perubahan item saat ini, sesuai kebutuhan:

public ICommand ItemChangedCommand => new Command<Monkey>((item) =>
{
    PreviousMonkey = CurrentMonkey;
    CurrentMonkey = item;
});

Dalam contoh ini, ItemChangedCommand objek pembaruan yang menyimpan item sebelumnya dan saat ini.

Merespons perubahan posisi

Ketika item yang saat ini ditampilkan berubah, Position properti akan diatur ke indeks item saat ini dalam koleksi yang mendasar. Ketika properti ini berubah, PositionChangedCommand dijalankan dengan nilai yang PositionChangedCommandParameter diteruskan ke ICommand. Peristiwa itu PositionChanged kemudian terjadi. Position Jika properti telah diubah secara terprogram, CarouselView akan digulir ke item yang sesuai dengan Position nilai.

Catatan

Position Mengatur properti ke 0 akan menghasilkan item pertama dalam koleksi yang mendasar ditampilkan.

Kejadian

Contoh XAML berikut menunjukkan CarouselView yang menggunakan penanganan aktivitas untuk merespons Position perubahan properti:

<CarouselView ItemsSource="{Binding Monkeys}"              
              PositionChanged="OnPositionChanged">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.PositionChanged += OnPositionChanged;

Dalam contoh ini, penanganan OnPositionChanged aktivitas dijalankan saat PositionChanged peristiwa diaktifkan:

void OnPositionChanged(object sender, PositionChangedEventArgs e)
{
    int previousItemPosition = e.PreviousPosition;
    int currentItemPosition = e.CurrentPosition;
}

Dalam contoh ini, penanganan OnCurrentItemChanged aktivitas mengekspos posisi sebelumnya dan saat ini:

Perintah

Contoh XAML berikut menunjukkan CarouselView yang menggunakan perintah untuk merespons Position perubahan properti:

<CarouselView ItemsSource="{Binding Monkeys}"
              PositionChangedCommand="{Binding PositionChangedCommand}"
              PositionChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=Position}">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionChangedCommandProperty, "PositionChangedCommand");
carouselView.SetBinding(CarouselView.PositionChangedCommandParameterProperty, new Binding("Position", source: RelativeBindingSource.Self));

Dalam contoh ini, PositionChangedCommand properti mengikat ke PositionChangedCommand properti , meneruskan Position nilai properti sebagai argumen. Kemudian PositionChangedCommand dapat menanggapi perubahan posisi, sesuai kebutuhan:

public ICommand PositionChangedCommand => new Command<int>((position) =>
{
    PreviousPosition = CurrentPosition;
    CurrentPosition = position;
});

Dalam contoh ini, PositionChangedCommand objek pembaruan yang menyimpan posisi sebelumnya dan saat ini.

Prasetel item saat ini

Item saat ini dalam CarouselView dapat diatur secara terprogram dengan mengatur CurrentItem properti ke item. Contoh XAML berikut menunjukkan CarouselView yang telah memilih item saat ini:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItem="{Binding CurrentItem}">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemProperty, "CurrentItem");

Catatan

Properti CurrentItem memiliki mode pengikatan default .TwoWay

Data CarouselView.CurrentItem properti mengikat ke CurrentItem properti model tampilan terhubung, yang berjenis Monkey. Secara default, TwoWay pengikatan digunakan sehingga jika pengguna mengubah item saat ini, nilai CurrentItem properti akan diatur ke objek saat ini Monkey . Properti CurrentItem didefinisikan dalam MonkeysViewModel kelas:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public ObservableCollection<Monkey> Monkeys { get; private set; }

    public Monkey CurrentItem { get; set; }

    public MonkeysViewModel()
    {
        // ...
        CurrentItem = Monkeys.Skip(3).FirstOrDefault();
        OnPropertyChanged("CurrentItem");
    }
}

Dalam contoh ini, CurrentItem properti diatur ke item keempat dalam Monkeys koleksi:

Prasetel posisi

Item yang CarouselView ditampilkan dalam dapat diatur secara terprogram dengan mengatur Position properti ke indeks item dalam koleksi yang mendasar. Contoh XAML berikut menunjukkan CarouselView yang mengatur item yang ditampilkan:

<CarouselView ItemsSource="{Binding Monkeys}"
              Position="{Binding Position}">
    ...
</CarouselView>

Kode C# yang setara adalah:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionProperty, "Position");

Catatan

Properti Position memiliki mode pengikatan default .TwoWay

Data CarouselView.Position properti mengikat ke Position properti model tampilan terhubung, yang berjenis int. Secara default, TwoWay pengikatan digunakan sehingga jika pengguna menggulir melalui CarouselView, nilai Position properti akan diatur ke indeks item yang ditampilkan. Properti Position didefinisikan dalam MonkeysViewModel kelas:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public int Position { get; set; }

    public MonkeysViewModel()
    {
        // ...
        Position = 3;
        OnPropertyChanged("Position");
    }
}

Dalam contoh ini, Position properti diatur ke item keempat dalam Monkeys koleksi:

Menentukan status visual

CarouselView menentukan empat status visual:

• CurrentItem mewakili status visual untuk item yang saat ini ditampilkan.
• PreviousItem mewakili status visual untuk item yang ditampilkan sebelumnya.
• NextItem mewakili status visual untuk item berikutnya.
• DefaultItem mewakili status visual untuk sisa item.

Status visual ini dapat digunakan untuk memulai perubahan visual pada item yang ditampilkan oleh CarouselView.

Contoh XAML berikut menunjukkan cara menentukan CurrentItemstatus visual , , PreviousItemNextItem, dan DefaultItem :

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="CurrentItem">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="1.1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PreviousItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NextItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="DefaultItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.25" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- Item template content -->
                <Frame HasShadow="true">
                    ...
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Dalam contoh ini, CurrentItem status visual menentukan bahwa item saat ini yang ditampilkan oleh CarouselView akan mengubah propertinya Scale dari nilai default 1 menjadi 1,1. Status PreviousItem visual dan NextItem menentukan bahwa item di sekitar item saat ini akan ditampilkan dengan Opacity nilai 0,5. Status DefaultItem visual menentukan bahwa sisa item yang ditampilkan oleh CarouselView akan ditampilkan dengan Opacity nilai 0,25.

Catatan

Atau, status visual dapat didefinisikan dalam Style yang memiliki TargetType nilai properti yang merupakan jenis elemen akar dari DataTemplate, yang ditetapkan sebagai ItemTemplate nilai properti.

Cuplikan layar berikut menunjukkan CurrentItemstatus visual , PreviousItem, dan NextItem :

Untuk informasi selengkapnya tentang status visual, lihat Xamarin.Forms Visual State Manager.

Bersihkan item saat ini

Properti CurrentItem dapat dibersihkan dengan mengaturnya, atau objek yang diikatnya, ke null.

Nonaktifkan pantulan

Secara default, CarouselView memantulkan item pada batas konten. Ini dapat dinonaktifkan dengan mengatur properti ke IsBounceEnabledfalse.

Nonaktifkan perulangan

Secara default, CarouselView menyediakan akses perulangan ke kumpulan itemnya. Oleh karena itu, menggesek mundur dari item pertama dalam koleksi akan menampilkan item terakhir dalam koleksi. Demikian pula, menggeser maju dari item terakhir dalam koleksi akan kembali ke item pertama dalam koleksi. Perilaku ini dapat dinonaktifkan dengan mengatur properti ke Loopfalse.

Menonaktifkan interaksi gesek

Secara default, CarouselView memungkinkan pengguna untuk menelusuri item menggunakan gerakan gesek. Interaksi gesek ini dapat dinonaktifkan dengan mengatur IsSwipeEnabled properti ke false.

Tautan terkait

• Xamarin.Forms Manajer Status Visual