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.

Answer 1

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.

Answer 2

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.