Elemek nézete

Elemnézet használatával megjelenítheti az adatelemek gyűjteményét, például egy albumban lévő fényképeket vagy egy termékkatalógus elemeit.

Az elemek nézet hasonló a listanézethez és a rácsnézet vezérlőihez, és a legtöbb esetben használhatja, ahol ezeket a vezérlőket használná. Az elemek nézetének egyik előnye, hogy menet közben is átválthat az elrendezésre, miközben megőrzi az elemkijelölést.

Az elemek nézetvezérlő az ItemsRepeater, ScrollView, az ItemContainer és az ItemCollectionTransitionProvider komponensek használatával készül, így egyedi módon biztosít lehetőséget egyéni elrendezések vagy ItemCollectionTransitionProvider implementációk integrálására. Az elemnézet belső ScrollView vezérlője lehetővé teszi az elemek görgetését és nagyítását. A listanézet és a rácsnézet által használt ScrollViewer vezérlőben nem elérhető funkciókat is kínál, például az animáció programozott görgetések közbeni vezérlését.

A listanézethez és a rácsnézet vezérlőihez hasonlóan az elemek nézete is használhat felhasználói felületet és adatvirtualizálást; billentyűzet, egér, toll és érintéses bevitel kezelése; beépített akadálymentességi támogatással rendelkezik.

Ez a megfelelő vezérlő?

Elemek nézet használata:

• Megjeleníthet egy gyűjteményt, amelyben az összes elemnek azonos vizualizációs és interakciós viselkedéssel kell rendelkeznie.
• Megjeleníthet egy tartalomgyűjteményt, amely képes a lista, a rács és az egyéni elrendezések közötti váltásra.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Storefront típusú felhasználói felület (például alkalmazások, dalok, termékek böngészése)
  • Interaktív fényképtárak
  • Partnerlista

Elemnézet létrehozása

• Fontos API-k: ItemsView osztály, ItemsSource tulajdonság, ItemTemplate tulajdonság, LinedFlowLayout, StackLayout, UniformGridLayout

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben az ItemsView nézetet

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.

Az ItemsView bármilyen típusú elemgyűjteményt jeleníthet meg. A nézet feltöltéséhez állítsa az ItemsSource tulajdonságot adatforrásra.

Megjegyzés:

A többi gyűjteményvezérlővel ellentétben (amelyek az ItemsControlból származnak) az ItemsView nem rendelkezik olyan Items tulajdonságkal, amelybe közvetlenül felvehet adatelemeket.

Az elemek forrásának beállítása

Általában egy elemnézet használatával jelenít meg adatokat egy forrásból, például egy adatbázisból vagy az internetről. Ha egy adatforrásból szeretne elemnézetet feltölteni, az ItemsSource tulajdonságát adatelem-gyűjteményre kell állítania.

ItemsSource beállítása kódban

Itt az ItemsSource kódban közvetlenül egy gyűjteménypéldányra van beállítva.

 // Data source.
 List<String> itemsList = new List<string>();
 itemsList.Add("Item 1");
 itemsList.Add("Item 2");

 // Create a new ItemsView and set the data source.
 ItemsView itemsView1 = new ItemsView();
 itemsView1.ItemsSource = itemsList;

 // Add the ItemsView to a parent container in the visual tree.
 rootGrid.Children.Add(itemsView1);

ItemsSource kötése az XAML-ben

Az ItemsSource tulajdonságot egy XAML-gyűjteményhez is kötheti. További információ: Adatkötés XAML-lel.

Fontos

Ha egy DataTemplate x:Bind markup bővítményét használja, meg kell adnia az adatsablon adattípusát (x:DataType).

Itt az ItemsSource egyéni (típusú Photo) adatobjektumok gyűjteményéhez van kötve.

<ItemsView ItemsSource="{x:Bind Photos}">

</ItemsView>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Photos = new ObservableCollection<Photo>();
        PopulatePhotos();
    }

    public ObservableCollection<Photo> Photos
    {
        get; private set;
    }


    private void PopulatePhotos()
    {
        // Populate the Photos collection. 
    }
}

public class Photo
{
    public BitmapImage PhotoBitmapImage { get; set; }
    public string Title { get; set; }
    public int Likes { get; set; }
}

Az elemek megjelenésének megadása

Alapértelmezés szerint egy adatelem jelenik meg az elemek nézetben annak az adatobjektumnak a sztringképeként, amelyhez hozzá van kötve. Általában az adatok részletesebb bemutatását szeretné megjeleníteni. Ha pontosan meg szeretné adni, hogy az elemek hogyan jelenjenek meg az elemek nézetben, hozzon létre egy DataTemplate-et. 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 köthetők egy adatobjektum tulajdonságaihoz, vagy statikus tartalom definiálható beágyazva. A DataTemplate az ItemsView vezérlőelem ItemTemplate tulajdonságához van rendelve.

Fontos

A DataTemplate gyökérelemének ItemContainernek kell lennie; ellenkező esetben a rendszer kivételt ad ki. Az ItemContainer egy független primitív vezérlő, amelyet az ItemsView használ az elemgyűjtemény egyes elemeinek kijelölési állapotainak és egyéb vizualizációinak megjelenítésére.

Ebben a példában a DataTemplate a Page.ResourcesResourceDictionary-ben van definiálva. Tartalmaz egy képvezérlőt a kép megjelenítéséhez, valamint egy átfedést, amely tartalmazza a kép címét és a kapott kedvelések számát.

 <Page.Resources>
     <DataTemplate x:Key="PhotoItemTemplate" x:DataType="local:Photo">
         <ItemContainer AutomationProperties.Name="{x:Bind Title}">
             <Grid>
                 <Image Source="{x:Bind PhotoBitmapImage, Mode=OneWay}" 
                        Stretch="UniformToFill" MinWidth="70"
                        HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 <StackPanel Orientation="Vertical" Height="40" Opacity=".75"
                             VerticalAlignment="Bottom" Padding="5,1,5,1" 
                             Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                     <TextBlock Text="{x:Bind Title}" 
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="{x:Bind Likes}"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                         <TextBlock Text=" Likes"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     </StackPanel>
                 </StackPanel>
             </Grid>
         </ItemContainer>
     </DataTemplate>
 </Page.Resources>

 <Grid x:Name="rootGrid">
     <ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
                ItemTemplate="{StaticResource PhotoItemTemplate}">
     </ItemsView>
 </Grid>

Így néz ki az adatsablon által definiált elemelrendezés.

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

Amikor elemeket ad hozzá egy ItemsView vezérlőelemhez, az automatikusan körbefuttat minden elemet egy ItemContainerben , majd az összes elemtárolót eltárolja. Az elemek tárolóinak elrendezése a vezérlő Elrendezés tulajdonságától függ.

Az elemek elrendezését módosíthatja az aktuális elrendezés tulajdonságainak módosításával, vagy teljesen lecserélheti az aktuális elrendezést egy másik elrendezésre. Használhatja a következőben ismertetett elrendezések egyikét, vagy létrehozhat egy egyéni elrendezést az Elrendezés osztályból.

StackLayout

Az ItemsView alapértelmezés szerint egy StackLayoutot használ, amely egy függőleges listát hoz létre, amely az alapértelmezett tulajdonságbeállításokkal és egy egyszerű képsablonnal jelenik meg.

Ez az XAML 5 képpontra állítja a StackLayout elemei közötti térközt.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <StackLayout Spacing="5"/>
    </ItemsView.Layout>
</ItemsView>

A StackLayout tulajdonságokat biztosít a vezérléshez:

• az elrendezés függőleges vagy vízszintes (Tájolás)
• Az elemek közötti távolság (Térköz)

Az elrendezést az ItemTemplate-tal kombinálva többféle megjelenést adhat a gyűjteménynek, hogy megfeleljen az igényeinek. A WinUI 3 Katalógus minta például megváltoztatja a StackLayouttal használt ItemTemplate-et, hogy így nézzen ki.

LinedFlowLayout

A LinedFlowLayout sorba rendezi az elemeket balról jobbra, majd felülről lefelé, körbefuttatásos elrendezésben. Ezzel az elrendezéssel megjeleníthet egy olyan elemgyűjteményt, amelyben az elemek rögzített magasságúak, de változó szélességűek. Képalapú gyűjteményekhez ajánljuk. Ez az elrendezés beépített animációkkal is rendelkezik, amelyek akkor játszhatók le, amikor a gyűjtemény elemeket ad hozzá vagy távolít el, és amikor a nézet átméreteződik.

Íme egy elemnézet, amely sorba rendezve jeleníti meg a fényképek gyűjteményét.

<ItemsView Width="500" Height="400" HorizontalAlignment="Left"
           ItemTemplate="{StaticResource LinedFlowLayoutItemTemplate}">
    <ItemsView.Layout>
        <LinedFlowLayout ItemsStretch="Fill" 
                         LineHeight="160" 
                         LineSpacing="5"
                         MinItemSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

A LinedFlowLayout tulajdonságokat biztosít a vezérléshez:

• az elemek mérete és térköze (LineHeight, LineSpacing, MinItemSpacing)
• az elemek elrendezése (ItemsJustification, ItemsStretch)

UniformGridLayout

A UniformGridLayout sorba rendezi az elemeket balról jobbra vagy felülről lefelé (a tájolástól függően) egy körbefuttatási elrendezésben. Minden elem azonos méretű.

Íme egy elemnézet, amely egységes rácselrendezésben jeleníti meg a fényképek gyűjteményét.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <UniformGridLayout MaximumRowsOrColumns="3" 
                           MinRowSpacing="5" 
                           MinColumnSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

A UniformGridLayout tulajdonságokat biztosít a vezérléshez:

• hogy az elrendezés sor- vagy oszlopalapú-e (tájolás)
• sorok vagy oszlopok száma (MaximumRowsOrColumns)
• az elemek mérete és térköze (MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
• az elemek elrendezése (ItemsJustification, ItemsStretch)

Jótanács

A WinUI 3 Katalógus alkalmazásban található interaktív bemutatóval valós időben láthatja ezeknek a tulajdonságoknak a hatását.

Elem kijelölése és interakciója

Többféleképpen is engedélyezheti, hogy a felhasználók interakcióba léphessenek egy elemnézettel. 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 IsItemInvokedEnabled tulajdonságot , hogy a felhasználók az elem kijelölése helyett egy elemre kattintva meghívjanak egy műveletet.

Ez a táblázat azt mutatja be, hogy a felhasználó hogyan használhatja az elemek nézeteit, é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" IsItemInvokedEnabled="False"	N/A	N/A
Egyszeri kijelölés	SelectionMode="Egyszeri" IsItemInvokedEnabled="False"	KiválasztásVáltozott	KiválasztottElem
Több kijelölés	SelectionMode="Többszörös" IsItemInvokedEnabled="False"	KiválasztásVáltozott	KiválasztottElemek
Bővített kijelölés	KiválasztásiMód="Kiterjesztett" IsItemInvokedEnabled="False"	KiválasztásVáltozott	KiválasztottElemek
Kattints	SelectionMode="Nincs" IsItemInvokedEnabled="True"	ItemInvoked	N/A

Megjegyzés:

Engedélyezheti az IsItemInvokedEnabled elemet, hogy egy ItemInvoked eseményt indítson, miközben a SelectionMode beállítása Single, Multiple, vagy Extended értékű. Ha ezt teszi, a Rendszer először az ItemInvoked eseményt, majd a SelectionChanged eseményt emeli ki. Bizonyos esetekben (például ha az ItemInvoked 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:

<ItemsView x:Name="myItemsView" SelectionMode="None" IsItemInvokedEnabled="True"/>

myItemsView.SelectionMode = ItemsViewSelectionMode.None;
myItemsView.IsItemInvokedEnabled = true;

Read-only

A SelectionMode tulajdonságot ItemsViewSelectionMode.None értékre állíthatja az elemkijelölés 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.

Megjegyzés:

Az elemek továbbra is kijelölhetők és törölhetők programozott módon, de felhasználói interakcióval nem.

Egyszeri kijelölés

Ez a táblázat a billentyűzet, az egér és az érintés interakcióit ismerteti a SelectionMode beállításakor Single.

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.

A SelectionMode beállításakor Single lekérheti a kijelölt adatelemet a SelectedItem tulajdonságból. Ha nincs kijelölve elem, a SelectedItem értéke null.

Ha olyan elemet próbál beállítani, amely nem szerepel az elemgyűjteményben SelectedItem elemként, a művelet figyelmen kívül lesz hagyva, és a SelectedItem értéke null lesz.

A kijelölés alapértelmezett kijelölésjelzője Single így néz ki.

Több kijelölés

Ez a táblázat a SelectionMode beállításakor Multiple, a billentyűzet, az egér és az érintés interakcióit ismerteti.

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.

A kijelölés alapértelmezett kijelölésjelzője Multiple így néz ki.

Egy elemeket megjelenítő nézetben egy kép körül kék szegély látható, és egy bejelölt jelölőnégyzet jelzi a kijelölést. Mellett egy kijelöletlen kép látható szegély nélkül és nem bejelölt jelölőnégyzettel.

Bővített kijelölés

Ez a táblázat a SelectionMode beállításakor Extended, a billentyűzet, az egér és az érintés interakcióit ismerteti.

Módosító kulcs	Kölcsönhatás
None	A viselkedés ugyanaz, mint a Single kijelölése.
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.

Ha a SelectionMode értéke Multiple vagy Extended, lekérheti a kijelölt adatelemeket a SelectedItems tulajdonságból.

A Rendszer szinkronizálja a SelectedItem és a SelectedItems tulajdonságokat. Ha például a SelectedItem nullértéket állítja be, a SelectedItems üres. Többválasztós módban a SelectedItem az elsőként kiválasztott elemet tartalmazza.

Az alapértelmezett kijelölésjelző a Extended kijelölésnél ugyanaz, mint a Single kijelölésnél, és így néz ki.

Elemkijelölés programozott kezelése

Megjegyzés:

Ezek a kijelölési módszerek figyelmen kívül hagyják a SelectionMode tulajdonságot, és akkor is hatást gyakorolnak, amikor a SelectionMode Single vagy None értékű.

Előfordulhat, hogy programozott módon kell módosítania az ItemsView elemkijelölést. Megjelenítheti például 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. A Kiválasztás, a SelectAll, a Deselect és az InvertSelection metódussal hatékonyabban módosíthatja a kijelölést, mint a SelectedItems tulajdonságot.

Jótanács

A Gyűjtemény összes elemét a SelectAll metódus meghívásával választhatja ki. Nincs megfelelő módszer az összes elem kijelölésének törlésére. Az összes elem kijelölését azonban megszüntetheti a SelectAll meghívásával, amelyet azonnal az InvertSelection követ.

A mintakód lekérése

• WinUI 3 katalógusminta – Az összes XAML-vezérlő megjelenítése interaktív formátumban.

Kapcsolódó cikkek

• Listákra vonatkozó irányelvek
• ItemsView osztály
• StackLayout
• UniformGridLayout
• LinedFlowLayout