Xamarin.Forms CollectionView の選択

Download Sample サンプルをダウンロードします

CollectionView は、項目の選択を制御する次のプロパティを定義します。

  • SelectionModeの種類 SelectionMode、選択モードです。
  • SelectedItem、種類 object、リスト内の選択した項目。 このプロパティは既定のバインド モードであり TwoWay、項目が選択されていない場合は値を持 null っています。
  • SelectedItems、種類 IList<object>、リスト内の選択した項目。 このプロパティは既定の OneWayバインド モードであり、項目が選択されていない場合は値を持 null っています。
  • SelectionChangedCommandは、選択した項目が変更されたときに実行される型 ICommandです。
  • SelectionChangedCommandParameter: object 型、SelectionChangedCommand に渡されるパラメーター。

これらのプロパティはすべて、BindableProperty オブジェクトを基盤としています。つまり、プロパティはデータ バインディングの対象にすることができます。

既定では、 CollectionView 選択は無効になっています。 ただし、プロパティ値を列挙メンバーのいずれかに設定 SelectionMode することで、この動作を SelectionMode 変更できます。

  • None – 項目を選択できないことを示します。 これが既定値です。
  • Single – 選択した項目が強調表示された状態で、1 つの項目を選択できることを示します。
  • Multiple – 選択した項目が強調表示された状態で、複数の項目を選択できることを示します。

CollectionView は、 SelectionChanged ユーザーがリストから項目を SelectedItem 選択した場合、またはアプリケーションがプロパティを設定した場合に、プロパティが変更されたときに発生するイベントを定義します。 さらに、このイベントは、プロパティが変更されたときに SelectedItems も発生します。 イベントに付随SelectionChangedするオブジェクトにはSelectionChangedEventArgs、両方の型IReadOnlyList<object>の 2 つのプロパティがあります。

  • PreviousSelection – 選択が変更される前に選択された項目の一覧。
  • CurrentSelection – 選択が変更された後に選択された項目の一覧。

さらに、 CollectionViewUpdateSelectedItems 選択した項目の一覧でプロパティを SelectedItems 更新するメソッドがあり、変更通知は 1 つだけ発生します。

単一選択

プロパティが SelectionMode 設定 Singleされている場合は、その中の 1 つの項目を CollectionView 選択できます。 項目を選択すると、 SelectedItem プロパティは選択した項目の値に設定されます。 このプロパティが変更されると、 SelectionChangedCommand (渡される値 SelectionChangedCommandParameter を使用して ICommand) 実行され、イベントが SelectionChanged 発生します。

次の XAML の例は、 CollectionView 1 つの項目の選択に応答できる値を示しています。

<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 可能性があります。

次のスクリーンショットは、次の 1 つの項目の選択を CollectionView示しています。

Screenshot of a CollectionView vertical list with single selection, on iOS and Android

複数選択

プロパティが 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;

このコード例では、 OnCollectionViewSelectionChanged イベントが発生したときに SelectionChanged イベント ハンドラーが実行され、イベント ハンドラーは前に選択した項目と現在選択されている項目を取得します。

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

重要

イベントは SelectionChanged 、プロパティを変更した結果として発生する変更によって発生する SelectionMode 可能性があります。

次のスクリーンショットは、複数の項目の選択を CollectionView示しています。

Screenshot of a CollectionView vertical list with multiple selection, on iOS and Android

単一の事前選択

プロパティがSelectionMode設定されている場合、プロパティをアイテムCollectionViewSingle設定することで、その中の 1 つの項目をSelectedItem事前に選択できます。 次の XAML の例は、 CollectionView 1 つの項目を事前に選択する方法を示しています。

<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 、接続されたビュー モデルのプロパティ ( SelectedMonkeyMonkey) にバインドされます。 既定では、バインドが使用され、 TwoWay ユーザーが選択した項目を変更すると、プロパティの SelectedMonkey 値が選択した Monkey オブジェクトに設定されます。 このプロパティは SelectedMonkey クラスで MonkeysViewModel 定義され、コレクションの 4 番目の項目に 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 、リスト内の 4 番目の項目が事前に選択されます。

Screenshot of a CollectionView vertical list with single pre-selection, on iOS and Android

複数の事前選択

プロパティが 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 、接続されたビュー モデルのプロパティ ( SelectedMonkeysObservableCollection<object>) にバインドされます。 このプロパティは SelectedMonkeys クラスで MonkeysViewModel 定義され、コレクション内の 2 番目、4 番目、5 番目の項目に 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 、リスト内の 2 番目、4 番目、5 番目の項目が事前に選択されます。

Screenshot of a CollectionView vertical list with multiple pre-selection, on iOS and Android

選択範囲をクリアする

プロパティとSelectedItemsプロパティはSelectedItem、オブジェクトまたはバインドnullするオブジェクトを設定することでクリアできます。

選択した項目の色を変更する

CollectionView には、 SelectedVisualState 〘〘内の選択した項目に対する視覚的変更を開始するために使用できる があります 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>

重要

を含むSelectedVisualStateオブジェクトにはStyle、プロパティ値として設定される、そのルート要素DataTemplateの型であるプロパティ値がItemTemplate必要TargetTypeです。

この例では、プロパティ値Style.TargetTypeは、のルート要素が a であるためにItemTemplateGrid設定Gridされます。 この SelectedVisualState 指定は、項目が CollectionView 選択されたときに、その項目が BackgroundColor 次のように設定 LightSkyBlueされることを指定します。

Screenshot of a CollectionView vertical list with a custom single selection color, on iOS and Android

ビジュアルの状態の詳細については、「Xamarin.Forms Visual State Manager」をご覧ください。

選択を無効にする

CollectionView 既定では、選択は無効になっています。 ただし、選択が有効になっているCollectionView場合は、プロパティNoneを次のように設定SelectionModeすることで無効にすることができます。

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

これに相当する C# コードを次に示します。

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

プロパティがSelectionMode設定Noneされている場合、その中の項目をCollectionView選択することはできません。SelectedItemプロパティは残りnullSelectionChanged、イベントは発生しません。

注意

項目が選択され、プロパティがSelectionMode変更SingleNoneされると、SelectedItemプロパティが設定nullされ、空CurrentSelectionSelectionChangedプロパティでイベントが発生します。