Styling a selected ListViewItem in Windows 8 CP

Question

I want to change the appearance of the Border of the selected Item in the picture linked below.

I've already been looking around on msdn.com and on the internet, but I've found nothing useful.

How can I do this?

Solution 1

The selection appearance is part of the ControlTemplate for ListViewItem. To modify the template for an entire ListView use the ItemContainerStyle to apply a Style to each item, which can contain a modified version of the template.

<ListView>
  <ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListViewItem">
            ...
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ListView.ItemContainerStyle>
</ListView>

The default template for ListViewItem is pretty complex so in order to preserve as much of the default behavior as possible and give you a good starting point, it's easiest to use Blend to create a copy for you.

In Blend, right-click your ListView and select:

Edit Additional Templates -> Edit Generated Item Container -> Edit A Copy...

and it will create a Style for you in the form above with the default template filled in. The selection appearance uses a few different elements in the template which you may want to modify - these can be seen by selecting the Selected state in the States panel in Blend and drilling into the highlighted items in the Objects panel.

Solution 2

I've found out another solution that might be helpful for others: override specific brush resources in App.xaml. It works without cloning any default style, and is just as simple as:

<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="myColor1"/>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="myColor2"/>

Of course, there are more bushes that can be overriden, and a list of them can be found here: ListViewItem styles and templates.

Note that this approach changes the appearance for ALL ListViews in the application.

Comments

[Jeff Yates]

Thanks, this was exactly what I was looking for. I keep forgetting that I have Blend for Visual Studio to help with this stuff.