0
votes

I have a listbox where the items are styled using a ResourceDictionary style which is then attached to the ItemContainerStyle property. This gives my ListBoxItems a BorderThickness of let's say 1.

Now I want to collapse the items individually, so I use Visibility.Collapsed but for some reason the border that the ItemContainerStyle has created does not vanish with the rest of the list box item. It is as if it has created a layer behind my item and this remains despite the item being collapsed.

How do I set the ListBoxItem's (or this extra layer's) BorderThickness to 0 at run-time?

Regards sk

3
Does your item really collapse? i.e. does the total height of the item change correctly? if not, the borderthickness will not be the only problem to tackle. - Simon D.
The item does collapse. But the border remains :( - NT_
Sounds like you're collapsing the UI object that represents your item, and not the container. The container is a layer that contains your UI object and adds additional styling for when your item is selected, hovered, etc... The container operates on the ListViewItem type. Whereas the UI element is defined by a DataTemplate and assigned to the ListBox.ItemTemplate property. It operates on the type of the items in your source collection. Try defining your border in the ItemTemplate instead of the ItemContainerStyle. - bedo

3 Answers

0
votes

try using a custom triggers:

    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="Visibility" Value="Collapsed">
                <Setter Property="BorderThickness" Value="0,0,0,0"/>
            </Trigger>
            <Trigger Property="Visibility" Value="Visible">
                <Setter Property="BorderThickness" Value="0,0,0,1"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Obviously change your border thickness values, but this should do the trick (or something very close to this)

0
votes

I tried to reproduce the issue, but found that the border does collapse as expected:

<StackPanel>
  <StackPanel.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibility" />
    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
      <Setter Property="BorderBrush" Value="Black" />
      <Setter Property="BorderThickness" Value="1" />
    </Style>
  </StackPanel.Resources>

  <CheckBox x:Name="_show"
            Content="Show Item 2"
            IsChecked="True" />

  <ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle}">
    <ListBoxItem Content="Item 1" />
    <ListBoxItem Content="Item 2">
      <ListBoxItem.Visibility>
        <Binding ElementName="_show"
                 Path="IsChecked"
                 Converter="{StaticResource BooleanToVisibility}" />
      </ListBoxItem.Visibility>
    </ListBoxItem>
    <ListBoxItem Content="Item 3" />
  </ListBox>
</StackPanel>

Are you certain the ListBoxItem is the object being collapsed (as opposed to the UI object in the ListBoxItem)?

-1
votes
foreach(ListBoxItem item in listBox1.Items){
   item.BorderThickness = new Thickness(0);
}

This is the answer but I wouldnt recommend because you cant undo the style to bring back what was original instead you should choose some different approach with databinding on the basis of certain states.