Xamarin.Forms CollectionView Seçimi

Örneği indirme

CollectionView öğe seçimini kontrol eden aşağıdaki özellikleri tanımlar:

• _SelectableItemsView_SelectionMode türü olan data-linktype="absolute-path">, SelectionModeSelectionMode seçim modu.
• Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItem , object türünde, listede seçili öğe. Bu özellik varsayılan bağlama moduna sahip TwoWay ve hiçbir öğe null seçilmeden bir değere sahip.
• Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItems , IList<object> türünde, listede seçili öğeler. Bu özellik varsayılan bağlama moduna sahip OneWay ve hiçbir öğe null seçilmeden bir değere sahip.
• Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">, türü seçili öğe değiştikten sonra SelectionChangedCommandICommand yürütülür.
• Xamarin_Forms _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">, türüne geçirilen SelectionChangedCommandParameterobjectSelectionChangedCommand parametredir.

Bu özelliklerin hepsi nesneler tarafından BindableProperty desteklenerek özelliklerin veri bağlamalarının hedefi olması anlamına gelir.

Varsayılan olarak seçim CollectionView devre dışıdır. Ancak bu davranış, Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özellik değeri numaralama üyelerinden biri olarak SelectionModeSelectionMode ayarlarak değiştirilebilir:

• None – öğelerin seçilenemlerini gösterir. Varsayılan değer budur.
• Single – seçilen öğe vurgulanmış şekilde tek bir öğenin seçil olduğunu gösterir.
• Multiple – seçili öğeler vurgulanmış şekilde birden çok öğenin seçil olduğunu gösterir.

CollectionView, kullanıcının listeden bir öğe seçmesi veya bir uygulama özelliği ayarladığı zaman Xamarin_Forms SelectionChangedCollectionView _SelectableItemsView_SelectedItem" data-linktype="absolute-path">özelliği değişirse, bir olay SelectedItem tanımlar. Buna ek olarak, bu olay Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">özelliği >SelectedItems de başlatıldı. Olayı SelectionChangedEventArgs eşlik eder nesnesinin iki özelliği SelectionChanged vardır, her ikisi de IReadOnlyList<object> türündedir:

• PreviousSelection – seçim değişmeden önce seçilen öğelerin listesi.
• CurrentSelection – seçim değiştikten sonra seçilen öğelerin listesi.

Ayrıca, yalnızca tek bir değişiklik bildirimini Xamarin_Forms CollectionViewUpdateSelectedItemsCollectionView _SelectableItemsView_SelectedItems" data-linktype="absolute-path">özelliğini SelectedItems seçilen öğelerin listesiyle güncelleştirmeye devam eden bir yöntemi vardır.

Tek seçim

Veri Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayarlanırsa, öğesinde tek SelectionMode bir öğe SingleCollectionView seçilebilir. Bir öğe seçildiğinde, Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">özelliği seçilen öğenin SelectedItem değerine ayarlanır. Bu özellik değişirse, Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">SelectionChangedCommand yürütülür (Xamarin_Forms SelectionChangedCommand _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">değeri SelectionChangedCommandParameterICommand ile) yürütülür ve olay SelectionChanged etkin olur.

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

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

Eşdeğer C# kodu şöyledir:

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

Bu kod örneğinde, olay çalıştırılan olay işleyicisi, olay işleyicisi daha önce seçilen öğeyi ve geçerli seçili öğeyi alarak OnCollectionViewSelectionChangedSelectionChanged yürütülür:

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

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

listesi Tek seçimli CollectionView dikey listesinin ekranve tek seçimli dikey liste

Birden çok seçim

Veri Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayarlanırsa, içinde SelectionMode birden çok öğe MultipleCollectionView seçilebilir. Öğeler seçildiğinde, Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">özelliği SelectedItems seçilen öğelere ayarlanır. Bu özellik değişirse, Xamarin_Forms _SelectableItemsView_SelectionChangedCommand" data-linktype="absolute-path">SelectionChangedCommand yürütülür (Xamarin_Forms SelectionChangedCommand _SelectableItemsView_SelectionChangedCommandParameter" data-linktype="absolute-path">değeri SelectionChangedCommandParameterICommand ile) yürütülür ve olay SelectionChanged etkin olur.

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

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

Eşdeğer C# kodu şöyledir:

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

Bu kod örneğinde, olay çalıştırılan olay işleyicisi, olay işleyicisi daha önce seçilen öğeleri ve geçerli OnCollectionViewSelectionChangedSelectionChanged seçili öğeleri alarak yürütülür:

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

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

dikey listesi Birden çok seçim içeren CollectionView dikey listesinin ekranve birden çok seçim içeren dikey liste

Tek ön seçim

Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayarlanırsa, öğesinde tek bir öğe Xamarin_Forms SelectionModeSingleCollectionViewSelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItem özelliği öğe olarak ayar tarafından önceden seçilebilir. Aşağıdaki XAML örneği, tek CollectionView bir öğeyi önceden seçen bir örneği gösterir:

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

Eşdeğer C# kodu şöyledir:

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

veri Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">özellik verileri, türünde olan bağlı görünüm SelectedItemSelectedMonkey modelinin özelliğine Monkey bağlanır. Varsayılan olarak, kullanıcı seçilen öğeyi değiştirirse özelliğin değeri seçilen nesneye TwoWaySelectedMonkey ayarilecek şekilde bir bağlama Monkey 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 CollectionView nedenle, öğesi göründüğünde, listede dördüncü öğe önceden seçilmiş olur:

dikey listesi Tek bir ön seçim ile CollectionView dikey listesinin ekranve Android'de dikey listesi Tek bir ön seçim ile dikey liste

Çoklu ön seçim

Veri Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayarlanırsa, içinde birden çok öğe SelectionModeMultipleCollectionView önceden seçilebilir. Aşağıdaki XAML örneği, birden CollectionView çok öğenin ön seçimini etkinleştirecek bir gösterir:

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

Eşdeğer C# kodu şöyledir:

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

veri Xamarin_Forms _SelectableItemsView_SelectedItems" data-linktype="absolute-path">özellik verileri, türünde olan bağlı görünüm SelectedItemsSelectedMonkeys modelinin özelliğine ObservableCollection<object> bağlanır. SelectedMonkeysözelliği sınıfında tanımlanır MonkeysViewModel ve koleksiyondaki ikinci, dördüncü ve beşinci öğeye 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 CollectionView nedenle, göründüğünde, listede ikinci, dördüncü ve beşinci öğe önceden seçilir:

olan CollectionView dikey listesi Birden çok ön seçimi olan CollectionView dikey listesinin ekranve dikey listesi ve birden çok ön seçim içeren dikey liste

Seçimleri temizleme

Xamarin_Forms _SelectableItemsView_SelectedItem" data-linktype="absolute-path">and SelectedItem Xamarin_Forms SelectedItem _SelectableItemsView_SelectedItems" data-linktype="absolute-path">SelectedItems özellikleri ayar null tarafından veya bağlanıldık nesneler olarak temiz olabilir.

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

CollectionView, SelectedVisualState içinde seçili öğeye bir görsel değişiklik başlatmak için CollectionView kullanılmaktadır. Bunun yaygın kullanım örneklerden biri, aşağıdaki XAML örneğinde gösterilen seçili öğenin arka VisualState 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>

Bu örnekte Xamarin_Forms _Style_TargetType" data-linktype="absolute-path">özellik değeri olarak ayarlanır çünkü Style.TargetTypeGrid Xamarin_Forms Style.TargetType _ItemsView_ItemTemplate" data-linktype="absolute-path">bir ItemTemplateGrid değeridir. öğesinde bir öğe seçildiğinde SelectedVisualStateCollectionView öğenin Xamarin_Forms Selected _VisualElement_BackgroundColor" data-linktype="absolute-path">BackgroundColor öğesinin olarak ayar olacağını LightSkyBlue belirtir:

sahip CollectionView dikey listesi iOS ve Android üzerinde Özel tek seçim rengine sahip CollectionView dikey listesinin ekran görüntüsüOs ve dikey listesi ve özel tek seçim rengi

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

Seçimi devre dışı bırakma

CollectionView seçimi varsayılan olarak devre dışıdır. Ancak, bir CollectionView seçimi etkinleştirilmişse, CollectionView Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayar >devre dışı SelectionMode bırakılabilir: None

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

Eşdeğer C# kodu şöyledir:

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

Xamarin_Forms _SelectableItemsView_SelectionMode" data-linktype="absolute-path">özelliği olarak ayarlanırsa, içinde öğeler seçilenemse, SelectionModeNoneCollectionView Xamarin_Forms SelectionMode _SelectableItemsView_SelectedItem" data-linktype="absolute-path">SelectedItemnullSelectionChanged özelliği kalır ve olay seçilmez.

İlgili bağlantılar

• CollectionView (örnek)
• Xamarin.Forms Visual State Manager