Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF ListView has a one pixel border around the internal layout panel. How do I get rid of it?

I have a ListView that goes something like this:

<ListView 
    x:Name="SeriesListView"
    SnapsToDevicePixels="True"
    ItemsSource="{Binding Items}"
    BorderBrush="Transparent" BorderThickness="0"
    Padding="0" Margin="0" 
    VerticalContentAlignment="Top"
    Background="Purple"
    LostFocus="ListView_LostFocus"
    >

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:LDSeriesPanel
                SnapsToDevicePixels="True" 
                MaxWidth="{Binding ElementName=itControl,Path=ActualWidth}"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                MinHeight="{x:Static local:LDSeriesPanel.MIN_HEIGHT}" 
                MinWidth="{x:Static local:LDSeriesPanel.MIN_WIDTH}"
                Margin="0"
                Background="Aquamarine"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

When it's empty, the Width and Height of the custom panel I've defined is 15 x 15. I can confirm these are the actual dimensions at runtime. However, the ListView itself has dimensions of 17 x 17 (that is, a one pixel border between the panel and the ListView).

Starting from the custom panel and walking up the tree, I get the following ancestors:

  • ItemsPresenter: 15x15
  • ScrollViewer: 15x15
  • Grid: 15x15
  • ScrollViewer: 15x15
  • Border: 17x17
  • ListView: 17x17

If I change the Padding on the ListView to -1, it removes the border but causes several other issues.

I'm hoping to avoid retemplating the entire ListView. Everything else is working fine. Is there some way I can Remove this one pixel border, perhaps through a style?

like image 870
Scott Whitlock Avatar asked Jun 20 '10 17:06

Scott Whitlock


2 Answers

It is really simple, if you have blend you can right click the listview and choose to edit the template and remove the padding from the border. You can do this directly in xaml. Since I want all of my listviews not to have this border, I create a resource file called MyprojectnameResources.xaml in the root of the project with this content.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="ListViewNewTemplate" TargetType="{x:Type ListBox}">
    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="True">
        <ScrollViewer Focusable="False" Padding="{TemplateBinding Padding}">
            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </ScrollViewer>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsGrouping" Value="True">
            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<!-- Resource dictionary entries should be defined here. -->

Then you can simply use this template with any listview you want

<ListView Width="1020" Height="764" ItemsSource="{Binding Destinations}" ItemTemplate="{DynamicResource DestinationDataTemplate}"  Canvas.Top="0" Canvas.Left="0" BorderThickness="0" Template="{DynamicResource ListViewNewTemplate}"  />
like image 100
Alkampfer Avatar answered Oct 13 '22 15:10

Alkampfer


A quick and dirty solution (emphasis on "dirty"):

<ListView Padding="-1" />
like image 33
theartwebreathe Avatar answered Oct 13 '22 14:10

theartwebreathe