Xamarin.Forms CollectionView の選択

サンプルをダウンロードします。 サンプルをダウンロードする

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

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

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

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

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

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

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

さらに、には、選択した CollectionView UpdateSelectedItems 項目のリストを使用してプロパティを更新するメソッドがありますが、 SelectedItems 1 つの変更通知のみを実行します。

単一選択

プロパティがに設定されている場合は、 SelectionMode Single 内の1つの項目を 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 ます。

[IOS および Android での単一選択による 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;

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

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

重要

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

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

[IOS および Android での複数選択がある CollectionView 縦の一覧のスクリーンショット

1つの事前選択

SelectionModeプロパティがに設定され Single ている場合、 CollectionView SelectedItem プロパティを項目に設定することによって、内の1つの項目を事前選択できます。 次の 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プロパティデータは、 SelectedMonkey 接続されたビューモデルのプロパティにバインドされます。これは型 Monkey です。 既定では、ユーザーが選択した項目を変更した場合に、選択した 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 縦の一覧のスクリーンショット

複数の事前選択

プロパティがに設定されている場合は 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 コレクション内の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番目の項目が事前に選択されています。

[IOS および Android での複数の事前選択がある CollectionView の一覧のスクリーンショット

選択範囲のクリア

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

選択した項目の色の変更

CollectionView では、を使用して Selected VisualState 、内の選択した項目に対するビジュアル変更を開始でき 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 Selected VisualState TargetType ルート要素の型であるプロパティ値を持つ必要があり DataTemplate ます。これは、プロパティ値として設定され ItemTemplate ます。

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

[IOS および Android でのカスタム単一選択の色を使用した CollectionView 縦の一覧のスクリーンショット

ビジュアルの状態の詳細については、「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 NoneSelectedItem プロパティがに設定され、空のプロパティを使用して null SelectionChanged イベントが発生し CurrentSelection ます。