Listanézet és rácsnézet

A legtöbb alkalmazás manipulálja és megjeleníti az adatkészleteket, például képgyűjteményt vagy e-mail-üzeneteket. Az XAML felhasználói felület keretrendszere ListView- és GridView-vezérlőket biztosít, amelyek megkönnyítik az adatok megjelenítését és módosítását az alkalmazásban.

Megjegyzés:

A ListView és a GridView egyaránt a ListViewBase osztályból származik, így ugyanazokkal a funkciókkal rendelkeznek, de másként jelenítik meg az adatokat. Ebben a cikkben listanézetről szóló vitafórumok vonatkoznak a ListView és a GridView vezérlőre is, kivéve, ha másként van megadva. Hivatkozhatunk olyan osztályokra, mint a ListView vagy a ListViewItem, de a Lista előtag lecserélhető a Grid -re a megfelelő grid egyenértékére (GridView vagy GridViewItem).

A ListView és a GridView vezérlők számos előnnyel járnak a gyűjtemények használata során. Mindkettő könnyen implementálható, és egyszerű felhasználói felületet, interakciót és görgetést biztosít, miközben könnyen testre szabható. Mindkettő köthető a meglévő dinamikus adatforrásokhoz, vagy az XAML-ben vagy a mögöttes kódban megadott, szigorúan kódolt adatokhoz.

Mindkét vezérlő rugalmasan használható különböző helyzetekben, de összességében olyan gyűjteményekkel működnek a legjobban, amelyekben minden elem ugyanazzal az alapszintű szerkezettel és megjelenéssel, valamint ugyanazzal az interakciós viselkedéssel rendelkezik. Vagyis mindegyiknek ugyanazt a műveletet kell végrehajtania a kattintáskor (például egy hivatkozás megnyitásához vagy tallózáshoz).

ListView és GridView összehasonlítása

Lista nézet

A ListView vezérlő egyetlen oszlopban függőlegesen halmozott adatokat jelenít meg. A ListView jobban működik a fókuszpontként szöveget tartalmazó elemeknél, valamint a felülről lefelé olvasható gyűjteményekhez (például betűrendben rendezve). A ListView néhány gyakori használati esete közé tartozik az üzenetek listája és a keresési eredmények. Ha több oszlopban vagy táblázatszerű formátumban kell megjelenítenie a gyűjteményeket, ne a ListView-t. Ehelyett érdemes lehet DataGrid vezérlőelemet használni.

Betűrendbe csoportosított adatok listanézetének képernyőképe.

Rácsnézet (GridView)

A GridView vezérlő a függőlegesen görgethető sorokban és oszlopokban lévő elemek gyűjteményét jeleníti meg. Az adatok vízszintesen halmozva lesznek, amíg ki nem töltik az oszlopot, majd az oszlop következő sorával folytatódnak. A GridView jobban működik azon gyűjtemények esetében, amelyek fókuszpontjaként képeket tartalmaz, vagy amelyek elemei egymás mellett olvashatók, vagy nem rendezhetők egy adott sorrendben. A GridView gyakori használati esete egy fénykép- vagy termékkatalógus.

Képernyőkép a rácsnézetként megjelenített fényképek tartalomtáráról.

Melyik gyűjteményvezérlőt érdemes használnia? Összehasonlítás az ItemsRepeaterrel

Fontos tisztában lenni az ilyen típusú vezérlők közötti különbségekkel, mielőtt eldöntené, melyiket használja.

ListaNézet és RácsNézet

A funkciógazdag ListView és GridView vezérlők kívül működnek. Nem igényelnek testreszabást, de könnyen testre szabhatók. Mindegyik saját beépített felhasználói felülettel és UX-val rendelkezik, és úgy van kialakítva, hogy szinte bármilyen gyűjteménytípust megjelenítsen.

ItemsRepeater

A ItemsRepeater vezérlő gyűjtemények megjelenítésére is használható, de építőelemként lett kialakítva, hogy egyéni vezérlőt hozzon létre az adott felhasználói felületi követelményeknek megfelelően. Nem ugyanazokkal a beépített funkciókkal és funkciókkal rendelkezik, mint a ListView és a GridView, ezért minden szükséges funkciót vagy interakciót végre kell hajtania. Az ItemsRepeatert akkor használja, ha olyan, nagy mértékben testre szabott felhasználói felülettel rendelkezik, amelyet nem tud létrehozni a ListView vagy a GridView használatával, vagy ha az adatforrás különböző viselkedést igényel az egyes elemekhez.

Olvasd el az ItemsRepeater irányelveit és API dokumentációjáta részletesebb megismeréshez.

Listanézet vagy rácsnézet létrehozása

Fontos API-k: ListView osztály, GridView osztály, ItemsSource tulajdonság, Items tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a ListView vagy a GridView működés közben.

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A ListView és a GridView egyaránt ItemsControl típusok, így bármilyen típusú elemgyűjteményt tartalmazhatnak. A ListView- vagy GridView-vezérlőknek a Elemek gyűjteményében kell lenniük, mielőtt bármit megjeleníthetnek a képernyőn. A nézet feltöltéséhez közvetlenül a gyűjteményhez adhat hozzá elemeket, vagy az ItemsSource tulajdonságot adatforrásra állíthatja.

Caution

A lista feltöltéséhez használhatja az Items vagy az ItemsSource tulajdonságot, de mindkettőt nem használhatja egyszerre. Ha beállítja az ItemsSource tulajdonságot, és hozzáad egy elemet az XAML-ben, a rendszer figyelmen kívül hagyja a hozzáadott elemet. Ha beállítja az ItemsSource tulajdonságot, és kódban ad hozzá egy elemet az Elemek gyűjteményhez, a rendszer kivételt jelez.

A cikkben szereplő példák közül sok közvetlenül az egyszerűség kedvéért tölti fel az Elemek gyűjteményt. Azonban gyakoribb, hogy a lista elemei dinamikus forrásból származnak, például egy online adatbázisból származó könyvek listájából. Ehhez az ItemsSource tulajdonságot használja.

Elemek hozzáadása ListView- vagy GridView-vezérlőhöz

A ListView vagy GridView Elemek gyűjteménybe XAML vagy kód használatával elemeket is felvehet, hogy ugyanazt az eredményt érje el. Általában az XAML-en keresztül adhat hozzá elemeket, ha kevés olyan elem van, amely nem változik, és könnyen definiálható, vagy ha futásidőben hozza létre az elemeket a kódban.

1. módszer: Elemek hozzáadása az Elemek gyűjteményhez

1. lehetőség: Elemek hozzáadása az XAML-ben

<!-- No corresponding C# code is needed for this example. -->

<ListView x:Name="Fruits">
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>

2. lehetőség: Elemek hozzáadása kóddal

<StackPanel Name="FruitsPanel"></StackPanel>

// Create a new ListView and add content.
ListView Fruits = new ListView();
Fruits.Items.Add("Apricot");
Fruits.Items.Add("Banana");
Fruits.Items.Add("Cherry");
Fruits.Items.Add("Orange");
Fruits.Items.Add("Strawberry");

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits);

Mindkét beállítás ugyanazt a listanézetet hozza létre, ahogy az itt látható:

A gyümölcsök listáját megjelenítő egyszerű listanézet képernyőképe.

2. módszer: Elemek hozzáadása az ItemsSource tulajdonság beállításával

Általában egy ListView vagy GridView használatával jelenítene meg adatokat egy forrásból, például egy adatbázisból vagy az internetről. Ha egy ListView- vagy GridView-vezérlőt egy adatforrásból szeretne feltölteni, a ItemsSource tulajdonságát adatelemek gyűjteményére kell állítania. Ez a módszer akkor működik jobban, ha a ListView vagy a GridView egyéni osztályobjektumokat fog tárolni, ahogyan az alábbi példákban is látható.

1. lehetőség: ItemsSource beállítása kódban

Itt a ListView ItemsSource tulajdonság kódban van beállítva közvetlenül egy gyűjtemény egy példányára.

<StackPanel x:Name="ContactPanel"></StackPanel>

// Class definition should be provided within the namespace being used, outside of any other classes.

this.InitializeComponent();

// Instead of adding hard coded items to an ObservableCollection as shown here,
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// You create Contact objects by providing a first name, last name, and company for the Contact constructor.
// They are then added to the ObservableCollection Contacts.
Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));

// Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
ListView ContactsLV = new ListView();
ContactsLV.ItemsSource = Contacts;

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);

2. lehetőség: ItemsSource beállítása az XAML-ben

Az ItemsSource tulajdonságot az XAML gyűjteményéhez is kötheti. Itt az ItemsSource egy Névjegyek nevű nyilvános tulajdonsághoz van kötve, amely elérhetővé teszi a lap _contactsnevű privát adatgyűjtését.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>

// Provide a class definition within the namespace being used, outside of any other classes.
// These two declarations belong outside the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return this._contacts; }
}

// Define this method within your main page class.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Instead of hard coded items, the data could be pulled
    // asynchronously from a database or the internet.
    Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
    Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
    Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
}

Mindkét beállítás ugyanazt a listanézetet hozza létre, mint az alábbi képernyőképen. (A listanézet az egyes elemek sztring-ábrázolását jeleníti meg, mivel ehhez a gyakorlathoz nincs adatsablon definiálva.)

Képernyőkép egy egyszerű listanézetről az ItemsSource tulajdonságkészlettel.

Fontos

Definiált adatsablon nélkül az egyéni osztályobjektumok csak akkor jelennek meg a listanézetben a sztringértékükkel, ha meghatározott ToString metódussal rendelkeznek.

A következő szakasz részletesebben ismerteti, hogyan jelenítheti meg megfelelően az egyszerű és egyéni osztályelemeket egy ListView- vagy GridView-sablonban.

Az adatkötésről további információt az Adatkötés áttekintése című témakörben talál.

Megjegyzés:

Ha csoportosított adatokat kell megjelenítenie a listanézetben, egy CollectionViewSource osztályhoz kell kötnie. A CollectionViewSource proxyként működik az XAML gyűjteményosztályához, és lehetővé teszi a csoportosítás támogatását. További információ: CollectionViewSource.

Megjelenés testreszabása adatsablonnal

Ha egy ListView- vagy GridView-vezérlőben adatsablont használ, meghatározhatja az elemek és adatok vizualizációjának módját. Alapértelmezés szerint egy adatelem jelenik meg a listanézetben annak az adatobjektumnak a sztringképeként, amelyhez hozzá van kötve. Az adatelem egy adott tulajdonságának szöveges megjelenítését úgy jelenítheti meg, hogy DisplayMemberPath a megfelelő tulajdonságra állítja.

Előfordulhat azonban, hogy általában az adatok részletesebb bemutatását szeretné megjeleníteni. Ha meg szeretné adni, hogyan jelenjenek meg a listanézetben vagy a rácsnézetben lévő elemek, hozzon létre egy DataTemplate osztályt. A DataTemplate XAML-je határozza meg az egyes elemek megjelenítéséhez használt vezérlők elrendezését és megjelenését. Az elrendezés vezérlői egy adatobjektum tulajdonságaihoz köthetők, vagy lehetnek beágyazottan definiált statikus tartalommal.

Fontos

Ha a x:Bind markup bővítményt használja a DataTemplate-ben, meg kell adnia az adattípust (x:DataType) az adatsablonon.

Egyszerű ListView-adatsablon

Ebben a példában az adatelem egy egyszerű sztring. Ha képet szeretne hozzáadni a sztring bal oldalához, és a sztringet tealban szeretné megjeleníteni, a DataTemplate-et a ListView-definíción belül kell definiálnia. Ez ugyanaz a ListView-vezérlő, amelyet korábban az 1. módszer 1. lehetőségével hozott létre.

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Az adatelemek így jelennek meg egy egyszerű ListView-adatsablon alkalmazásakor:

Képernyőkép egy egyszerű ListView-adatsablon alkalmazása után megjelenő listáról.

ListView-adatsablon egyéni osztályobjektumokhoz

Az alábbi példában az adatelem egy Kapcsolat objektum. Ha a partnerképet a partnernév és a vállalat bal oldalán szeretné hozzáadni, a DataTemplate-et a ListView definíciójában kell definiálnia. Ez a ListView-adatsablon a 2. módszer 2. lehetőségében lett létrehozva, ahogy azt korábban is láthattuk.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Az adatelemek így jelennek meg, amikor ListView-adatsablont alkalmaz egyéni osztályobjektumokhoz:

Az egyéni osztályobjektumok ListView-adatsablonjának alkalmazása után megjelenő lista képernyőképe.

Az adatsablonok határozzák meg elsődlegesen a ListView megjelenését. Jelentős hatással lehetnek a teljesítményre is, ha a lista nagy számú elemet tartalmaz.

Az adatsablont a ListView vagy a GridView definíción belül, az előző kódban látható módon, vagy külön is definiálhatja az Erőforrások szakaszban. Ha a ListView vagy a GridView definíción kívül definiálja, az adatsablonnak egy x:Key attribútumot kell megadnia, és a kulcs használatával hozzá kell rendelnie azt a ListView vagy GridView ItemTemplate tulajdonságához.

További információkért és példákért arra, hogyan használhatók az adatsablonok és az elemtárolók a lista vagy a rács elemeinek megjelenésének meghatározására, lásd: Elemtárolók és sablonok.

Elemek elrendezésének módosítása

Amikor elemeket ad hozzá egy ListView- vagy GridView-vezérlőhöz, az automatikusan körbefuttat minden elemet egy elemtárolóban, majd az összes elemtárolót elrendezi. Az elemek tárolóinak beállítása a vezérlő ItemsPanel tulajdonságától függ.

ListViewalapértelmezés szerint ItemsStackPanelhasznál, amely függőleges listát hoz létre:
GridViewItemsWrapGridhasznál, amely vízszintesen adja hozzá az elemeket, és függőlegesen körbefuttat és görget:

Az elemek elrendezését módosíthatja az elemek panel tulajdonságainak módosításával, vagy lecserélheti az alapértelmezett panelt egy másik panelre.

Megjegyzés:

Ha módosítja az ItemsPanelt, ne tiltsa le a virtualizálást. Az ItemsStackPanel és az ItemsWrapGrid is támogatja a virtualizálást, ezért ezek az osztályok biztonságosan használhatók. Ha bármilyen más panelt használ, letilthatja a virtualizálást, és lelassíthatja a listanézet teljesítményét. További információt a Teljesítménycímű témakör listanézeti cikkeiben talál.

Ez a példa bemutatja, hogyan helyezheti el egy ListView-vezérlő elemtárolóit egy vízszintes listában az ItemsStackPanel Tájolás tulajdonságának módosításával.

Mivel a listanézet alapértelmezés szerint függőlegesen görget, módosítania kell a listanézet belső ScrollViewer egyes tulajdonságait is, hogy vízszintesen görgethető legyen.

Módosítsa a ScrollViewer.HorizontalScrollMode értékét Bekapcsolva vagy Automatikusértékre.
Módosítsa ScrollViewer.HorizontalScrollBarVisibility-ről Auto-ra.
Az ScrollViewer.VerticalScrollMode módosítása letiltott állapotra.
ScrollViewer.VerticalScrollBarVisibility módosítása rejtett .

Fontos

Az alábbi példákat a listanézet szélessége nem korlátozza, így a vízszintes görgetősávok nem jelennek meg. Ha futtatja ezt a kódot, beállíthatja a Width="180" értéket a ListView-nál a görgetősávok megjelenítéséhez.

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

A lista a következőképpen jelenik meg:

Vízszintes listanézet képernyőképe.

A következő példában a ListView függőleges, sorba ötvözött listában helyezi el az elemeket, az ItemsStackPanel helyett az ItemsWrapGrid felhasználásával.

Fontos

A listanézet magasságának korlátozásával kényszerítheti a vezérlőt a tárolók burkolására.

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

A lista a következőképpen jelenik meg:

Rácsos elrendezésű listanézet képernyőképe.

Ha csoportosított adatokat jelenít meg a listanézetben, az ItemsPanel határozza meg az elemcsoportok lefektetési módját, nem pedig az egyes elemek beállítását. Ha például a korábban látható vízszintes ItemsStackPanelt használja a csoportosított adatok megjelenítéséhez, a csoportok vízszintesen vannak elrendezve, de az egyes csoportok elemei függőlegesen vannak halmozva, ahogy az itt látható:

Csoportosított vízszintes listanézet képernyőképe. .

Elem kijelölése és interakciója

Többféleképpen is engedélyezheti a felhasználók számára a listanézetek közötti interakciót. A felhasználók alapértelmezés szerint egyetlen elemet választhatnak ki. Módosíthatja a SelectionMode tulajdonságot a többszörös kijelölés engedélyezéséhez vagy a kijelölés letiltásához. Beállíthatja az IsItemClickEnabled tulajdonságot, hogy a felhasználók az elem kijelölése helyett egy elemre (például egy gombra) kattintva hívjanak meg egy műveletet.

Megjegyzés:

A ListView és a GridView is a ListViewSelectionMode enumerálást használja a saját SelectionMode tulajdonságaikhoz. Az IsItemClickEnabled alapértelmezés szerint False értékre van beállítva, ezért csak a kattintási mód engedélyezéséhez kell beállítania.

Ez a táblázat azt mutatja be, hogyan használhatja a felhasználó a listanézeteket, és hogyan reagálhat az interakcióra.

Az interakció engedélyezése:	Használja az alábbi beállításokat:	Az esemény kezelése:	A kijelölt elem lekéréséhez használja ezt a tulajdonságot:
Nincs interakció	SelectionMode="Nincs" IsItemClickEnabled="Hamis"	N/A	N/A
Egyszeri kijelölés	SelectionMode="Egyszeri" IsItemClickEnabled="Hamis"	KiválasztásVáltozott	KiválasztottElem KiválasztottIndex
Több kijelölés	SelectionMode="Többszörös" IsItemClickEnabled="Hamis"	KiválasztásVáltozott	KiválasztottElemek
Bővített kijelölés	KiválasztásiMód="Kiterjesztett" IsItemClickEnabled="Hamis"	KiválasztásVáltozott	KiválasztottElemek
Kattints	SelectionMode="Nincs" IsItemClickEngedélyezve="Igaz"	ElemKattintás	N/A

Megjegyzés:

Az IsItemClickEnabled engedélyezésével egy ItemClick-eseményt indíthat el, miközben a SelectionMode is be van állítva az egyszeri , a többszöri vagy a kiterjesztett módokra. Ha ezt teszi, a Rendszer először az ItemClick eseményt, majd a SelectionChanged eseményt emeli ki. Bizonyos esetekben (például ha az ItemClick eseménykezelő egy másik lapjára lép), a SelectionChanged esemény nem lesz emelve, és az elem nincs kijelölve.

Ezeket a tulajdonságokat XAML-ben vagy kódban is beállíthatja, az itt látható módon:

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>

myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Read-only

A SelectionMode tulajdonságot beállíthatja úgy, hogy ListViewSelectionMode.None az elemek kijelölésének letiltásához. A vezérlőt csak olvasható módba helyezi, így csak az adatok megjelenítésére szolgál, de nem azok interakciójához. Ez azt jelzi, hogy az elem kijelölése le van tiltva, de maga a vezérlő nem.

Egyszeri kijelölés

Ez a táblázat a billentyűzet, az egér és az érintés interakcióit ismerteti, amikor a SelectionMode Singleértékre van állítva.

Módosító kulcs	Kölcsönhatás
None	A felhasználók egyetlen elemet jelölhetnek ki a szóközök, egérkattintások vagy koppintások használatával.
Ctrl	A felhasználók a szóköz, egérkattintás vagy koppintás használatával törölhetik egyetlen elem kijelölését. A nyílbillentyűkkel a felhasználók a kijelöléssel függetlenül áthelyezhetik a fókuszt.

Ha a SelectionMode Singleértékre van állítva, a kijelölt adatelemet lekérheti a SelectedItem tulajdonságból. Az indexet a kijelölt elem gyűjteményében a SelectedIndex tulajdonság használatával szerezheti be. Ha nincs kijelölve elem, a SelectedItem értéke null , a SelectedIndex értéke pedig -1.

Ha olyan elemet próbál beállítani, amely nem szerepel az Elemek gyűjteményben SelectedItemként, a művelet figyelmen kívül lesz hagyva, és a SelectedItem null. Ha azonban a SelectedIndexet egy olyan indexre próbálja beállítani, amely a lista elemeinek tartományán kívül esik, a System.ArgumentException kivétel lép fel.

Több kijelölés

Ez a táblázat a billentyűzet, az egér és az érintés interakcióit ismerteti, amikor a SelectionMode Többszörösértékre van beállítva.

Módosító kulcs	Kölcsönhatás
None	A felhasználók több elemet is kijelölhetnek a szóköz, egérkattintás vagy koppintás használatával a fókuszált elem kiválasztásához. A nyílbillentyűkkel a felhasználók a kijelölésükhöz függetlenül áthelyezhetik a fókuszt.
Műszak	A felhasználók több összefüggő elemet is kijelölhetnek, ha a kijelölés első elemére kattintanak vagy koppintanak, majd a kijelölés utolsó elemére kattintanak vagy koppintanak. A nyílbillentyűk használatával a felhasználók a Shift billentyű kiválasztásakor kijelölt elemtől kezdve egymás mellett lévő elemeket jelölhetnek ki.

Bővített kijelölés

Ez a táblázat a billentyűzet, az egér és az érintés interakcióit ismerteti, amikor a SelectionMode Extendedértékre van állítva.

Módosító kulcs	Kölcsönhatás
None	A viselkedés ugyanaz, mint egyetlen kijelölés.
Ctrl	A felhasználók több elemet is kijelölhetnek a szóköz, egérkattintás vagy koppintás használatával a fókuszált elem kiválasztásához. A nyílbillentyűkkel a felhasználók a kijelöléssel függetlenül áthelyezhetik a fókuszt.
Műszak	A felhasználók több összefüggő elemet is kijelölhetnek, ha a kijelölés első elemére kattintanak vagy koppintanak, majd a kijelölés utolsó elemére kattintanak vagy koppintanak. A nyílbillentyűk használatával a felhasználók a Shift billentyű kiválasztásakor kijelölt elemtől kezdve egymás mellett lévő elemeket jelölhetnek ki.

Amikor a SelectionMode Multiple vagy Bővítettértékre van beállítva, a kijelölt adatelemeket a SelectedItems tulajdonságból szerezheti be.

A Rendszer szinkronizálja a SelectedIndex, a SelectedItem és a SelectedItems tulajdonságot. Ha például a SelectedIndexet -1 értékre állítja, a SelectedItem értéke null, a SelectedItem pedig üres. Ha pedig a SelectedItem értéke null, akkor a SelectedIndex értéke -1, a SelectedItems pedig üres.

Többválasztós módban a SelectedItem az elsőként kijelölt elemet, a Selectedindex pedig az elsőként kiválasztott elem indexét tartalmazza.

Válasz a kijelölés változásaira

Ha egy listanézetben szeretne válaszolni a kijelölési változásokra, kezelje a SelectionChanged eseményt. Az eseménykezelő kódban lekérheti a kijelölt elemek listáját a SelectionChangedEventArgs.AddedItems tulajdonságból. Az SelectionChangedEventArgs.RemovedItems tulajdonságból törölt elemeket is lekérheti. Az AddedItems és a RemovedItems gyűjtemény legfeljebb egy elemet tartalmaz, kivéve, ha a felhasználók a Shift billentyűt lenyomva tartva jelölnek ki egy elemtartományt.

Az alábbi példa bemutatja, hogyan kezelheti a SelectionChanged eseményt, és hogyan férhet hozzá a különféle elemgyűjteményekhez:

<StackPanel HorizontalAlignment="Right">
    <ListView x:Name="listView1" SelectionMode="Multiple"
              SelectionChanged="ListView1_SelectionChanged">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
    <TextBlock x:Name="selectedItem"/>
    <TextBlock x:Name="selectedIndex"/>
    <TextBlock x:Name="selectedItemCount"/>
    <TextBlock x:Name="addedItems"/>
    <TextBlock x:Name="removedItems"/>
</StackPanel>

private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listView1.SelectedItem != null)
    {
        selectedItem.Text =
            "Selected item: " + listView1.SelectedItem.ToString();
    }
    else
    {
        selectedItem.Text =
            "Selected item: null";
    }
    selectedIndex.Text =
        "Selected index: " + listView1.SelectedIndex.ToString();
    selectedItemCount.Text =
        "Items selected: " + listView1.SelectedItems.Count.ToString();
    addedItems.Text =
        "Added: " + e.AddedItems.Count.ToString();
    removedItems.Text =
        "Removed: " + e.RemovedItems.Count.ToString();
}

Kattintási mód

Módosíthatja a listanézetet, hogy a felhasználók a kijelölés helyett a gombokra és más elemekre kattintanak. Ez például akkor hasznos, ha az alkalmazás új lapot nyit meg, amikor a felhasználók egy listában vagy rácson lévő elemre kattintanak.

A viselkedés engedélyezéséhez:

Állítsa a SelectionMode-ot Nincsértékre.
Állítsa az IsItemClickEnabled értéket igaz.
Kezelje az ItemClick eseményt, hogy tegyen valamit, amikor a felhasználók egy elemre kattintanak.

Íme egy listanézet, amely a kattintható elemeket tartalmazza. Az ItemClick eseménykezelőben lévő kód új lapot nyit meg az alkalmazásban.

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
    <x:String>Page 1</x:String>
    <x:String>Page 2</x:String>
    <x:String>Page 3</x:String>
    <x:String>Page 4</x:String>
    <x:String>Page 5</x:String>
</ListView>

private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
    switch (e.ClickedItem.ToString())
    {
        case "Page 1":
            this.Frame.Navigate(typeof(Page1));
            break;

        case "Page 2":
            this.Frame.Navigate(typeof(Page2));
            break;

        case "Page 3":
            this.Frame.Navigate(typeof(Page3));
            break;

        case "Page 4":
            this.Frame.Navigate(typeof(Page4));
            break;

        case "Page 5":
            this.Frame.Navigate(typeof(Page5));
            break;

        default:
            break;
    }
}

Elemtartomány kiválasztása programozott módon

Előfordulhat, hogy programozott módon kell módosítania egy ListView-elem kijelölését. Megjeleníthet például egy Az összes kijelölése gombot, hogy a felhasználók kijelölhessenek egy listában szereplő összes elemet. Ebben az esetben általában nem túl hatékony elemeket hozzáadni és eltávolítani a SelectedItems gyűjteményből egyenként. Minden elemváltozás egy SelectionChanged eseményt okoz, és ha közvetlenül dolgozik az elemekkel az indexértékek használata helyett, az elem megszűnik virtualizált lenni.

Hatékonyabb a SelectAll, SelectRangeés DeselectRange metódusok használata a kijelölés módosításához, mint a SelectedItems tulajdonság használata. Ezek a metódusok elemindextartományok használatával választják ki (vagy törlik) az elemek kijelölését. A virtualizált elemek továbbra is virtualizáltak maradnak, mivel csak az indexet használják. A megadott tartomány minden eleme ki van jelölve (vagy nincs kijelölve), függetlenül az eredeti kijelölési állapottól. A SelectionChanged esemény csak egyszer fordul elő a metódusok minden egyes hívásához.

Fontos

Ezeket a metódusokat csak akkor hívhatja meg, ha a SelectionMode tulajdonság Többszörös vagy Kiterjesztettmódra van beállítva. Ha a SelectRange-et hívja meg, amikor a Kijelölési mód Egyes vagy Nincs, akkor kivétel lesz.

Ha indextartományok használatával jelöl ki elemeket, a SelectedRanges tulajdonság használatával lekérheti a lista összes kijelölt tartományát.

Ha az ItemsSource tulajdonság implementálja IItemsRangeInfo, és ezekkel a módszerekkel módosítja a kijelölést, az AddedItems és az RemovedItems tulajdonság nincs beállítva a SelectionChangedEventArgsben. Ezeknek a tulajdonságoknak a beállításához az elemobjektum virtualizálását kell megszüntetni. Az elemek lekéréséhez használja a SelectedRanges tulajdonságot.

A Gyűjtemény összes elemét a SelectAll metódus meghívásával választhatja ki. Az összes elem kijelölésének megszüntetésére azonban nincs megfelelő módszer. Az összes elem kijelölését megszüntetheti a DeselectRange meghívásával, amikor egy olyan ItemIndexRange objektumot ad meg, amelynek FirstIndex értéke 0, és a Hossz értéke egyenlő a gyűjtemény összes elemének számával. Ez az alábbi példában látható, valamint az összes elem kiválasztására szolgáló lehetőség.

<StackPanel Width="160">
    <Button Content="Select all" Click="SelectAllButton_Click"/>
    <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
    <ListView x:Name="listView1" SelectionMode="Multiple">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</StackPanel>

private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.SelectAll();
    }
}

private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
    }
}

A kijelölt elemek megjelenésének módosításáról további információt Elemtárolók és -sablonokcímű témakörben talál.

Fogd és vidd

A ListView és a GridView vezérlők támogatják az elemek húzását és ejtését a saját vezérlőiken belül, valamint egymás, és más ListView és GridView vezérlők között. A húzás és ejtés funkció implementálásáról további információt az Húzás és ejtéscímű témakörben talál.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-05

Megosztás a következőn keresztül:

Listanézet és rácsnézet

ListView és GridView összehasonlítása

Lista nézet

Rácsnézet (GridView)

Melyik gyűjteményvezérlőt érdemes használnia? Összehasonlítás az ItemsRepeaterrel

ListaNézet és RácsNézet

ItemsRepeater

Listanézet vagy rácsnézet létrehozása

Elemek hozzáadása ListView- vagy GridView-vezérlőhöz

Megjelenés testreszabása adatsablonnal

Egyszerű ListView-adatsablon

ListView-adatsablon egyéni osztályobjektumokhoz

Elemek elrendezésének módosítása

Elem kijelölése és interakciója

Read-only

Egyszeri kijelölés

Több kijelölés

Bővített kijelölés

Válasz a kijelölés változásaira

Kattintási mód

Elemtartomány kiválasztása programozott módon

Fogd és vidd

Kapcsolódó cikkek

Visszajelzés

További források