Question

I’m creating an application that uses a couple of ListView controls. I have a particular color scheme I’m going with and I’m noticing that, when the mouse enters a ListView control, there is a thin, blue border highlight around it.

I can’t figure out where this is being generated. I am using Expression Blend to modify the controls, but none of the components of the ListView control, that I can find, have a definition for this blue color. In fact, nothing within the ListView control has a Trigger or State for focus visual style which is the way the control is behaving.

Answer 1

Try this, should do the trick:

<ListView Background="Transparent" BorderThickness="0" />

If you want the styling solution here it is:

<Style x:Key="{x:Type ListView}" TargetType="{x:Type ListView}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListView}">
        <Border Name="Border"
          BorderThickness="1"
          BorderBrush="#888888"
          Background="#FFFFFF">
          <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsGrouping"
                   Value="true">
            <Setter Property="ScrollViewer.CanContentScroll"
                    Value="false"/>
          </Trigger>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Border"
                    Property="Background"
                    Value="#AAAAAA"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ListViewItem}" TargetType="{x:Type ListViewItem}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBoxItem}">
        <Border 
          Name="Border"
          Padding="2"
          SnapsToDevicePixels="true"
          Background="Transparent">
          <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#DDDDDD"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#888888"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Play with the Border inside the ListView style and with the trigger for is IsSelected inside the ListViewItem style (you can change the border size or just the color.