8
votes

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?

4

4 Answers

3
votes

I just had a look at the default template for ListView, indeed the Border has an explicit padding of 1... so I don't think you can do it without redefining the template. Anyway, it's not very difficult : just copy the default template using a tool like StyleSnooper or ShowMeTheTemplate (I think Blend can do it too), and change what you need...

13
votes

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}"  />
6
votes

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

<ListView Padding="-1" />
4
votes

The simplest solution for me was to set the Border's thickness to 0, like:

<ListBox BorderThickness="0" />

No templates required...