none
How to remove the border on ListBox?

    Question

  • The ListBox class contains a Border element which has a padding set to 1. Setting the BorderThickness of the ListBox doesn't change this.

    I want to remove this border padding. The following XAML snippet shows it. Paste it into XamlPad and you'll see a single pixel lime green border around the listbox item, which prevents it from lining up with the TextBlock text on the left.

    XamlPad's visual tree explorer shows an element called "Bd" of type Border which has its padding set to 1.

    <StackPanel xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>

      <StackPanel Orientation="Horizontal">

        <StackPanel>

          <TextBlock Text="TextBlock"/>

        </StackPanel>

        <ListBox BorderThickness="0" Margin="0" Padding="0" Background="Lime">

          <ListBox.ItemsPanel>

            <ItemsPanelTemplate>

              <VirtualizingStackPanel VerticalAlignment="Top" Background="Yellow"/>

            </ItemsPanelTemplate>

          </ListBox.ItemsPanel>

          <ListBoxItem>ListItem</ListBoxItem>

        </ListBox>

      </StackPanel>

    </StackPanel>

    Wednesday, January 31, 2007 1:22 PM

Answers

  • you can use StyleSnooper or Blend to get a copy of the control template.

    here is one from StyleSnooper with padding property set to '0'

    <Style TargetType="ListBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib">
      <Style.Resources>
        <ResourceDictionary />
      </Style.Resources>
      <Setter Property="Panel.Background">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.WindowBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderBrush">
        <Setter.Value>
          <SolidColorBrush>#FF7F9DB9</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderThickness">
        <Setter.Value>
          <Thickness>1,1,1,1</Thickness>
        </Setter.Value>
      </Setter>
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility">
        <Setter.Value>
          <x:Static Member="ScrollBarVisibility.Auto" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility">
        <Setter.Value>
          <x:Static Member="ScrollBarVisibility.Auto" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.CanContentScroll">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Setter Property="Control.VerticalContentAlignment">
        <Setter.Value>
          <x:Static Member="VerticalAlignment.Center" />
        </Setter.Value>
      </Setter>
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBox">
            <Border BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" Name="Bd" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True" Padding="0">
              <ScrollViewer Focusable="False" Padding="{TemplateBinding Control.Padding}">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
              </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="UIElement.IsEnabled">
                <Setter Property="Panel.Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                <Trigger.Value>
                  <s:Boolean>False</s:Boolean>
                </Trigger.Value>
              </Trigger>
              <Trigger Property="ItemsControl.IsGrouping">
                <Setter Property="ScrollViewer.CanContentScroll">
                  <Setter.Value>
                    <s:Boolean>False</s:Boolean>
                  </Setter.Value>
                </Setter>
                <Trigger.Value>
                  <s:Boolean>True</s:Boolean>
                </Trigger.Value>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    Wednesday, January 31, 2007 2:47 PM

All replies

  • one way is to change the template
    Wednesday, January 31, 2007 1:50 PM
  • Which template? How?
    Wednesday, January 31, 2007 2:36 PM
  • you can use StyleSnooper or Blend to get a copy of the control template.

    here is one from StyleSnooper with padding property set to '0'

    <Style TargetType="ListBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib">
      <Style.Resources>
        <ResourceDictionary />
      </Style.Resources>
      <Setter Property="Panel.Background">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.WindowBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderBrush">
        <Setter.Value>
          <SolidColorBrush>#FF7F9DB9</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderThickness">
        <Setter.Value>
          <Thickness>1,1,1,1</Thickness>
        </Setter.Value>
      </Setter>
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility">
        <Setter.Value>
          <x:Static Member="ScrollBarVisibility.Auto" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility">
        <Setter.Value>
          <x:Static Member="ScrollBarVisibility.Auto" />
        </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.CanContentScroll">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Setter Property="Control.VerticalContentAlignment">
        <Setter.Value>
          <x:Static Member="VerticalAlignment.Center" />
        </Setter.Value>
      </Setter>
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBox">
            <Border BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" Name="Bd" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True" Padding="0">
              <ScrollViewer Focusable="False" Padding="{TemplateBinding Control.Padding}">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
              </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="UIElement.IsEnabled">
                <Setter Property="Panel.Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                <Trigger.Value>
                  <s:Boolean>False</s:Boolean>
                </Trigger.Value>
              </Trigger>
              <Trigger Property="ItemsControl.IsGrouping">
                <Setter Property="ScrollViewer.CanContentScroll">
                  <Setter.Value>
                    <s:Boolean>False</s:Boolean>
                  </Setter.Value>
                </Setter>
                <Trigger.Value>
                  <s:Boolean>True</s:Boolean>
                </Trigger.Value>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    Wednesday, January 31, 2007 2:47 PM
  • You can just set the ListBox's BorderThickness to 0
    Thursday, February 01, 2007 2:46 PM
  • Hi Josh

    If you look at the XAML I posted, you can see that the ListBox border thickness *IS* set to zero!

    ListBox has an internal Border object with thickness set to 1, even when you set the border thickness of the listbox to another value.

    However, the problem can be solved either by templating as was suggested above, or by subclassing the listbox and changing the internal border thickness to zero using VisualTreeHelper to get at it.

    Cheers,

    MikeS.

    Friday, February 02, 2007 11:52 AM
  • Mike,

    Oh yea, I missed that.  Oops!  What about setting the ListBox's BorderBrush to Transparent?  [I'd test this if I wasn't at work...]

    Friday, February 02, 2007 5:13 PM
  • Have you tried to use ItemsControl instead of ListBox? I solved this problem by replacing ListBox with ItemsControl and everything works fine.
    Friday, May 07, 2010 1:34 PM
  • You can try this style for the ItemContainerStyle:

    <Style TargetType="ListBoxItem" x:Key="MyItemContainerStyle">
       <Setter Property="Margin" Value="0"/>
       <Setter Property="Padding" Value="0"/>
    </Style>
    Monday, June 14, 2010 8:14 PM