Xamarin.Forms Selección de CollectionView

Descarga del ejemplo

CollectionView define las siguientes propiedades que controlan la selección de elementos:

• _SelectableItemsView_SelectionMode" data-linktype="absolute-path">, del tipo SelectionMode , SelectionMode el modo de selección.
• Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">, del tipo SelectedItem , object el elemento seleccionado en la lista. Esta propiedad tiene un modo de enlace predeterminado TwoWay de y tiene un valor cuando no se selecciona ningún null elemento.
• Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">, de tipo , los elementos SelectedItemsIList<object> seleccionados en la lista. Esta propiedad tiene un modo de enlace predeterminado OneWay de y tiene un valor cuando no se selecciona ningún null elemento.
• Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">, de tipo , que se ejecuta cuando cambia SelectionChangedCommand el elemento ICommand seleccionado.
• Xamarin_Forms _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">SelectionChangedCommandParameter , object de tipo , que es el parámetro que se pasa a SelectionChangedCommand .

Todas estas propiedades están respaldados por objetos BindableProperty, lo que significa que las propiedades pueden ser destinos de los enlaces de datos.

De forma predeterminada, CollectionView la selección está deshabilitada. Sin embargo, este comportamiento se puede cambiar estableciendo el valor de propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">en uno de los miembros de SelectionModeSelectionMode enumeración:

• None : indica que no se pueden seleccionar elementos. Este es el valor predeterminado.
• Single : indica que se puede seleccionar un solo elemento, con el elemento seleccionado resaltado.
• Multiple : indica que se pueden seleccionar varios elementos, con los elementos seleccionados resaltados.

CollectionViewdefine un evento que se desencadena cuando cambia la propiedad SelectionChanged Xamarin_Forms CollectionView _SelectableItemsView_SelectedItem" data-linktype="absolute-path">, ya sea porque el usuario selecciona un elemento de la lista o cuando una aplicación establece SelectedItem la propiedad. Además, este evento también se desencadena cuando cambia Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItems propiedad. El SelectionChangedEventArgs objeto que acompaña al evento tiene dos SelectionChanged propiedades, ambas de tipo IReadOnlyList<object> :

• PreviousSelection : la lista de elementos que se seleccionaron antes de que cambiara la selección.
• CurrentSelection : la lista de elementos seleccionados, después del cambio de selección.

Además, tiene un método que actualiza la propiedad CollectionViewUpdateSelectedItems Xamarin_Forms CollectionView _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItems con una lista de elementos seleccionados, al tiempo que solo se activará una única notificación de cambio.

Selección única

Cuando la propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">está establecida en SelectionModeSingle , CollectionView se puede seleccionar un único elemento de . Cuando se selecciona un elemento, la propiedad Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">se establecerá en el valor del SelectedItem elemento seleccionado. Cuando cambia esta propiedad, se ejecuta el elemento data-linktype="absolute-path">de Xamarin_Forms _SelectableItemsView_SelectionChangedCommand Xamarin_Forms" SelectionChangedCommandSelectionChangedCommand data-linktype="absolute-path">(con el valor de Xamarin_Forms _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">SelectionChangedCommandParameterICommandSelectionChanged que se pasa a ) y se produce el evento.

En el ejemplo xaml siguiente se muestra CollectionView un objeto que puede responder a la selección de un solo elemento:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo de código, el controlador de eventos se ejecuta cuando se genera el evento, con el controlador de eventos que recupera el elemento seleccionado previamente y el elemento OnCollectionViewSelectionChangedSelectionChanged seleccionado actual:

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

En las capturas de pantalla siguientes se muestra la selección de un solo elemento en CollectionView :

Captura de pantalla de una lista vertical collectionView con selección única, eny Android

Selección múltiple

Cuando la propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">está establecida en SelectionModeMultiple , CollectionView se pueden seleccionar varios elementos de . Cuando se seleccionan elementos, la propiedad Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">se establecerá SelectedItems en los elementos seleccionados. Cuando cambia esta propiedad, se ejecuta el elemento data-linktype="absolute-path">de Xamarin_Forms _SelectableItemsView_SelectionChangedCommand Xamarin_Forms" SelectionChangedCommandSelectionChangedCommand data-linktype="absolute-path">(con el valor de Xamarin_Forms _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">SelectionChangedCommandParameterICommandSelectionChanged que se pasa a ) y se produce el evento.

En el ejemplo xaml siguiente se CollectionView muestra un objeto que puede responder a la selección de varios elementos:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo de código, el controlador de eventos se ejecuta cuando se genera el evento, con el controlador de eventos que recupera los elementos seleccionados previamente y los OnCollectionViewSelectionChangedSelectionChanged elementos seleccionados actuales:

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

En las capturas de pantalla siguientes se muestra la selección de varios elementos en CollectionView :

selección múltiple Captura de pantalla de una lista vertical CollectionView con selección múltiple, eny Android

Selección previa única

Cuando la propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">se establece en , se puede seleccionar previamente un único elemento de la propiedad SelectionModeSingle Xamarin_Forms CollectionViewSelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItem en el elemento. En el ejemplo xaml siguiente se CollectionView muestra un que selecciona previamente un solo elemento:

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

El código de C# equivalente es el siguiente:

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

El Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">se enlaza a la propiedad del modelo de vista SelectedItemSelectedMonkey conectada, que es de tipo Monkey . De forma predeterminada, se usa un enlace para que, si el usuario cambia el elemento seleccionado, el valor de la propiedad se establezca TwoWaySelectedMonkey en el objeto Monkey seleccionado. La SelectedMonkey propiedad se define en la clase y se establece en el cuarto elemento de la MonkeysViewModelMonkeys colección:

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();
    }
    ...
}

Por lo tanto, cuando aparece , se preselección el cuarto elemento de CollectionView la lista:

Selección previa múltiple

Cuando la propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">está establecida en SelectionModeMultiple , CollectionView se pueden seleccionar previamente varios elementos de . En el ejemplo xaml siguiente se CollectionView muestra un que habilitará la selección previa de varios elementos:

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

El código de C# equivalente es el siguiente:

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

El Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">se enlaza a la propiedad del modelo de vista SelectedItemsSelectedMonkeys conectada, que es de tipo ObservableCollection<object> . La propiedad se define en la clase y se establece en el segundo, cuarto y SelectedMonkeys quinto elemento de la MonkeysViewModelMonkeys colección:

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

Por lo tanto, cuando aparece , se preselección el segundo, cuarto y quinto elemento de la CollectionView lista:

Borrar selecciones

El Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItem and Xamarin_Forms SelectedItem _SelectableItemsView_SelectedItems" data-linktype="absolute-path">properties can be cleared by setting them, or the SelectedItems objects they bind to, to null .

Cambio del color del elemento seleccionado

CollectionViewtiene un SelectedVisualState objeto que se puede usar para iniciar un cambio visual en el elemento seleccionado en CollectionView . Un caso de uso común para esto es cambiar el color de fondo del elemento seleccionado, que se VisualState muestra en el ejemplo xaml siguiente:

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

En este ejemplo, el valor de la propiedad Xamarin_Forms _Style_TargetType" data-linktype="absolute-path">se establece en porque el elemento raíz de Style.TargetTypeGrid Xamarin_Forms Style.TargetType _ItemsView_ItemTemplate" data-linktype="absolute-path">es ItemTemplateGrid . especifica que cuando se selecciona un elemento de , el valor de SelectedVisualStateCollectionView Xamarin_Forms Selected _VisualElement_BackgroundColor" data-linktype="absolute-path">BackgroundColor del LightSkyBlue elemento se establecerá en :

Screenshot of a

Para obtener más información sobre los estados visuales, vea Xamarin.Forms Visual State Manager .

Deshabilitación de la selección

CollectionView la selección está deshabilitada de forma predeterminada. Sin embargo, si tiene habilitada la selección, se puede deshabilitar estableciendo la propiedad CollectionView Xamarin_Forms CollectionView _SelectableItemsView_SelectionMode" data-linktype="absolute-path">SelectionMode en None :

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

El código de C# equivalente es el siguiente:

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

Cuando la propiedad Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">se establece en , los elementos de no se pueden seleccionar, la propiedad SelectionModeNoneCollectionViewSelectionMode data-linktype="absolute-path">de Xamarin_Forms _SelectableItemsView_SelectedItem" SelectedItemnullSelectionChanged permanecerá y no se desencadena el evento.

Vínculos relacionados

• CollectionView (ejemplo)
• Xamarin.Forms Visual State Manager