Kontejnery a šablony položek

Ovládací prvky ListView a GridView spravují uspořádání jejich položek (vodorovné, svislé, obtékání atd.) a způsob interakce uživatelů s položkami, ale ne způsob zobrazení jednotlivých položek na obrazovce. Vizualizace položek je spravována kontejnery položek. Když přidáte položky do zobrazení seznamu, automaticky se umístí do kontejneru. Výchozí kontejner položek pro ListView je ListViewItem; Pro GridView je to GridViewItem.

Důležitá rozhraní API: třída ListView, třída GridView, třída ListViewItem, třída GridViewItem, vlastnost ItemTemplate, vlastnost ItemContainerStyle

Poznámka:

ListView i GridView jsou odvozeny z ListViewBase třídy, takže mají stejné funkce, ale zobrazit data odlišně. V tomto článku, když mluvíme o zobrazení seznamu, informace platí jak pro ListView, tak GridView ovládací prvky, pokud není uvedeno jinak. Můžeme odkazovat na třídy, jako je ListView nebo ListViewItem, ale List předponu lze nahradit Grid pro odpovídající ekvivalent mřížky (GridView nebo GridViewItem).

Položky ListView a položky GridView

Jak je uvedeno výše, ListView položky jsou automaticky umístěny do ListViewItem kontejneru a GridView položky jsou umístěny do GridViewItem kontejneru. Tyto kontejnery položek jsou ovládací prvky, které mají vlastní předdefinované styly a interakce, ale dají se také vysoce přizpůsobit. Před přizpůsobením se ale nezapomeňte seznámit se s doporučenými styly a pokyny pro ListViewItem a GridViewItem.

• ListViewItems - Položky jsou primárně zaměřené na text a protáhly ve tvaru. Ikony nebo obrázky se můžou zobrazit nalevo od textu.
• GridViewItems – Položky mají obvykle čtvercový tvar nebo alespoň méně připomínají protáhlý obdélník. Položky jsou zaměřené na obrázky a mohou mít text, který se zobrazuje kolem nebo je překrytý na obrázku.

Úvod do přizpůsobení

Kontejnerové ovládací prvky (například ListViewItem a GridViewItem) se skládají ze dvou důležitých částí, které kombinují vytvoření konečných vizuálů zobrazených pro položku: šablony dat a šablony ovládacího prvku.

• Šablona dat – K vlastnosti ItemTemplate zobrazení seznamu přiřadíte DataTemplate, abyste určili, jak se zobrazují jednotlivé datové položky.
• Šablona ovládacího prvku – Šablona ovládacího prvku poskytuje část vizualizace položky, za kterou je odpovědný rámec, jako jsou vizuální stavy. K úpravě šablony ovládacího prvku můžete použít Vlastnost ItemContainerStyle . Obvykle to uděláte tak, že upravíte barvy zobrazení seznamu tak, aby odpovídaly vaší značce, nebo můžete změnit způsob zobrazení vybraných položek.

Tento obrázek ukazuje, jak se šablona ovládacího prvku a datová šablona zkombinují a vytvoří konečný vizuál pro položku.

Tady je XAML, který vytvoří tuto položku. Šablony si vysvětlíme později.

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

Důležité

Šablony dat a šablony ovládacích prvků slouží k přizpůsobení stylu pro mnoho jiných ovládacích prvků než ListView a GridView. Patří mezi ně ovládací prvky s vlastním předdefinovaným stylem, například FlipView, a vlastní vytvořené ovládací prvky, například ItemsRepeater. Následující příklad je specifický pro ListView/GridView, ale koncepty lze použít pro mnoho dalších ovládacích prvků.

Požadavky

• Předpokládáme, že víte, jak používat ovládací prvek zobrazení seznamu. Další informace najdete v článku ListView a GridView .
• Předpokládáme také, že rozumíte stylům a šablonám ovládacích prvků, včetně způsobu použití stylu přímo nebo jako zdroje. Další informace najdete v tématu Styling controls and Control templates.

Data

Než se podrobněji podíváme na to, jak zobrazit datové položky v zobrazení seznamu, musíme porozumět datům, která se mají zobrazit. V tomto příkladu vytvoříme datový typ s názvem NamedColor. Kombinuje název barvy, hodnotu barvy a SolidColorBrush pro barvu, které jsou vystaveny jako 3 vlastnosti: Name, Colora Brush.

Potom naplníme seznam objektem pro každou pojmenovanou NamedColor barvu ve třídě Colors . Seznam je nastaven jako ItemsSource pro zobrazení seznamu.

Tady je kód pro definování třídy a naplnění NamedColors seznamu.

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

Šablona dat

Určíte šablonu dat, která určuje, jak má být položka dat zobrazena v zobrazení seznamu.

Ve výchozím nastavení se datová položka zobrazí v zobrazení seznamu jako řetězcová reprezentace datového objektu, ke které je vázán. Pokud v zobrazení seznamu zobrazíte data NamedColors, aniž byste řekli zobrazení seznamu, jak by měla vypadat, zobrazí pouze to, co ToString metoda vrátí, jako je tato.

XAML

<ListView x:Name="colorsListView"/>

Řetězcovou reprezentaci konkrétní vlastnosti datové položky můžete zobrazit nastavením DisplayMemberPath na tuto vlastnost. Zde nastavíte DisplayMemberPath na Name vlastnost NamedColor položky.

XAML

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

Zobrazení seznamu teď zobrazuje položky podle názvu, jak je znázorněno tady. Je to užitečnější, ale není to moc zajímavé a nechává spoustu informací skrytých.

Obvykle chcete zobrazit bohatší prezentaci dat. Pokud chcete přesně určit, jak se zobrazují položky v zobrazení seznamu, vytvoříte dataTemplate. XAML v DataTemplate definuje rozložení a vzhled ovládacích prvků použitých k zobrazení jednotlivé položky. Ovládací prvky v rozložení mohou být svázány s vlastnostmi datového objektu nebo mají definovaný statický obsah. DataTemplate přiřadíte k vlastnosti ItemTemplate ovládacího prvku seznamu.

Důležité

Položku ItemTemplate a DisplayMemberPath nemůžete používat současně. Pokud jsou nastaveny obě vlastnosti, dojde k výjimce.

Tady definujete DataTemplate, která zobrazuje obdélník v barvě položky spolu s názvem barvy a hodnotami RGB.

Poznámka:

Při použití rozšíření x:Bind markup v DataTemplate, musíte zadat DataType (x:DataType) v DataTemplate.

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>

Takto vypadají datové položky, když se zobrazí pomocí této šablony dat.

Důležité

Objekty ListViewItems mají ve výchozím nastavení zarovnaný obsah doleva, tj. hodnota HorizontalContentAlignmentProperty je nastavená na Levá. Pokud máte více prvků v objektu ListViewItem, které jsou vodorovně sousední, například vodorovně skládané prvky nebo prvky umístěné ve stejném řádku mřížky, budou všechny zarovnány doleva a odděleny pouze jejich definovaným okrajem.

Pokud chcete, aby se prvky rozprostřily tak, aby vyplnily celý text ListItem, budete muset nastavit HorizontalContentAlignmentProperty na Stretch pomocí Setter uvnitř vašeho ListView:

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

Data můžete zobrazit v objektu GridView. Tady je další šablona dat, která zobrazuje data způsobem, který je vhodnější pro rozložení mřížky. Tentokrát je šablona dat definována jako zdroj, nikoli inline s kódem XAML pro GridView.

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}"/>

Když se data zobrazí v mřížce pomocí této šablony dat, vypadá to takto.

Důležité informace o výkonu

Šablony dat představují primární způsob, jak definovat vzhled zobrazení seznamu. Můžou mít také významný dopad na výkon, pokud váš seznam zobrazuje velký počet položek.

Pro každou položku v zobrazení seznamu se vytvoří instance každého elementu XAML v šabloně dat. Například šablona mřížky v předchozím příkladu obsahuje 10 elementů XAML (1 Mřížka, 1 Obdélník, 3 Ohraničení, 5 TextBlocks). Objekt GridView, který zobrazuje 20 položek na obrazovce pomocí této šablony dat, vytvoří alespoň 200 prvků (20*10=200). Snížení počtu prvků v šabloně dat může výrazně snížit celkový počet prvků vytvořených pro zobrazení seznamu. Další informace naleznete v tématu ListView a GridView optimalizace uživatelského rozhraní: Snížení počtu elementů na položku.

Zvažte tuto část šablony dat tabulky. Pojďme se podívat na několik věcí, které snižují počet prvků.

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

• Nejprve rozložení používá jednu mřížku. Můžete mít jeden sloupec Grid a umístit tyto 3 TextBlocky do StackPanelu, ale v šabloně dat, která se vytváří mnohokrát, byste měli hledat způsoby, jak se vyhnout vkládání rozvrhových panelů do jiných rozvrhových panelů.
• Za druhé můžete pomocí ovládacího prvku Ohraničení vykreslit pozadí bez skutečného umístění položek do elementu Border. Element Border může mít pouze jeden podřízený prvek, takže byste museli přidat další panel rozložení pro hostování prvků TextBlock 3 v elementu Border v XAML. Tím, že TextBlocky nejsou dětmi prvku Border, eliminujete potřebu používat panel k jejich udržení.
• A konečně, můžete umístit TextBlocks uvnitř StackPanelu a nastavit vlastnosti ohraničení na StackPanel místo použití explicitního elementu Border. Prvek Border je však lehčí ovládací prvek než StackPanel, takže má menší dopad na výkon při opakovaném vykreslování.

Použití různých rozložení pro různé položky

Šablona ovládacího prvku

Šablona ovládacího prvku položky obsahuje vizuály, které zobrazují stav, jako je výběr, ukazatel myši a fokus. Tyto vizuály se vykreslují buď nad šablonou dat, nebo pod šablonou dat. Tady jsou uvedeny některé běžné výchozí vizuály nakreslené šablonou ovládacího prvku ListView.

• Najetí myší – světle šedý obdélník nakreslený pod šablonou dat
• Výběr – světle modrý obdélník nakreslený pod šablonou dat.
• Fokus klávesnice – vizuál s fokusem s vysokou viditelností nakreslený nad šablonou položky

Zobrazení seznamu kombinuje prvky ze šablony dat a řídicí šablony k vytvoření konečných vizuálů vykreslených na obrazovce. Tady se vizuály stavů zobrazují v kontextu zobrazení seznamu.

ListViewItemPresenter

Jak jsme si poznamenali dříve o šablonách dat, počet prvků XAML vytvořených pro každou položku může mít významný vliv na výkon zobrazení seznamu. Vzhledem k tomu, že se šablona dat a šablona ovládacího prvku zkombinují k zobrazení jednotlivých položek, skutečný počet prvků potřebných k zobrazení položky zahrnuje prvky v obou šablonách.

Ovládací prvky ListView a GridView jsou optimalizované pro snížení počtu elementů XAML vytvořených pro každou položku. ListViewItem vizuály jsou vytvářeny prostřednictvím ListViewItemPresenter, což je speciální prvek XAML, který bez režie mnoha UIElements zobrazuje složité vizuální prvky pro fokus, výběr a další vizuální stavy.

Poznámka:

V aplikacích WinUI používají jak ListViewItem, tak GridViewItemListViewItemPresenter; GridViewItemPresenter je zastaralý a neměli byste ho používat. ListViewItem a GridViewItem nastavují různé hodnoty vlastností v ListViewItemPresenter pro dosažení různých výchozích vzhledů.

Chcete-li změnit vzhled kontejneru položek, použijte ItemContainerStyle vlastnost a zadejte styl s jeho TargetType nastavena na ListViewItem nebo GridViewItem.

V tomto příkladu přidáte odsazení do ListViewItem a vytvoříte mezeru mezi položkami v seznamu.

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

Zobrazení seznamu teď vypadá takto s mezerou mezi položkami.

Ve výchozím stylu ListViewItem má vlastnost ContentMargin komponenty ListViewItemPresenter TemplateBinding na vlastnost Padding komponenty ListViewItem (). Když nastavíme vlastnost „Padding“, hodnota je skutečně předávána vlastnosti „ContentMargin“ u ListViewItemPresenter.

Chcete-li upravit další vlastnosti objektu ListViewItemPresenter, které nejsou svázány se šablonami pro vlastnosti ListViewItems, je nutné přepracovat šablonu pro ListViewItem pomocí nového objektu ListViewItemPresenter, kde lze upravovat vlastnosti.

Poznámka:

ListViewItem a GridViewItem výchozí styly nastavily mnoho vlastností v ListViewItemPresenter. Vždy byste měli začít kopií výchozího stylu a upravovat jenom vlastnosti, které potřebujete. V opačném případě se vizuály pravděpodobně nezobrazí očekávaným způsobem, protože některé vlastnosti nebudou správně nastaveny.

Vytvoření kopie výchozí šablony v sadě Visual Studio

1. Otevřete podokno Osnova dokumentu (Zobrazit > další osnovu dokumentu systému Windows>).
2. Vyberte prvek seznamu nebo mřížky, který chcete upravit. V tomto příkladu upravíte element colorsGridView.
3. Klikněte pravým tlačítkem myši a vyberte Upravit další šablony > Upravit kontejner vygenerovaných položek (ItemContainerStyle) > Upravit kopii.
4. V dialogovém okně Vytvořit stylový prostředek zadejte název stylu. V tomto příkladu použijete colorsGridViewItemStyle.

Do aplikace se jako prostředek přidá kopie výchozího stylu a vlastnost GridView.ItemContainerStyle je nastavena na tento prostředek, jak je znázorněno v tomto XAML.

<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}"/>

Nyní můžete upravit vlastnosti v ListViewItemPresenter a řídit zaškrtnutí políčka, umístění položek a barvy štětců pro vizuální stavy.

Vložené a překryvné vizuály výběru

ListView a GridView označují vybrané položky různými způsoby v závislosti na ovládacím prvku a SelectionMode. Další informace o výběru zobrazení seznamu naleznete v tématu ListView a GridView.

Pokud je SelectionMode nastaven na Více, zaškrtávací políčko výběru se zobrazí jako součást šablony ovládacího prvku položky. Pomocí vlastnosti SelectionCheckMarkVisualEnabled můžete vypnout políčko výběru v režimu vícenásobného výběru. Tato vlastnost je však ignorována v jiných režimech výběru, takže není možné zapnout zaškrtávací políčko v režimu rozšířeného nebo jednoduchého výběru.

Můžete nastavit vlastnost CheckMode k tomu, abyste určili, zda je zaškrtávací políčko zobrazeno pomocí stylu in-line nebo překryvného stylu.

• Vložený: Tento styl zobrazuje zaškrtávací políčko vlevo od obsahu a koloruje pozadí kontejneru položek, aby označil výběr. Toto je výchozí styl pro ListView.
• Překryv: Tento styl zobrazuje zaškrtávací políčko nad obsahem a barvy pouze ohraničení kontejneru položek, které označují výběr. Toto je výchozí styl pro GridView.

Tato tabulka zobrazuje výchozí vizuály použité k označení výběru.

Režim výběru	Jednoduché/Rozšířené	Multiple
Na řádku
Překrytí

Poznámka:

V tomto a následujících příkladech se jednoduché řetězcové datové položky zobrazí bez šablon dat, které zvýrazní vizuály poskytované šablonou ovládacího prvku.

K dispozici je také několik vlastností štětce, které umožňují změnit barvy zaškrtávacího políčka. Podíváme se na tyto vlastnosti dále spolu s dalšími vlastnostmi štětce.

Kartáče

Mnoho vlastností určuje štětce, které se používají pro různé vizuální stavy. Můžete je upravit tak, aby odpovídaly barvě vaší značky.

Tato tabulka zobrazuje stavy vizuálu Common a Selection pro ListViewItem a štětce použité k vykreslení vizuálů pro každý stav. Na obrázcích se zobrazují efekty štětců na vložené i překryvné styly vizuálů výběru.

Poznámka:

V této tabulce jsou upravené hodnoty barev pro štětce předem definované pojmenované barvy a tyto barvy jsou vybrány, aby bylo zřetelnější, kde se v šabloně používají. Nejedná se o výchozí barvy pro vizuální stavy. Pokud v aplikaci upravíte výchozí barvy, měli byste použít prostředky štětce k úpravě hodnot barev podle výchozí šablony.

Název stavu/štětce	Vložený styl	Překryvný styl
Normální CheckBoxBrush="Red"
Ukazatel myši PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
Stlačený PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
Vybraný SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Green" CheckBoxBrush="Red" (pouze inline)
PointerOverSelected SelectedPointerOverBackground="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (pouze překryvná vrstva) CheckBrush="Zelená" CheckBoxBrush="Red" (pouze inline)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (pouze překryvná vrstva) CheckBrush="Zelená" CheckBoxBrush="Red" (pouze inline)
Zaměřený FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter má další vlastnosti štětce pro zástupné symboly dat a přetahování stavů. Pokud v zobrazení seznamu používáte přírůstkové načítání nebo přetažení, měli byste zvážit, jestli je potřeba upravit i tyto další vlastnosti štětce. Úplný seznam vlastností, které lze upravit, naleznete ListViewItemPresenter třídy.

Rozbalené šablony položek XAML

Pokud potřebujete provést více úprav, než je povoleno vlastnostmi ListViewItemPresenter – pokud potřebujete změnit umístění zaškrtávacího políčka, můžete například použít šablony ListViewItemExpanded nebo GridViewItemExpanded . Tyto šablony jsou součástí výchozích stylů v generic.xaml. Řídí se standardním vzorem XAML při sestavování všech vizuálů z jednotlivých prvků UIElements.

Jak už bylo zmíněno dříve, počet uiElements v šabloně položky má významný vliv na výkon zobrazení seznamu. Nahrazení ListViewItemPresenter rozbalenými šablonami XAML výrazně zvyšuje počet elementů a nedoporučuje se, když zobrazení seznamu zobrazí velký počet položek nebo když je problém s výkonem.

Poznámka:

ListViewItemPresenter je podporován pouze tehdy, když ItemsPanel zobrazení seznamu je ItemsWrapGrid nebo ItemsStackPanel. Pokud změníte ItemPanel na použití VariableSizedWrapGrid, WrapGrid nebo StackPanel, šablona položky se automaticky přepne na rozbalenou šablonu XAML. Další informace naleznete v tématu optimalizace uživatelského rozhraní ListView a GridView.

Chcete-li přizpůsobit rozbalenou šablonu XAML, musíte vytvořit její kopii v aplikaci a nastavit ItemContainerStyle vlastnost na kopii.

Zkopírování rozbalené šablony

1. Nastavte ItemContainerStyle vlastnost, jak je znázorněno zde pro ListView nebo GridView.

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

2. V podokně Vlastnosti sady Visual Studio rozbalte oddíl Různé a vyhledejte vlastnost ItemContainerStyle. (Ujistěte se, že je vybraná možnost ListView nebo GridView.)

3. Klikněte na značku vlastnosti ItemContainerStyle. (Je to malé pole vedle textového pole. Je barevná zelená, aby se zobrazila, že je nastavená na StaticResource.) Otevře se nabídka vlastností.

4. V nabídce vlastností klepněte na tlačítko Převést na nový prostředek.

   

5. V dialogovém okně Vytvořit stylový prostředek zadejte název prostředku a klikněte na OK.

V aplikaci se vytvoří kopie rozbalené šablony z generic.xaml, kterou můžete podle potřeby upravit.

Související články

• Seznamy
• ListView a GridView