Border around ListView when IsEnabled is false

1.2k views Asked by At

When setting IsEnabled to False on a ListView I get a one pixel thick border around the control, with color #F0F0F0 (on Win7).

I'm suspecting that it's one of the SystemColors kicking in. How do I set this borders BorderThickness to 0, or failing that, which of the SystemColors do I override in my style to change it to the same as the control background?

I'm sure there are redundant rows in here, because I've been adding and removing things trying to solve the problem

<ListView ItemsSource="{Binding Path=Types}" SelectedItem="{Binding Path=SelectedType}" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsEnabled="{Binding Path=TypeCategoryIsSelected}" ItemContainerStyle="{StaticResource LVItemStyle}" BorderThickness="0" Background="{StaticResource aBackground}" SelectionMode="Single">


</ListView>

<SolidColorBrush x:Key="aBackground" Color="#FFFFE7" />

<DataTemplate x:Key="tDefaultTemplate">
    <Border BorderBrush="#CDCDCD" BorderThickness="1" Background="#FFFFFF" Width="325" Margin="15,2,15,2" HorizontalAlignment="Stretch">
        <DockPanel Margin="1,1,1,1" Height="28" HorizontalAlignment="Stretch" Width="Auto">
            <DockPanel.Background>
                <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                    <GradientStop Color="#F2EFEF" Offset="0.0" />
                    <GradientStop Color="#F6F5F5" Offset="0.5" />
                    <GradientStop Color="#F8F8F8" Offset="1.0" />
                </LinearGradientBrush>
            </DockPanel.Background>
            <TextBlock Margin="20,0,0,0" DockPanel.Dock="Left" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Path=Name}" />
        </DockPanel>
    </Border>
</DataTemplate>

<DataTemplate x:Key="tSelectedTemplate">
    <Border BorderBrush="#DDA4AB" BorderThickness="1" Background="#FFFFFF" Width="325" Margin="15,2,15,2" HorizontalAlignment="Stretch">
        <DockPanel Margin="1,1,1,1" Height="28" HorizontalAlignment="Stretch" Width="Auto">
            <DockPanel.Background>
                <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                    <GradientStop Color="#FFE0E3" Offset="0.0" />
                    <GradientStop Color="#FFE8EA" Offset="0.5" />
                    <GradientStop Color="#F6EAEB" Offset="1.0" />
                </LinearGradientBrush>
            </DockPanel.Background>
            <TextBlock Margin="20,0,0,0" DockPanel.Dock="Left" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Path=Name}" />
        </DockPanel>
    </Border>
</DataTemplate>

<Style TargetType="{x:Type ListViewItem}" x:Key="LVItemStyle">
    <Setter Property="ContentTemplate" Value="{StaticResource tDefaultTemplate}" />
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFE7"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FFFFE7" />
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="ContentTemplate" Value="{StaticResource tSelectedTemplate}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="{StaticResource aBackground}" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="{x:Type ListView}" x:Key="LVStyle">
    <Setter Property="Background" Value="{StaticResource aBackground}" />
    <Setter Property="BorderThickness" Value="0" />
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFE7"/>
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="BorderBrush" Value="#FFFFE7"/>
            <Setter Property="Background" Value="{StaticResource aBackground}" />
        </Trigger>
    </Style.Triggers>
</Style>
1

There are 1 answers

3
Samuel Slade On

Ok, I've done some investigation and managed to find the cause of the problem (and a runtime resolution). I've ran out of time though so I will reveal my findings in the hopes you can finish off the investigation.

Firstly, I used a tool called Snoop, which allows you to dig down into the rendered WPF and see values of all controls and display each layer. Using this, I managed to find that your ListView control contains a Border control. That Border has a Padding value of 1, which is where your border is coming from (see below). Using Snoop's feature of changing runtime property values, I set this to 0 and sure enough, the border was gone.

Cause of issue as seen through Snoop

Chances are, you can control this in your Style somewhere. Either that, or perhaps one of the styles you are already using is causing it. I would try it out on a ListView without anything set (other than some basic items, size and disabled). This may help you find out if it's something you've caused or something internal within the ListView control.

If you are unable to find a way to fix this issue directly, you could try templating your ListView control by creating your own ControlTemplate, which should then give you complete control over how it is rendered (though this may turn out to be a fair bit of work).