Xamarin.Forms CollectionView の選択

サンプルのダウンロードサンプルのダウンロード

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

  • SelectionModeSelectionModeの 、選択モード。
  • 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 も発生します。 SelectionChangedEventArgsイベントに付随SelectionChangedする オブジェクトには、 型IReadOnlyList<object>の両方の 2 つのプロパティがあります。

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

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

単一選択

プロパティが SelectionModeSingle設定されている場合は、 内の 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示しています。

一選択の CollectionView 縦一覧のスクリーンショット。iOS および Android

複数選択

プロパティが SelectionModeMultiple設定されている場合は、 内の複数の項目を 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示しています。

選択の CollectionView 縦一覧のスクリーンショット。iOS と Android

単一の事前選択

プロパティが SelectionModeSingle設定されている場合、 内の CollectionView 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");

注意

プロパティの既定のバインド モードTwoWaySelectedItem です。

プロパティ データは SelectedItemSelectedMonkeyMonkeyの接続ビュー モデルのプロパティにバインドされます。 既定では、バインドが使用され、 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 番目の項目が事前に選択されます。

リスト iOS および Android CollectionView の単一の事前選択を含む CollectionView 縦のスクリーンショット

複数の事前選択

プロパティが SelectionModeMultiple設定されている場合、 内の複数の項目を 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");

注意

プロパティの既定のバインド モードOneWaySelectedItems です。

プロパティ データは SelectedItemsSelectedMonkeysObservableCollection<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 番目の項目が事前に選択されます。

複数の事前選択を含む CollectionView 縦型リストのスクリーンショット。iOS および 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>

重要

を含む Selectedには、 のルート要素DataTemplateの型であるプロパティ値が必要です。これは、プロパティ値としてItemTemplate設定されます。TargetTypeStyleVisualState

この例では、 のStyle.TargetTypeルート要素が であるため、 プロパティのItemTemplate値は GridGrid設定されています。 内 SelectedVisualState の項目が選択されている場合、項目 CollectionView の が BackgroundColorLightSkyBlue設定されることを指定します。

含む CollectionView 縦一覧\) カスタムの単一選択色を持つ CollectionView 縦型リストのスクリーンショット。iOS および Android

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

選択を無効にする

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

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

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

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

プロパティが SelectionModeNone設定されている場合、 内の CollectionView 項目を選択することはできません。 SelectedItem このプロパティは のまま nullであり、 SelectionChanged イベントは発生しません。

注意

項目が選択され、 SelectionMode プロパティが から Single に変更されると、 SelectedItem プロパティが にNonenull設定され、空のSelectionChangedプロパティでCurrentSelectionイベントが発生します。