Annoying MouseOver effekt with ListView and GridView

Today at work, I ran into an issue with the ListView which contains a GridView. If the mouse hovers over the ListView, it shows a little annoying blue border at the top, as you can see in the screenshots below. The other sides of the controls show the border as well, but thinner as on top, so you cannot see these without more zooming.

Image1

After researching the project’s xaml files (At first, I suspected the styles or templates), it turned out that this is default behavior. To reproduce, use the following xaml code with a blank wpf project.


<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="myTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                 </Grid.ColumnDefinitions>
                <Border Grid.Column="0" BorderThickness="1,0,1,1" SnapsToDevicePixels="True" BorderBrush="Black" Margin="-6,0,-6,0">
                    <TextBlock Grid.Column="0" Text="{Binding}"/>
                </Border>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView BorderThickness="1" Background="Transparent" Width="200" Height="200">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="100" Header="TestColumn" CellTemplate="{StaticResource myTemplate}">                    
                    </GridViewColumn>                  
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>


As you can see, the ListView shows the same blue border.

Image2

Furthermore, if a value for the BorderThinkness property of the ListView Control higher than 1 is used, the border is gone.

Image4

So a small and fast – but ugly – workaround is, to set the the BorderThikness property to the value 1.00001 (If only one value is given the property parses it to any border) directly or with a separated style:


<Style TargetType="{x:Type ListView}">
    <Setter Property="BorderThickness" Value="1.00001"/>
</Style>

Could anyone explain to me why the control creates this blue border?

Advertisements
This entry was posted in Development, WPF and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s