Xamarin.Forms CollectionView 選取專案

發行項
05/06/2019

CollectionView 定義下列控制項目選取的屬性：

SelectionMode，類型 SelectionMode為，選取模式。
SelectedItem，類型 object為清單中選取的專案。此屬性的預設系結模式 TwoWay為，且未選取任何專案時具有 null 值。
SelectedItems類型 IList<object>為的，是清單中的選取專案。此屬性的預設系結模式 OneWay為，且未選取任何專案時具有 null 值。
SelectionChangedCommand型別為 ICommand的，會在選取的專案變更時執行。
SelectionChangedCommandParameter，屬於 object 類型，這是傳遞至 SelectionChangedCommand 的參數。

所有這些屬性都以 BindableProperty 物件為後盾，也就是說，這些屬性可以是資料繫結的目標。

根據預設， CollectionView 會停用選取範圍。不過，將屬性值設定 SelectionMode 為其中 SelectionMode 一個列舉成員，即可變更此行為：

None – 表示無法選取專案。這是預設值。
Single – 表示可以選取單一專案，並反白顯示選取的專案。
Multiple – 表示可以選取多個專案，並醒目提示選取的專案。

CollectionViewSelectionChanged定義屬性變更時SelectedItem引發的事件，可能是因為使用者從清單中選取專案，或應用程式設定屬性時引發。此外，當屬性變更時 SelectedItems ，也會引發此事件。事件 SelectionChangedEventArgs 隨附 SelectionChanged 的物件有兩個屬性，兩者都是類型 IReadOnlyList<object>：

PreviousSelection – 選取項目變更之前選取的項目清單。
CurrentSelection – 選取項目變更之後選取的項目清單。

此外，還有一個UpdateSelectedItems方法，CollectionView這個方法會使用選取的專案清單來更新 SelectedItems 屬性，同時只會引發單一變更通知。

單一選取項目

SelectionMode當屬性設定為 Single時，可以選取中的CollectionView單一專案。選取專案時， SelectedItem 屬性會設定為所選取專案的值。當這個屬性變更時， SelectionChangedCommand 會執行（將的值 SelectionChangedCommandParameter 傳遞給 ICommand），並 SelectionChanged 引發事件。

下列 XAML 範例顯示 CollectionView 可以回應單一項目選取項目的：

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

對等的 C# 程式碼為：

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

在此程式代碼範例中， OnCollectionViewSelectionChanged 事件處理程式會在事件引發時 SelectionChanged 執行，事件處理程式會擷取先前選取的專案，以及目前選取的專案：

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

重要

SelectionChanged因為變更 SelectionMode 屬性而發生的變更，可以引發事件。

下列螢幕快照顯示中的單一 CollectionView項目選取專案：

多重選取

SelectionMode當屬性設定為 Multiple時，可以選取中的CollectionView多個專案。選取專案時， SelectedItems 屬性會設定為選取的專案。當這個屬性變更時， SelectionChangedCommand 會執行（將的值 SelectionChangedCommandParameter 傳遞給 ICommand），並 SelectionChanged 引發事件。

下列 XAML 範例顯示 CollectionView 可以回應多個項目選取項目的：

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

對等的 C# 程式碼為：

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

在此程式代碼範例中SelectionChanged，OnCollectionViewSelectionChanged事件處理程式會在事件引發時執行，事件處理程式會擷取先前選取的專案，以及目前選取的專案：

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

重要

SelectionChanged因為變更 SelectionMode 屬性而發生的變更，可以引發事件。

下列螢幕快照顯示中的 CollectionView多個項目選取專案：

單一預先選取

SelectionMode當屬性設定為時，可以將屬性設定SelectedItem為 Single專案，以預先選取中的CollectionView單一專案。下列 XAML 範例顯示 CollectionView 預先選取單一項目的：

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

對等的 C# 程式碼為：

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

注意

屬性 SelectedItem 預設系結模式為 TwoWay。

屬性 SelectedItem 資料會繫結至 SelectedMonkey 連接檢視模型的屬性，其類型 Monkey為。根據預設，會使用系 TwoWay 結，讓使用者變更選取的專案時，屬性的值 SelectedMonkey 將會設定為選取 Monkey 的物件。屬性 SelectedMonkey 定義於類別中 MonkeysViewModel ，並設定為集合的第 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();
    }
    ...
}

因此，當出現時 CollectionView ，會預先選取清單中的第四個專案：

多個預先選取專案

SelectionMode當屬性設定為 Multiple時，可以預先選取中的CollectionView多個專案。下列 XAML 範例顯示 CollectionView ，將啟用多個項目的預先選取：

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

對等的 C# 程式碼為：

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

注意

屬性 SelectedItems 預設系結模式為 OneWay。

屬性 SelectedItems 資料會繫結至 SelectedMonkeys 連接檢視模型的屬性，其類型 ObservableCollection<object>為。屬性 SelectedMonkeys 定義於類別中 MonkeysViewModel ，並設定為集合中的 Monkeys 第二個、第四個和第五個專案：

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]
            };
        }
        ...
    }
}

因此，當出現時 CollectionView ，會預先選取清單中的第二個、第四個和第五個專案：

清除選取專案

和 SelectedItemSelectedItems 屬性可以藉由將和屬性設定為，或將它們系結至 null的物件來清除。

變更選取的專案色彩

CollectionViewSelectedVisualState具有，可用來起始中CollectionView所選項目的視覺變更。常見的使用案例 VisualState 是變更所選專案的背景色彩，如下列 XAML 範例所示：

<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>

重要

Style包含的VisualStateSelected必須具有 TargetType 屬性值，其為的根元素DataTemplate型別，其設定為 ItemTemplate 屬性值。

在這裡範例中 Style.TargetType ，屬性值會設定為 Grid ，因為的 ItemTemplate 根元素是 Grid。 SelectedVisualState指定選取的CollectionView項目時，BackgroundColor專案的會設定為 LightSkyBlue：

如需視覺狀態的詳細資訊，請參閱 Xamarin.Forms Visual State Manager。

停用選取範圍

CollectionView 選取項目預設為停用。不過，如果 CollectionView 已啟用選取專案，則可以將屬性設定 SelectionMode 為 None來停用：

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

對等的 C# 程式碼為：

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

SelectionMode當屬性設定為 None時，無法選取中的CollectionView專案，SelectedItem屬性會維持null為，而且SelectionChanged不會引發事件。

注意

選取專案並將 SelectionMode 屬性從變更Single為時，SelectedItem屬性會設定為 Nonenull ，而且SelectionChanged事件會以空白CurrentSelection屬性引發。

Xamarin.Forms Visual State Manager

共用方式為

Xamarin.Forms CollectionView 選取專案

單一選取項目

多重選取

單一預先選取

多個預先選取專案

清除選取專案

變更選取的專案色彩

停用選取範圍

其他資源

共用方式為

Xamarin.Forms CollectionView 選取專案

單一選取項目

多重選取

單一預先選取

多個預先選取專案

清除選取專案

變更選取的專案色彩

停用選取範圍

相關連結

其他資源