WFP Textblock in Listbox not clipping properly

Question

Her's what I want: A listbox whose items consist of a stackpanel with two textblocks. The textblocks need to support wrapping, the listbox should not expand, and there should be no horizontal scrollbar. Here's the code I have so far. Copy and paste it into XamlPad and you'll see what I'm talking about.

<ListBox Height="300" Width="300" x:Name="tvShows">
    <ListBox.Items>
        <ListBoxItem>
            <StackPanel>
                <TextBlock Width="{Binding ElementName=tvShows, Path=ActualWidth}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
                <TextBlock Width="{Binding ElementName=tvShows, Path=ActualWidth}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
            </StackPanel>
        </ListBoxItem>
        <ListBoxItem>
            <StackPanel>
                <TextBlock Width="{Binding ElementName=tvShows, Path=ActualWidth}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
                <TextBlock Width="{Binding ElementName=tvShows, Path=ActualWidth}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
            </StackPanel>
        </ListBoxItem>
    </ListBox.Items>
</ListBox>

This seems to be doing the job of keeping the textblocks from growing, but there's one problem. The textblocks seem to be slightly larger than the listbox, causing the horizontal scrollbar to appear. This is strange because their widths are bound to the lisbox's ActualWidth. Also, if you add a few more items to the listbox (just cut and paste in XamlPad) causing the vertical scrollbar to appear, the width of the textblocks do not resize to the vertical scrollbar.

How do I keep the textblocks inside the listbox, with or without the vertical scrollbar?

Answer 1

You could work around the problem like this:

  <ListBox.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="Margin" Value="0 0 -6 0" />
        <Setter Property="Padding" Value="0 0 6 0" />
    </Style>
  </ListBox.Resources>

This might not work well if the fontsize changes. Another (and probably better) way is to disable the scrollbar completely:

<ListBox x:Name="tvShows" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 2

There are two ways of doing this, but I think what you really want is to disable the horizontal scrollbar, which is done with an attached property:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...

You can then remove the width bindings on the TextBlocks.

Your other option is to bind the TextBlocks widths to the ScrollContentPresenter's ActualWidth via RelativeSource bindings:

<ListBox Height="300" Width="300" x:Name="tvShows" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.Items>
        <ListBoxItem>
            <StackPanel>
                <TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
                <TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
            </StackPanel>
        </ListBoxItem>
        <ListBoxItem>
            <StackPanel>
                <TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
                <TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}" TextWrapping="Wrap">Lost is an American live-action television series. It follows the lives of plane crash survivors on a mysterious tropical island.</TextBlock>
            </StackPanel>
        </ListBoxItem>
    </ListBox.Items>
</ListBox>