Change ListView item selection style

问题

How do I change the ListView item selection style in a ListView in a Windows Store app? I want to change color, margins and remove the checkbox. I have tried to change all kinds of templates in Blend but I can’t figure out this one :-(.

XAML-code:

<Page
x:Class="WindowsStoreListViewSelectionTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WindowsStoreListViewSelectionTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.DataContext>
    <local:BasicData/>
</Page.DataContext>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{Binding ListData}" SelectedIndex="1">
    </ListView>
</Grid>

C#-code:

public class BasicData
{
    public BasicData()
    {
        _ListData = new ObservableCollection<object>();
        ListData.Add("Alfa");
        ListData.Add("Beta");
        ListData.Add("Gamma");
    }

    private ObservableCollection<object> _ListData;

    public ObservableCollection<object> ListData
    {
        get
        {
            return _ListData;
        }
    }
}

回答1:

So the problem was finally solved :-). Here is a step-by-step guide for other beginners with a Windows 8.1 project. It’s for Blend (a great tool – spend some time to learn how to use it) but I’m pretty sure it’s more or less the same for Visual Studio.

Right click on the list view and select:

Edit Additional Templates
Edit Generated Item Container (ItemContainerStyle)
Edit a Copy
Enter a name

Then a style is generated that looks like this:

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Margin" Value="0,0,18,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter 
                    CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                    CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                    ContentMargin="4" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Padding="{TemplateBinding Padding}" 
                    PointerOverBackgroundMargin="1" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                    SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
                    SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                    SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" 
                    SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The check mark is easily removed by changing the SelectionCheckMarkVisualEnabled value.

回答2:

What you're looking for is the ListViewItem Style. This has the definitions for the border, the selection glyph, and everything else you want to change. It is generally set in the ListView via the ItemContainerStyle property.

来源：https://stackoverflow.com/questions/23321860/change-listview-item-selection-style

标签

windows-store-apps