Xamarin.Forms Výběr objektu CollectionView

Stáhnout ukázku Stažení ukázky

CollectionView definuje následující vlastnosti, které řídí výběr položky:

Všechny tyto vlastnosti jsou zálohovány objekty, což znamená, že vlastnosti mohou být cíle BindableProperty datových vazeb.

Ve výchozím nastavení CollectionView je výběr zakázán. Toto chování ale můžete změnit nastavením Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">vlastnosti na jeden ze SelectionModeSelectionMode členů výčtu:

  • None – označuje, že položky nelze vybrat. Toto je výchozí hodnota.
  • Single – označuje, že je možné vybrat jednu položku a vybraná položka je zvýrazněná.
  • Multiple – označuje, že je možné vybrat více položek a vybrané položky jsou zvýrazněné.

CollectionViewdefinuje událost, která se aktivuje při změně vlastnosti SelectionChanged Xamarin_Forms CollectionView _SelectableItemsView_SelectedItem" data-linktype="absolute-path">, a to buď kvůli SelectedItem tomu, že uživatel vybere položku ze seznamu, nebo když aplikace nastaví vlastnost . Kromě toho se tato událost také aktivují při změně Xamarin_Forms _SelectableItemsView_SelectedItems data-linktype="absolute-path">SelectedItems vlastností. Objekt, SelectionChangedEventArgs který doprovází SelectionChanged událost, má dvě vlastnosti, obě typu IReadOnlyList<object> :

  • PreviousSelection – seznam vybraných položek před tím, než se výběr změnil.
  • CurrentSelection – seznam vybraných položek po změně výběru.

Kromě toho obsahuje metodu, která aktualizuje vlastnost CollectionViewUpdateSelectedItems Xamarin_Forms CollectionView _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItems seznamem vybraných položek, ale současně se zobrazí pouze jedno oznámení o změně.

Jeden výběr

Pokud je Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">vlastnost SelectionMode nastavená na Single , je možné CollectionView vybrat jednu položku v objektu . Při výběru položky se vlastnost Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">nastaví na hodnotu SelectedItem vybrané položky. Když se tato vlastnost změní, spustí se Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">(s hodnotou SelectionChangedCommand Xamarin_Forms SelectionChangedCommand _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">SelectionChangedCommandParameterICommand předaná do ) SelectionChanged a událost se spustí.

Následující příklad XAML ukazuje , CollectionView který může reagovat na výběr jedné položky:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu kódu se obslužná rutina události spustí při vyvolání události. Obslužná rutina události načítá dříve vybranou položku a OnCollectionViewSelectionChangedSelectionChanged aktuální vybranou položku:

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

Důležité

Událost může být aktivována změnami, ke kterým dochází v důsledku změny SelectionChanged vlastnosti Xamarin_Forms SelectionChanged _SelectableItemsView_SelectionMode" data-linktype="absolute-path">SelectionMode vlastnost.

Následující snímky obrazovky ukazují výběr jedné položky v CollectionView :

s jedním výběrem Snímek obrazovky se svislým seznamem CollectionView s jedním výběremv iOSu aAndroiduSvislý seznam Zobrazení s

Vícenásobný výběr

Když je Xamarin_Forms _SelectableItemsView_SelectionMode data-linktype="absolute-path">vlastnost nastavená na , můžete vybrat SelectionModeMultiple více CollectionView položek v objektu . Když vyberete položky, Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">se nastaví SelectedItems na vybrané položky. Když se tato vlastnost změní, spustí se Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">(s hodnotou SelectionChangedCommand Xamarin_Forms SelectionChangedCommand _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">SelectionChangedCommandParameterICommand předaná do ) SelectionChanged a událost se spustí.

Následující příklad XAML ukazuje , CollectionView který může reagovat na výběr více položek:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu kódu se obslužná rutina události spustí při vyvolání události. Obslužná rutina události načítá dříve vybrané položky a OnCollectionViewSelectionChangedSelectionChanged aktuální vybrané položky:

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

Důležité

Událost může být aktivována změnami, ke kterým dochází v důsledku změny SelectionChanged vlastnosti Xamarin_Forms SelectionChanged _SelectableItemsView_SelectionMode" data-linktype="absolute-path">SelectionMode vlastnost.

Následující snímky obrazovky ukazují výběr několika položek v CollectionView :

s více výběry Snímek obrazovky se svislým seznamem CollectionView s vícenásobným výběremv iOSu aAndroiduSvislý seznam Zobrazení s

Jeden předběžné výběr

Když je vlastnost Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">nastavená na , je možné předem vybrat jednu položku v objektu nastavením vlastnosti SelectionModeSingle Xamarin_Forms CollectionViewSelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItem na položku. Následující příklad XAML ukazuje, CollectionView že předem vybere jednu položku:

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

Ekvivalentní kód jazyka C# je:

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

Vlastnost Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">data vlastnosti se váže na vlastnost připojeného modelu SelectedItemSelectedMonkey zobrazení, který je typu Monkey . Ve výchozím nastavení se používá vazba, takže pokud uživatel změní vybranou položku, hodnota vlastnosti se nastaví TwoWaySelectedMonkey na vybraný Monkey objekt. Vlastnost je definována ve třídě a SelectedMonkey je MonkeysViewModel nastavena na čtvrtou položku Monkeys kolekce:

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

Proto když se zobrazí , je čtvrtá položka v CollectionView seznamu předem vybraná:

s jedním předběžném výběrem Snímek obrazovky se svislým seznamem CollectionView s jedním předběžném výběremv iOSu aAndroiduSvislý seznam Zobrazení s

Vícenásobný předběžné výběr

Pokud je Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">vlastnost nastavená na , je možné předem vybrat více SelectionModeMultipleCollectionView položek v objektu . Následující příklad XAML ukazuje , CollectionView který umožní předběžné výběr více položek:

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

Ekvivalentní kód jazyka C# je:

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

Vlastnost Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">data se váže na vlastnost připojeného modelu SelectedItemsSelectedMonkeys zobrazení, která je typu ObservableCollection<object> . Vlastnost je definována ve třídě a je nastavena na druhou, čtvrtou a SelectedMonkeysMonkeysViewModel pátou položky v Monkeys kolekci:

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

Proto když se zobrazí , jsou předem vybrány druhé, čtvrté a páté položky CollectionView v seznamu:

s vícenásobným výběrem Snímek obrazovky se svislým seznamem CollectionView s několika předvolbyv iOSu a AndroiduSvislý seznam Zobrazení s několika předvolby

Vymazání výběrů

Vlastnosti Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">a Xamarin_Forms SelectedItemSelectedItem _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItemsnull je možné vymazat jejich nastavením nebo objekty, ke kterým se vážou, na hodnotu .

Změna barvy vybrané položky

CollectionViewSelectedVisualState , který lze použít k zahájení změny vizuálu na vybranou položku v CollectionView objektu . Běžným případem použití je změna barvy pozadí vybrané položky, což je znázorněno VisualState v následujícím příkladu 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>

Důležité

Objekt , který obsahuje , musí mít StyleSelectedVisualState Xamarin_Forms Style _Style_TargetType" data-linktype="absolute-path">TargetTypeDataTemplateItemTemplate hodnota vlastnosti, která je typem kořenového prvku objektu , který je nastaven jako hodnota vlastnosti.

V tomto příkladu je hodnota vlastnosti Xamarin_Forms _Style_TargetType" data-linktype="absolute-path">nastavená na , protože kořenový Style.TargetType prvek Xamarin_Forms GridStyle.TargetType _ItemsView_ItemTemplate" data-linktype="absolute-path">ItemTemplate je Grid . Určuje, že při výběru položky v objektu se SelectedVisualStateCollectionView Xamarin_Forms Selected _VisualElement_BackgroundColor" data-linktype="absolute-path">BackgroundColor položky LightSkyBlue nastaví na :

s vlastní barvou s jedním výběrem Snímek obrazovky se svislým seznamem CollectionView s vlastní barvou s jedním výběremv iOSua AndroiduSvislý seznam s vlastní barvou jednoho

Další informace o stavech vizuálů najdete v tématu Xamarin.Forms Visual State Manager .

Zakázání výběru

CollectionView Výběr je ve výchozím nastavení zakázaný. Pokud má ale objekt povolený výběr, můžete ho zakázat nastavením vlastnosti CollectionView Xamarin_Forms CollectionView _SelectableItemsView_SelectionMode" data-linktype="absolute-path">SelectionMode na None :

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

Ekvivalentní kód jazyka C# je:

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

Pokud je vlastnost Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">nastavená na , položky v objektu nelze vybrat, vlastnost SelectionModeNone Xamarin_Forms CollectionViewSelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItemnullSelectionChanged zůstane a událost nebude aktivována.

Poznámka

Když je vybraná položka a vlastnost Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">se změní z na , vlastnost SelectionModeSingleNone Xamarin_Forms SelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItemnullSelectionChangedCurrentSelection se nastaví na a událost se bude aktivovat s prázdnou vlastností.