Search code examples
wpflistviewexpression-blend

ListView control and blue border highlight


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.


Solution

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