Xamarin.Forms CollectionView Seçimi

  • Makale

Download Sample Örneği indirme

CollectionView , öğe seçimini denetleen aşağıdaki özellikleri tanımlar:

  • SelectionMode, türündeki SelectionModeseçim modu.
  • SelectedItem, türündeki objectlistede seçili öğedir. Bu özellik varsayılan bağlama moduna TwoWaysahiptir ve hiçbir öğe seçilmediğinde bir null değere sahiptir.
  • SelectedItems, türündeki IList<object>, listedeki seçili öğelerdir. Bu özelliğin OneWayvarsayılan bağlama modu vardır ve hiçbir öğe seçilmediğinde bir null değere sahiptir.
  • SelectionChangedCommand, türündeki ICommandseçili öğe değiştiğinde yürütülür.
  • SelectionChangedCommandParameter, türündeki objectparametresine SelectionChangedCommandgeçirilir.

Bu özelliklerin tümü nesneler tarafından BindableProperty desteklenir, bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.

Varsayılan olarak, CollectionView seçim devre dışıdır. Ancak, özellik değeri numaralandırma üyelerinden SelectionMode birine ayarlanarak SelectionMode bu davranış değiştirilebilir:

  • None – öğelerin seçilemeyeceğini gösterir. Bu varsayılan değerdir.
  • Single – seçili öğe vurgulanmış olarak tek bir öğenin seçilebileceğini gösterir.
  • Multiple – seçili öğelerin vurgulandığı birden çok öğenin seçilebileceğini gösterir.

CollectionView , kullanıcının listeden bir öğe seçmesi veya bir SelectionChanged uygulamanın özelliği ayarlaması nedeniyle özellik değiştiğinde tetiklenen SelectedItem bir olayı tanımlar. Ayrıca, özellik değiştiğinde SelectedItems bu olay da tetiklenir. Olaya SelectionChangedEventArgs eşlik eden nesnenin SelectionChanged iki IReadOnlyList<object>özelliği vardır:

  • PreviousSelection – seçim değiştirilmeden önce seçilen öğelerin listesi.
  • CurrentSelection – seçim değişikliğinden sonra seçilen öğelerin listesi.

Ayrıca, CollectionView yalnızca tek bir UpdateSelectedItems değişiklik bildirimi tetiklerken SelectedItems özelliği seçili öğelerin listesiyle güncelleştiren bir yöntemi vardır.

Tek seçim

SelectionMode özelliği olarak Singleayarlandığında içindeki tek bir öğe CollectionView seçilebilir. Bir öğe seçildiğinde, SelectedItem özellik seçili öğenin değerine ayarlanır. Bu özellik değiştiğinde SelectionChangedCommand , yürütülür (geçirilen değerinin SelectionChangedCommandParameterICommanddeğeriyle) ve SelectionChanged olay tetiklenir.

Aşağıdaki XAML örneği, tek öğe seçimine yanıt verebilen bir CollectionView öğesini gösterir:

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

Eşdeğer C# kodu:

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

Bu kod örneğinde OnCollectionViewSelectionChanged , olay işleyicisi olay tetiklendiğinde SelectionChanged yürütülür ve olay işleyicisi önceden seçili olan öğeyi ve geçerli seçili öğeyi alır:

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

Önemli

Olay SelectionChanged , özelliğin değiştirilmesi SelectionMode sonucu oluşan değişiklikler tarafından tetiklenebilir.

Aşağıdaki ekran görüntüleri bir CollectionViewiçindeki tek öğe seçimini gösterir:

Screenshot of a CollectionView vertical list with single selection, on iOS and Android

Birden çok seçim

SelectionMode özelliği olarak Multipleayarlandığında içindeki CollectionView birden çok öğe seçilebilir. Öğeler seçildiğinde, SelectedItems özellik seçili öğelere ayarlanır. Bu özellik değiştiğinde SelectionChangedCommand , yürütülür (geçirilen değerinin SelectionChangedCommandParameterICommanddeğeriyle) ve SelectionChanged olay tetiklenir.

Aşağıdaki XAML örneği, birden çok öğe seçimine yanıt verebilen bir CollectionView öğesini gösterir:

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

Eşdeğer C# kodu:

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

Bu kod örneğinde OnCollectionViewSelectionChanged , olay işleyicisi olay tetiklendiğinde SelectionChanged yürütülür ve olay işleyicisi önceden seçili öğeleri ve geçerli seçili öğeleri alırken:

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

Önemli

Olay SelectionChanged , özelliğin değiştirilmesi SelectionMode sonucu oluşan değişiklikler tarafından tetiklenebilir.

Aşağıdaki ekran görüntüleri, içinde CollectionViewbirden çok öğe seçimini gösterir:

Screenshot of a CollectionView vertical list with multiple selection, on iOS and Android

Tek bir ön seçim

SelectionMode özelliği olarak ayarlandığında, özelliği öğe olarak Singleayarlanarak SelectedItem içindeki CollectionView tek bir öğe önceden seçilebilir. Aşağıdaki XAML örneği, tek bir CollectionView öğeyi önceden seçen bir örneği gösterir:

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

Eşdeğer C# kodu:

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

Not

özelliği varsayılan SelectedItem bağlama moduna TwoWaysahiptir.

Özellik SelectedItem verileri, türündeki SelectedMonkeyMonkeybağlı görünüm modelinin özelliğine bağlanır. Varsayılan olarak, kullanıcı seçili öğeyi değiştirirse özelliğin SelectedMonkey değeri seçili Monkey nesneye ayarlanacak şekilde bir TwoWay bağlama kullanılır. SelectedMonkey özelliği sınıfında tanımlanır MonkeysViewModel ve koleksiyonun dördüncü öğesine Monkeys ayarlanır:

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

Bu nedenle, görüntülendiğinde CollectionView listedeki dördüncü öğe önceden seçilir:

Screenshot of a CollectionView vertical list with single pre-selection, on iOS and Android

Çoklu ön seçim

SelectionMode özelliği olarak Multipleayarlandığında içindeki CollectionView birden çok öğe önceden seçilebilir. Aşağıdaki XAML örneği, birden çok öğenin önceden seçilmesini etkinleştirecek bir CollectionView öğesini gösterir:

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

Eşdeğer C# kodu:

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

Not

özelliği varsayılan SelectedItems bağlama moduna OneWaysahiptir.

Özellik SelectedItems verileri, türündeki SelectedMonkeysObservableCollection<object>bağlı görünüm modelinin özelliğine bağlanır. SelectedMonkeys özelliği sınıfında tanımlanır ve koleksiyondaki MonkeysViewModel ikinci, dördüncü ve beşinci öğelere Monkeys ayarlanır:

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

Bu nedenle, gösterildiğinde CollectionView listedeki ikinci, dördüncü ve beşinci öğeler önceden seçilir:

Screenshot of a CollectionView vertical list with multiple pre-selection, on iOS and Android

Seçimleri temizle

SelectedItem ve SelectedItems özellikleri, olarak ayarlanarak veya bağlandıkları nullnesnelerle temizlenebilir.

Seçili öğe rengini değiştirme

CollectionViewiçinde seçili öğede CollectionViewgörsel bir değişiklik başlatmak için kullanılabilecek bir SelectedVisualState öğesine sahiptir. Bunun VisualState yaygın kullanım örneklerinden biri, aşağıdaki XAML örneğinde gösterilen seçili öğenin arka plan rengini değiştirmektir:

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

Önemli

Style öğesini içerenVisualStateSelectedöğesinin, özellik değeri olarak ItemTemplate ayarlanan kök öğesinin DataTemplatetürü olan bir TargetType özellik değerine sahip olması gerekir.

Bu örnekte, öğesinin Style.TargetType kök öğesi ItemTemplate bir Gridolduğundan özellik değeri olarak ayarlanırGrid. öğesindeki SelectedVisualStateCollectionView bir öğe seçildiğinde öğesinin BackgroundColor olarak ayarlandığını LightSkyBluebelirtir:

Screenshot of a CollectionView vertical list with a custom single selection color, on iOS and Android

Görsel durumlar hakkında daha fazla bilgi için bkz Xamarin.Forms . Visual State Manager.

Seçimi devre dışı bırakma

CollectionView seçimi varsayılan olarak devre dışıdır. Ancak, bir CollectionView seçim etkinse, özelliği Noneolarak ayarlanarak SelectionMode devre dışı bırakılabilir:

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

Eşdeğer C# kodu:

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

SelectionMode özelliği olarak Noneayarlandığında içindeki CollectionView öğeler seçilemez, SelectedItem özelliği kalır nullve SelectionChanged olay tetiklenmez.

Not

Bir öğe seçildiğinde ve SelectionMode özelliği olarak NoneSelectedItemSingle değiştirildiğinde özelliği olarak ayarlanır null ve SelectionChanged olay boş CurrentSelection bir özellikle tetiklenir.