Bagikan melalui

Xamarin.Forms Pilihan CollectionView

  • Artikel

CollectionView menentukan properti berikut yang mengontrol pilihan item:

  • SelectionMode, dari jenis SelectionMode, mode pemilihan.
  • SelectedItem, dari jenis object, item yang dipilih dalam daftar. Properti ini memiliki mode TwoWaypengikatan default , dan memiliki null nilai ketika tidak ada item yang dipilih.
  • SelectedItems, dari jenis IList<object>, item yang dipilih dalam daftar. Properti ini memiliki mode OneWaypengikatan default , dan memiliki null nilai ketika tidak ada item yang dipilih.
  • SelectionChangedCommand, dari jenis ICommand, yang dijalankan ketika item yang dipilih berubah.
  • SelectionChangedCommandParameter, dari jenis object, yang merupakan parameter yang diteruskan ke SelectionChangedCommand.

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

Secara default, CollectionView pilihan dinonaktifkan. Namun, perilaku ini dapat diubah dengan mengatur SelectionMode nilai properti ke salah SelectionMode satu anggota enumerasi:

  • None – menunjukkan bahwa item tidak dapat dipilih. Ini adalah nilai default.
  • Single – menunjukkan bahwa satu item dapat dipilih, dengan item yang dipilih disorot.
  • Multiple – menunjukkan bahwa beberapa item dapat dipilih, dengan item yang dipilih disorot.

CollectionViewSelectionChanged menentukan peristiwa yang diaktifkan saat SelectedItem properti berubah, baik karena pengguna memilih item dari daftar, atau ketika aplikasi mengatur properti. Selain itu, peristiwa ini juga diaktifkan ketika SelectedItems properti berubah. Objek SelectionChangedEventArgs yang menyertai SelectionChanged peristiwa memiliki dua properti, kedua jenis IReadOnlyList<object>:

  • PreviousSelection – daftar item yang dipilih, sebelum pilihan berubah.
  • CurrentSelection – daftar item yang dipilih, setelah pemilihan berubah.

Selain itu, CollectionView memiliki UpdateSelectedItems metode yang memperbarui SelectedItems properti dengan daftar item yang dipilih, sementara hanya menembakkan satu pemberitahuan perubahan.

Pilihan tunggal

SelectionMode Saat properti diatur ke Single, satu item dalam CollectionView dapat dipilih. Ketika item dipilih, SelectedItem properti akan diatur ke nilai item yang dipilih. Ketika properti ini berubah, SelectionChangedCommand dijalankan (dengan nilai yang SelectionChangedCommandParameter diteruskan ke ICommand), dan SelectionChanged peristiwa diaktifkan.

Contoh XAML berikut menunjukkan yang dapat merespons CollectionView pilihan item tunggal:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnCollectionViewSelectionChanged">
    ...
</CollectionView>

Kode C# yang setara adalah:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Single
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SelectionChanged += OnCollectionViewSelectionChanged;

Dalam contoh kode ini, OnCollectionViewSelectionChanged penanganan aktivitas dijalankan saat SelectionChanged peristiwa diaktifkan, dengan penanganan aktivitas mengambil item yang dipilih sebelumnya, dan item yang dipilih saat ini:

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string previous = (e.PreviousSelection.FirstOrDefault() as Monkey)?.Name;
    string current = (e.CurrentSelection.FirstOrDefault() as Monkey)?.Name;
    ...
}

Penting

Peristiwa SelectionChanged dapat dipicu oleh perubahan yang terjadi sebagai akibat dari mengubah SelectionMode properti.

Cuplikan layar berikut menunjukkan pilihan item tunggal dalam :CollectionView

Cuplikan layar daftar vertikal CollectionView dengan pilihan tunggal, di iOS dan Android

Beberapa pilihan

SelectionMode Ketika properti diatur ke Multiple, beberapa item dalam CollectionView dapat dipilih. Ketika item dipilih, SelectedItems properti akan diatur ke item terpilih. Ketika properti ini berubah, SelectionChangedCommand dijalankan (dengan nilai yang SelectionChangedCommandParameter diteruskan ke ICommand), dan SelectionChanged peristiwa diaktifkan.

Contoh XAML berikut menunjukkan CollectionView yang dapat merespons pilihan beberapa item:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Multiple"
                SelectionChanged="OnCollectionViewSelectionChanged">
    ...
</CollectionView>

Kode C# yang setara adalah:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Multiple
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SelectionChanged += OnCollectionViewSelectionChanged;

Dalam contoh kode ini, OnCollectionViewSelectionChanged penanganan aktivitas dijalankan saat SelectionChanged peristiwa diaktifkan, dengan penanganan aktivitas mengambil item yang dipilih sebelumnya, dan item yang dipilih saat ini:

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var previous = e.PreviousSelection;
    var current = e.CurrentSelection;
    ...
}

Penting

Peristiwa SelectionChanged dapat dipicu oleh perubahan yang terjadi sebagai akibat dari mengubah SelectionMode properti.

Cuplikan layar berikut menunjukkan beberapa pilihan item dalam :CollectionView

Cuplikan layar daftar vertikal CollectionView dengan beberapa pilihan, di iOS dan Android

Pra-pilihan tunggal

SelectionMode Ketika properti diatur ke Single, satu item di CollectionView dapat dipilih sebelumnya dengan mengatur SelectedItem properti ke item. Contoh XAML berikut menunjukkan CollectionView yang telah memilih item tunggal:

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedMonkey}">
    ...
</CollectionView>

Kode C# yang setara adalah:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Single
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SetBinding(SelectableItemsView.SelectedItemProperty, "SelectedMonkey");

Catatan

Properti SelectedItem memiliki mode pengikatan default .TwoWay

Data SelectedItem properti mengikat ke SelectedMonkey properti model tampilan terhubung, yang berjenis Monkey. Secara default, TwoWay pengikatan digunakan sehingga jika pengguna mengubah item yang dipilih, nilai SelectedMonkey properti akan diatur ke objek yang dipilih Monkey . Properti SelectedMonkey didefinisikan di MonkeysViewModel kelas , dan diatur ke item keempat koleksi Monkeys :

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

    Monkey selectedMonkey;
    public Monkey SelectedMonkey
    {
        get
        {
            return selectedMonkey;
        }
        set
        {
            if (selectedMonkey != value)
            {
                selectedMonkey = value;
            }
        }
    }

    public MonkeysViewModel()
    {
        ...
        selectedMonkey = Monkeys.Skip(3).FirstOrDefault();
    }
    ...
}

Oleh karena itu, saat CollectionView muncul, item keempat dalam daftar telah dipilih sebelumnya:

Cuplikan layar daftar vertikal CollectionView dengan pra-pilihan tunggal, di iOS dan Android

Beberapa pra-pilihan

SelectionMode Ketika properti diatur ke Multiple, beberapa item di CollectionView dapat dipilih sebelumnya. Contoh XAML berikut menunjukkan CollectionView yang akan mengaktifkan pra-pemilihan beberapa item:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}"
                SelectionMode="Multiple"
                SelectedItems="{Binding SelectedMonkeys}">
    ...
</CollectionView>

Kode C# yang setara adalah:

CollectionView collectionView = new CollectionView
{
    SelectionMode = SelectionMode.Multiple
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
collectionView.SetBinding(SelectableItemsView.SelectedItemsProperty, "SelectedMonkeys");

Catatan

Properti SelectedItems memiliki mode pengikatan default .OneWay

Data SelectedItems properti mengikat ke SelectedMonkeys properti model tampilan terhubung, yang berjenis ObservableCollection<object>. Properti SelectedMonkeys didefinisikan di MonkeysViewModel kelas , dan diatur ke item kedua, keempat, dan kelima dalam Monkeys koleksi:

namespace CollectionViewDemos.ViewModels
{
    public class MonkeysViewModel : INotifyPropertyChanged
    {
        ...
        ObservableCollection<object> selectedMonkeys;
        public ObservableCollection<object> SelectedMonkeys
        {
            get
            {
                return selectedMonkeys;
            }
            set
            {
                if (selectedMonkeys != value)
                {
                    selectedMonkeys = value;
                }
            }
        }

        public MonkeysViewModel()
        {
            ...
            SelectedMonkeys = new ObservableCollection<object>()
            {
                Monkeys[1], Monkeys[3], Monkeys[4]
            };
        }
        ...
    }
}

Oleh karena itu, ketika CollectionView item kedua, keempat, dan kelima muncul dalam daftar telah dipilih sebelumnya:

Cuplikan layar daftar vertikal CollectionView dengan beberapa pra-pilihan, di iOS dan Android

Bersihkan pilihan

Properti SelectedItem dan SelectedItems dapat dibersihkan dengan mengaturnya, atau objek yang mereka ikat, ke null.

Ubah warna item terpilih

CollectionView memiliki SelectedVisualState yang dapat digunakan untuk memulai perubahan visual ke item yang dipilih di CollectionView. Kasus penggunaan umum untuk ini VisualState adalah mengubah warna latar belakang item yang dipilih, yang diperlihatkan dalam contoh XAML berikut:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}"
                        SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        ...
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Penting

Style yang berisi SelectedVisualState harus memiliki TargetType nilai properti yang merupakan jenis elemen akar dari DataTemplate, yang ditetapkan sebagai ItemTemplate nilai properti.

Dalam contoh ini, Style.TargetType nilai properti diatur ke Grid karena elemen akar adalah ItemTemplateGrid. SelectedVisualState Menentukan bahwa ketika item dalam CollectionView dipilih, BackgroundColor item akan diatur ke LightSkyBlue:

Cuplikan layar daftar vertikal CollectionView dengan warna pilihan tunggal kustom, di iOS dan Android

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

Nonaktifkan pilihan

CollectionView pilihan dinonaktifkan secara default. Namun, jika memiliki pilihan yang CollectionView diaktifkan, pilihan tersebut dapat dinonaktifkan dengan mengatur SelectionMode properti ke None:

<CollectionView ...
                SelectionMode="None" />

Kode C# yang setara adalah:

CollectionView collectionView = new CollectionView
{
    ...
    SelectionMode = SelectionMode.None
};

SelectionMode Ketika properti diatur ke None, item dalam CollectionView tidak dapat dipilih, SelectedItem properti akan tetap null, dan SelectionChanged peristiwa tidak akan diaktifkan.

Catatan

Ketika item telah dipilih dan SelectionMode properti diubah dari Single ke None, SelectedItem properti akan diatur ke null dan SelectionChanged peristiwa akan diaktifkan dengan properti kosong CurrentSelection .