Elemtárolók és -sablonok

A ListView és a GridView vezérlők kezelik az elemek elrendezését (vízszintes, függőleges, burkoló stb.) és azt, hogy a felhasználó hogyan kommunikál az elemekkel, de nem azt, hogy az egyes elemek hogyan jelenjenek meg a képernyőn. Az elemvizualizációkat elemtárolók kezelik. Amikor elemeket ad hozzá egy listanézethez, azok automatikusan tárolóba kerülnek. A ListView alapértelmezett elemtárolója a ListViewItem; A GridView esetében ez a GridViewItem.

Fontos API-k: ListView osztály, GridView osztály, ListViewItem osztály, GridViewItem osztály, ItemTemplate tulajdonság, ItemContainerStyle tulajdonság

Megjegyzés:

A ListView és a GridView is a ListViewBase osztályból származik, így ugyanazzal a funkcióval rendelkeznek, de másképpen jelenítik meg az adatokat. Ebben a cikkben, ha listanézetről beszélünk, az adatok a ListView és a GridView vezérlőkre is érvényesek, 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).

ListView-elemek és GridView-elemek

Ahogy fentebb említettük, a ListView elemek automatikusan a ListViewItem tárolóba kerülnek, a GridView elemek pedig a GridViewItem tárolóba kerülnek. Ezek az elemtárolók olyan vezérlők, amelyek saját beépített stílusukkal és interakciójukkal rendelkeznek, de nagymértékben testre is szabhatók. A testreszabás előtt azonban mindenképpen ismerkedjen meg a ListViewItem és a GridViewItem ajánlott stílusával és irányelveivel:

• ListViewItems – Az elemek elsősorban szövegközpontúak és hosszúkásak. A szöveg bal oldalán ikonok vagy képek jelenhetnek meg.
• GridViewItems – Az elemek általában négyzet alakúak, vagy legalább kevésbé hosszúkás téglalap alakúak. Az elemek képközpontúak, és előfordulhat, hogy a szöveg körül vagy átfedésben van a képen.

Bevezetés a testreszabásba

A tárolóvezérlők (például a ListViewItem és a GridViewItem) két fontos részből állnak, amelyek összevonják az elemek végső vizualizációit: az adatsablont és a vezérlősablont.

• Adatsablon – A listanézet ItemTemplate tulajdonságához rendel egy DataTemplate-et az egyes adatelemek megjelenítésének megadásához.
• Vezérlősablon – A vezérlősablon az elemvizualizáció azon részét biztosítja, amelyért a keretrendszer felelős, például vizualizációs állapotok. Az ItemContainerStyle tulajdonság használatával módosíthatja a vezérlősablont. Ezt általában úgy teheti meg, hogy a listanézet színeit úgy módosítja, hogy megfeleljen a márkajelzésnek, vagy módosítsa a kijelölt elemek megjelenítését.

Ez a kép bemutatja, hogyan kombinálja a vezérlősablont és az adatsablont az elem végső vizualizációjának létrehozásához.

Az elemet az XAML hozza létre. A sablonokat később ismertetjük.

<ListView Width="220" SelectionMode="Multiple">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="Assets/placeholder.png" Width="44" Height="44"
                       HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind}" Foreground="Black"
                           FontSize="14" Grid.Column="1"
                           VerticalAlignment="Center"
                           Padding="0,0,54,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen"/>
        </Style>
    </ListView.ItemContainerStyle>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Fontos

Az adatsablonok és vezérlősablonok a ListView és a GridView kivételével számos vezérlő stílusának testreszabására szolgálnak. Ezek közé tartoznak a saját beépített stílussal rendelkező vezérlők, például a FlipView és az egyénileg létrehozott vezérlők, például az ItemsRepeater. Bár az alábbi példa a ListView/GridView-ra vonatkozik, a fogalmak számos más vezérlőre is alkalmazhatók.

Előfeltételek

• Feltételezzük, hogy tudja, hogyan használhat listanézet-vezérlőt. További információ: ListView és GridView .
• Azt is feltételezzük, hogy ismeri a vezérlőstílusokat és a sablonokat, beleértve a stílusok beágyazott vagy erőforrásként való használatát is. További információ: Stílusvezérlők és vezérlősablonok.

Az adatok

Mielőtt részletesebben megvizsgálnánk, hogyan jeleníthet meg adatelemeket listanézetben, tisztában kell lennie a megjelenítendő adatokkal. Ebben a példában létrehozunk egy adattípust NamedColor. Egy színnevet, egy színértéket és egy SolidColorBrush-t egyesít a színhez, amelyek 3 tulajdonságként jelennek meg: Name, Colorés Brush.

Ezután feltöltünk egy listát egy NamedColor objektummal a Színek osztály minden elnevezett színéhez. A lista elemforrásként van beállítva a listanézethez.

Itt adhatja meg az osztályt, és feltöltheti a NamedColors listát.

C#

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

namespace ColorsListApp
{
    public sealed partial class MainPage : Page
    {
        // The list of colors won't change after it's populated, so we use List<T>. 
        // If the data can change, we should use an ObservableCollection<T> intead.
        List<NamedColor> NamedColors = new List<NamedColor>();

        public MainPage()
        {
            this.InitializeComponent();

            // Use reflection to get all the properties of the Colors class.
            IEnumerable<PropertyInfo> propertyInfos = typeof(Colors).GetRuntimeProperties();

            // For each property, create a NamedColor with the property name (color name),
            // and property value (color value). Add it the NamedColors list.
            for (int i = 0; i < propertyInfos.Count(); i++)
            {
                NamedColors.Add(new NamedColor(propertyInfos.ElementAt(i).Name,
                                    (Color)propertyInfos.ElementAt(i).GetValue(null)));
            }

            colorsListView.ItemsSource = NamedColors;
        }
    }

    class NamedColor
    {
        public NamedColor(string colorName, Color colorValue)
        {
            Name = colorName;
            Color = colorValue;
        }

        public string Name { get; set; }

        public Color Color { get; set; }

        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(Color); }
        }
    }
}

Adatminta

Meg kell adnia egy adatsablont, amely tájékoztatja a listanézetet az adatelem megjelenítéséről.

Alapértelmezés szerint egy adatelem jelenik meg a listanézetben annak az adatobjektumnak a sztringképeként, amelyhez hozzá van kötve. Ha úgy jeleníti meg a "NamedColors" adatokat egy listanézetben, hogy nem mondja meg a listanézetnek, hogy hogyan kell kinéznie, csak azt jeleníti meg, amit a ToString metódus visszaad.

XAML

<ListView x:Name="colorsListView"/>

Az adatelem egy adott tulajdonságának sztringképét úgy jelenítheti meg, hogy a DisplayMemberPath tulajdonságot erre a tulajdonságra állítja. Itt a DisplayMemberPath tulajdonságot az Name tulajdonságra kell beállítani, az NamedColor elemnél.

XAML

<ListView x:Name="colorsListView" DisplayMemberPath="Name" />

A listanézet mostantól név szerint jeleníti meg az elemeket, ahogy az itt látható. Hasznosabb, de nem túl érdekes, és sok információt rejt.

Általában az adatok részletesebb bemutatását szeretné megjeleníteni. A listanézet elemeinek pontos megjelenítéséhez 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 egy adatobjektum tulajdonságaihoz köthetők, vagy statikus tartalom lehet beágyazva. A DataTemplate-et a listavezérlő ItemTemplate tulajdonságához rendelheti.

Fontos

Az ItemTemplate és a DisplayMemberPath egyszerre nem használható. Ha mindkét tulajdonság be van állítva, kivétel történik.

Itt definiálhat egy DataTemplate-ot, amely egy téglalapot jelenít meg az elem színében, valamint a színnevet és az RGB-értékeket.

Megjegyzés:

Ha a x:Bind jelölőbővítményt használ egy DataTemplate-ben, meg kell adnia a DataTemplate-ben a DataType (x:DataType) értékét.

XAML

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:NamedColor">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="54"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Width="44" Height="44" Fill="{x:Bind Brush}" Grid.RowSpan="2"/>
                <TextBlock Text="{x:Bind Name}" Grid.Column="1" Grid.ColumnSpan="4"/>
                <TextBlock Text="{x:Bind Color.R}" Grid.Column="1" Grid.Row="1" Foreground="Red"/>
                <TextBlock Text="{x:Bind Color.G}" Grid.Column="2" Grid.Row="1" Foreground="Green"/>
                <TextBlock Text="{x:Bind Color.B}" Grid.Column="3" Grid.Row="1" Foreground="Blue"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Így néznek ki az adatelemek, amikor az adatsablonnal jelennek meg.

Fontos

A ListViewItems alapértelmezés szerint balra igazítja a tartalmat, azaz a HorizontalContentAlignmentProperty értéke balra van állítva. Ha a ListViewItemben több olyan elem is található, amelyek vízszintesen szomszédosak, például vízszintesen halmozott elemek vagy ugyanabban a rácssorban elhelyezett elemek, azok mind balra lesznek igazítva, és csak a megadott margójukkal lesznek elválasztva.

Ahhoz, hogy az elemek el legyenek terjedve a ListItem teljes törzsének kitöltéséhez, a HorizontalContentAlignmentProperty értéket Stretch értékre kell állítania a ListView-ban található setter használatával:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

Előfordulhat, hogy egy GridView-ban szeretné megjeleníteni az adatokat. Íme egy másik adatsablon, amely a rácselrendezésnek megfelelő módon jeleníti meg az adatokat. Az adatsablon ezúttal erőforrásként van definiálva, nem pedig beágyazottként a GridView XAML-jével.

XAML

<Page.Resources>
    <DataTemplate x:Key="namedColorItemGridTemplate" x:DataType="local:NamedColor">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="96"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
    
            <Rectangle Width="96" Height="96" Fill="{x:Bind Brush}" Grid.ColumnSpan="3" />
            <!-- Name -->
            <Border Background="#AAFFFFFF" Grid.ColumnSpan="3" Height="40" VerticalAlignment="Top">
                <TextBlock Text="{x:Bind Name}" TextWrapping="Wrap" Margin="4,0,0,0"/>
            </Border>
            <!-- RGB -->
            <Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
            <TextBlock Text="{x:Bind Color.R}" Foreground="Red"
                   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.G}" Foreground="Green"
                   Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
                   Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
            <!-- HEX -->
            <Border Background="Gray" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock Text="{x:Bind Color}" Foreground="White" Margin="4,0,0,0"/>
            </Border>
        </Grid>
    </DataTemplate>
</Page.Resources>

...

<GridView x:Name="colorsGridView" 
          ItemTemplate="{StaticResource namedColorItemGridTemplate}"/>

Ha az adatok egy rácson jelennek meg ezzel az adatsablonnal, az így néz ki.

Teljesítménnyel kapcsolatos szempontok

Az adatsablonok határozzák meg elsődlegesen a listanézet megjelenését. Emellett jelentős hatással lehetnek a teljesítményre, ha a lista nagy számú elemet jelenít meg.

Egy adatsablon minden XAML-elemének példánya létrejön a listanézet minden eleméhez. Az előző példában szereplő rácssablon például 10 XAML-el rendelkezik (1 Rács, 1 Téglalap, 3 Szegély, 5 TextBlocks). Egy GridView, amely 20 elemet jelenít meg a képernyőn ezzel az adatsablonnal, legalább 200 elemet hoz létre (20*10=200). Az adatsablonok elemeinek számának csökkentése jelentősen csökkentheti a listanézethez létrehozott elemek teljes számát. További információ: ListView és GridView felhasználói felület optimalizálása: Elemenkénti elemszám-csökkentés.

Fontolja meg a rácsadatsablon ezen szakaszát. Tekintsünk meg néhány dolgot, amelyek csökkentik az elemek számát.

XAML

<!-- RGB -->
<Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
<TextBlock Text="{x:Bind Color.R}" Foreground="Red"
           Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.G}" Foreground="Green"
           Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
           Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>

• Először is az elrendezés egyetlen rácsot használ. Egy egyoszlopos rácsot is használhat, és elhelyezheti ezt a 3 TextBlocks-et egy StackPanelben, de egy sokszor létrehozott adatsablonban meg kell keresnie a módját annak, hogy ne ágyazza be az elrendezéspaneleket más elrendezéspanelekbe.
• Másodszor, a szegélyvezérlővel anélkül jeleníthet meg hátteret, hogy ténylegesen elemeket helyezné el a Szegély elemen belül. A Szegély elem csak egy gyermekelemmel rendelkezhet, ezért további elrendezési panelt kell hozzáadnia a 3 TextBlock elem üzemeltetéséhez az XAML Szegély elemében. Ha nem teszi a TextBlock elemeket a szegély gyermekévé, akkor nincs szükség panelre a TextBlockok tárolásához.
• Végül elhelyezheti a TextBlockst egy StackPanelben, és explicit szegélyelem használata helyett beállíthatja a szegélytulajdonságokat a StackPanelen. A Szegély elem azonban egy könnyebb vagy kisebb erőforrásigényű vezérlő, mint a StackPanel, így kisebb hatást gyakorol a teljesítményre, amikor többször megjelenítjük.

Különböző elrendezések használata különböző elemekhez

Vezérlősablon

Az elem vezérlősablonja tartalmazza az állapotot megjelenítő vizualizációkat, például a kijelölést, az egérmutatót és a fókuszt. Ezek a vizualizációk az adatsablon tetején vagy alatt jelennek meg. A ListView vezérlősablon által rajzolt gyakori alapértelmezett vizualizációk némelyike itt látható.

• Lebegő – Az adatsablon alá rajzolt világosszürke téglalap.
• Kijelölés – Az adatsablon alatt rajzolt világoskék téglalap.
• Billentyűzetfókusz – Az elemsablonra rajzolt , nagy láthatóságú fókuszvizualizáció .

A listanézet egyesíti az adatsablon és a vezérlősablon elemeit a képernyőn megjelenített végleges vizualizációk létrehozásához. Itt az állapotvizualizációk egy listanézet kontextusában jelennek meg.

ListViewItemPresenter

Ahogy korábban az adatsablonokról is megjegyeztük, az egyes elemekhez létrehozott XAML-elemek száma jelentős hatással lehet a listanézetek teljesítményére. Mivel az adatsablon és a vezérlősablon egyesítve jeleníti meg az egyes elemeket, az elemek megjelenítéséhez szükséges elemek tényleges száma mindkét sablon elemeit tartalmazza.

A ListView és a GridView vezérlők az elemenként létrehozott XAML-elemek számának csökkentésére vannak optimalizálva. A ListViewItem-vizualizációkat a ListViewItemPresenter hozza létre, amely egy speciális XAML-elem, amely összetett vizualizációkat jelenít meg a fókuszhoz, a kijelöléshez és más vizualizációs állapotokhoz, anélkül, hogy számos UIElements többletterhelése lenne.

Megjegyzés:

WinUI-alkalmazásokban a ListViewItem és a GridViewItem is a ListViewItemPresentert használja; a GridViewItemPresenter elavult, ezért nem érdemes használni. A ListViewItem és a GridViewItem különböző tulajdonságértékeket állít be a ListViewItemPresenterben a különböző alapértelmezett megjelenés eléréséhez.)

Az elemtároló megjelenésének módosításához használja az ItemContainerStyle tulajdonságot, és adjon meg egy Stílust, amelynek TargetType-ja ListViewItem vagy GridViewItem értékre van beállítva.

Ebben a példában paddingot ad hozzá a ListViewItemhez, hogy helyet hozzon létre a lista elemei között.

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <!-- DataTemplate XAML shown in previous ListView example -->
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0,4"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Most a listanézet így néz ki, szóközzel az elemek között.

A ListViewItem alapértelmezett stílusában a ListViewItemPresenter ContentMargin tulajdonság sablonkötéssel rendelkezik a ListViewItem Padding tulajdonsághoz (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). A Padding tulajdonság beállításakor ez az érték valóban a ListViewItemPresenter ContentMargin tulajdonságnak lesz átadva.

A ListViewItemPresenter egyéb olyan tulajdonságainak módosításához, amelyek nem a ListViewItems-tulajdonságokhoz kötött sablonok, újra meg kell ismételnie a ListViewItemet egy új ListViewItemPresenterrel, amelyen módosíthatja a tulajdonságokat.

Megjegyzés:

A ListViewItem és a GridViewItem alapértelmezett stílusok számos tulajdonságot beállítanak a ListViewItemPresenterben. Mindig az alapértelmezett stílus másolatával kell kezdenie, és csak a szükséges tulajdonságokat kell módosítania. Ellenkező esetben a vizualizációk valószínűleg nem a várt módon jelennek meg, mert egyes tulajdonságok nem lesznek megfelelően beállítva.

Az alapértelmezett sablon másolatának készítése a Visual Studióban

1. Nyissa meg a Dokumentumszerkezet panelt (Az egyéb Windows-dokumentumszerkezet > megtekintése>).
2. Jelölje ki a módosítani kívánt listát vagy rácselemet. Ebben a példában a colorsGridView elemet módosítja.
3. Kattintson a jobb egérgombbal, és válassza a További sablonok szerkesztése > Generált elemtároló szerkesztése (ItemContainerStyle) > Egy másolat szerkesztése.
4. A Stíluserőforrás létrehozása párbeszédpanelen adja meg a stílus nevét. Ebben a példában a(z) colorsGridViewItemStyle elemet használja.

Az alapértelmezett stílus másolatát a rendszer erőforrásként adja hozzá az alkalmazáshoz, és a GridView.ItemContainerStyle tulajdonság erre az erőforrásra van beállítva, ahogyan az ebben az XAML-ben látható.

<Style x:Key="colorsGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="Overlay" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                    SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

<GridView x:Name="colorsGridView" ItemContainerStyle="{StaticResource colorsGridViewItemStyle}"/>

Mostantól módosíthatja a ListViewItemPresenter tulajdonságait a kijelölés jelölőnégyzetének, az elemek elhelyezésének és a vizualizációk ecsetszíneinek szabályozásához.

Beágyazott és átfedéses kijelölési vizualizációk

A ListView és a GridView a vezérlőelemtől és a SelectionMode-tól függően különböző módokon jelzi a kijelölt elemeket. További információ a listanézet kiválasztásáról: ListView és GridView.

Ha a SelectionMode értéke Többszörös, a kijelölési jelölőnégyzet az elem vezérlősablonjának részeként jelenik meg. A SelectionCheckMarkVisualEnabled tulajdonság használatával kikapcsolhatja a kijelölési jelölőnégyzetet több kijelölési módban. Ezt a tulajdonságot azonban figyelmen kívül hagyja más kijelölési módban, így nem kapcsolhatja be a jelölőnégyzetet kiterjesztett vagy egyszeri kijelölés módban.

A CheckMode tulajdonság beállításával megadhatja, hogy a jelölőnégyzet a beágyazott stílussal vagy az átfedési stílussal jelenik-e meg.

• Beágyazott: Ez a stílus a tartalomtól balra lévő jelölőnégyzetet jeleníti meg, és az elemtároló hátterét a kijelölés jelzéséhez színezi. Ez a ListView alapértelmezett stílusa.
• Átfedés: Ez a stílus a tartalom tetején lévő jelölőnégyzetet jeleníti meg, és csak az elemtároló szegélyét színezi a kijelölés jelzéséhez. Ez a GridView alapértelmezett stílusa.

Ez a táblázat a kijelölés jelzésére használt alapértelmezett vizualizációkat jeleníti meg.

Kijelölési mód	Egyszerű/Kiterjesztett	Multiple
Beágyazott
Átfedő réteg

Megjegyzés:

Ebben és az alábbi példákban az egyszerű sztringadatelemek adatsablonok nélkül jelennek meg a vezérlősablon által biztosított vizualizációk kiemeléséhez.

A jelölőnégyzet színeinek módosításához több ecsettulajdonság is rendelkezésre áll. A következőkkel együtt megvizsgáljuk a különböző kefék tulajdonságait.

Ecsetek

Számos tulajdonság határozza meg a különböző vizualizációs állapotokhoz használt ecseteket. Ezeket érdemes módosítani a márka színének megfelelően.

Ez a táblázat a ListViewItem közös és kijelölési vizualizációs állapotát, valamint az egyes állapotok vizualizációinak megjelenítéséhez használt ecseteket mutatja be. A képeken látható az ecsetek hatása mind a beágyazott, mind az átfedő kijelölési vizuális stílusokon.

Megjegyzés:

Ebben a táblázatban az ecsetek módosított színértékei előre meghatározott, elnevezett színek, és a színek úgy lettek kiválasztva, hogy egyértelműbb legyen, hol használják őket a sablonban. Nem ezek az alapértelmezett színek a vizualizációs állapotokhoz. Ha módosítja az alkalmazás alapértelmezett színeit, akkor ecseterőforrásokkal módosíthatja a színértékeket az alapértelmezett sablonban leírtak szerint.

Állapot/ecset neve	Beágyazott stílus	Átfedési stílus
Normális CheckBoxBrush="Vörös"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Vörös"
Préselt PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Vörös"
Kiválasztott SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Zöld" CheckBoxBrush="Red" (csak beágyazott)
PointerOverSelected SelectedPointerOverBackground="Levendula" SelectedForeground="Navy" SelectedBackground="Khaki" (csak átfedés) CheckBrush="Zöld" CheckBoxBrush="Red" (csak beágyazott)		Elemkijelölési mutató a kijelölt elemek fölé helyezve
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (csak átfedés) CheckBrush="Zöld" CheckBoxBrush="Red" (csak beágyazott)
Koncentrált FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Vörös"

A ListViewItemPresenter más ecsettulajdonságokkal rendelkezik az adathelyőrzőkhöz és az húzási állapotokhoz. Ha növekményes betöltést vagy húzást használ a listanézetben, érdemes megfontolnia, hogy módosítania kell-e ezeket a további ecsettulajdonságokat is. A módosítható tulajdonságok teljes listáját a ListViewItemPresenter osztályban találja.

Bővített XAML-elemsablonok

Ha több módosítást kell végeznie, mint amit a ListViewItemPresenter tulajdonságai megengednek – ha például módosítania kell a jelölőnégyzet pozícióját – használhatja a ListViewItemExpanded vagy a GridViewItemExpanded sablont. Ezek a sablonok a generic.xaml alapértelmezett stílusai közé tartoznak. A szabványos XAML-mintát követik, amely az egyes felhasználói felületek összes vizualizációjának felépítését követi.

Ahogy korábban említettük, az elemsablonokban található UIElemelek száma jelentős hatással van a listanézet teljesítményére. A ListViewItemPresenter kibontott XAML-sablonokkal való cseréje jelentősen növeli az elemek számát, és nem ajánlott, ha a listanézet sok elemet fog megjeleníteni, vagy ha a teljesítmény aggodalomra ad okot.

Megjegyzés:

A ListViewItemPresenter csak akkor támogatott, ha a listanézet ItemsPanel elempaneljeItemsWrapGrid vagy ItemsStackPanel. Ha módosítja az ItemsPanelt a VariableSizedWrapGrid, WrapGrid vagy StackPanel használatára, akkor az elemsablon automatikusan átvált a kibontott XAML-sablonra. További információ: ListView és GridView felhasználói felület optimalizálása.

A kibontott XAML-sablon testreszabásához másolatot kell készítenie róla az alkalmazásban, és be kell állítania az ItemContainerStyle tulajdonságot a másolatra.

Kibontott sablon másolása

1. Állítsa be az ItemContainerStyle tulajdonságot a ListView-hoz vagy a GridView-hoz itt látható módon.

   <ListView ItemContainerStyle="{StaticResource ListViewItemExpanded}"/>
   <GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"/>
   

2. A Visual Studio Tulajdonságok paneljén bontsa ki a Vegyes szakaszt, és keresse meg az ItemContainerStyle tulajdonságot. (Győződjön meg arról, hogy a ListView vagy a GridView ki van jelölve.)

3. Kattintson az ItemContainerStyle tulajdonság tulajdonságjelölőre. (Ez a szövegdoboz melletti kis mező. Zöld színnel jelzi, hogy StaticResource-ra van állítva.) Megnyílik a tulajdonságmenü.

4. A tulajdonságmenüben kattintson az Átalakítás új erőforrássá gombra.

   

5. A Stíluserőforrás létrehozása párbeszédpanelen adja meg az erőforrás nevét, és kattintson az OK gombra.

A generic.xaml kibontott sablonjának egy példánya létrejön az alkalmazásban, amelyet igény szerint módosíthat.

Kapcsolódó cikkek

• Listák
• ListView és GridView