.NET 多平台应用 UI (.NET MAUI)
CollectionView
定义控制项选择的以下属性:
SelectionMode
,类型
SelectionMode
为 选择模式。
SelectedItem
,类型
object
为 列表中的选定项。 此属性的默认绑定模式为
TwoWay
,并且未选择任何项时具有
null
值。
SelectedItems
,类型
IList<object>
为 ,列表中选定的项。 此属性的默认绑定模式为
OneWay
,在没有选择任何项时具有
null
值。
SelectionChangedCommand
,类型
ICommand
为 ,在所选项更改时执行。
SelectionChangedCommandParameter
,属于
object
类型,是传递给
SelectionChangedCommand
的参数。
所有这些属性都由
BindableProperty
对象提供支持,这意味着这些属性可以作为数据绑定的目标。
默认情况下,
CollectionView
选择处于禁用状态。 但是,可以通过将
SelectionMode
属性值设置为枚举成员之一来
SelectionMode
更改此行为:
None
– 指示无法选择项。 这是默认值。
Single
– 指示可以选择单个项,并突出显示所选项。
Multiple
– 指示可以选择多个项,并突出显示所选项。
CollectionView
定义一个
SelectionChanged
事件,该事件在属性更改时
SelectedItem
触发,该事件可能是由于用户从列表中选择了某个项,或者当应用程序设置该属性时触发。 此外,当 属性更改时
SelectedItems
,也会触发此事件。
SelectionChangedEventArgs
事件附带的
SelectionChanged
对象具有两个属性,这两个属性
IReadOnlyList<object>
的类型均为 :
PreviousSelection
– 所选内容更改之前所选项的列表。
CurrentSelection
– 所选内容更改后所选项的列表。
此外,
CollectionView
具有一个
UpdateSelectedItems
方法,
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;
在此代码示例中 OnCollectionViewSelectionChanged
,事件处理程序在事件触发时 SelectionChanged
执行,事件处理程序检索以前选定的项和当前选定的项:
void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
var previous = e.PreviousSelection;
var current = e.CurrentSelection;
由于 SelectionChanged
更改属性而 SelectionMode
发生的更改,可以触发 事件。
以下屏幕截图显示了 中的 CollectionView多个项选择:
当 属性SelectionMode
设置为 Single
时,可以通过将 属性设置为 SelectedItem
项来预选 中的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
return selectedMonkey;
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
return selectedMonkeys;
if (selectedMonkeys != value)
selectedMonkeys = value;
public MonkeysViewModel()
SelectedMonkeys = new ObservableCollection<object>()
Monkeys[1], Monkeys[3], Monkeys[4]
因此,当 出现 时 CollectionView ,将预先选择列表中的第二个、第四个和第五个项:
SelectedItem
可以通过将 和 SelectedItems
属性或它们绑定到的对象设置为 来null
清除它们。 清除这些属性中的任何一个时, SelectionChanged
事件将引发空 CurrentSelection
属性,并 SelectionChangedCommand
执行 。
更改所选项目颜色
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
属性值,该值是 设置为 ItemTemplate
属性值的DataTemplate根元素的类型。
在此示例中, Style.TargetType
属性值设置为 Grid ,因为 的 ItemTemplate
根元素是 Grid。 指定 Selected
VisualState 选择 中的 CollectionView 项时, BackgroundColor
该项的 设置为 LightSkyBlue
:
有关视觉状态的详细信息,请参阅 视觉状态。
CollectionView 默认情况下,选择处于禁用状态。 但是,如果 CollectionView 已启用选择,可以通过将 属性设置为 None
来禁用它SelectionMode
:
<CollectionView ...
SelectionMode="None" />
等效 C# 代码如下:
CollectionView collectionView = new CollectionView
SelectionMode = SelectionMode.None
当 SelectionMode
属性设置为 None
时,无法选择 中的 CollectionView 项,该 SelectedItem
属性将保留 null
,并且 SelectionChanged
不会触发事件。
当已选择某个项并且属性SelectionMode
从 None
Single
更改为 时, SelectedItem
属性将设置为 null
,并且SelectionChanged
事件将使用空CurrentSelection
属性触发。