WPF Listbox cannot show contents if a single item goes beyond the controls height

Question

How do I get a ListBox scrollbar to work when a single item is bigger than the size of the listbox.

I have a ListBox with a custom ItemTemplate. The template shows a message and timestamp for taking notes. The problem is if the operator creates a really long note the ListBox scroll bar does not appear and will not allow you to scroll up and down to see the entire note. The control works perfectly for several small notes. If you add a small note after the big note the scroll bar appears and you can scroll down but you cannot see the entire first note, just the part that was visible before and than it snaps to the next note as you scroll.

<ListBox Grid.Row="1" ItemsSource="{Binding Notes}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="1" Padding="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="3">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding CreatedDateTime, StringFormat={}{0:h:mm:ss tt}}" Margin="0,0,20,0"/>
                            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Note}" TextWrapping="Wrap" FontSize="20"/>

                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Pictures to help explain.

Answer 1

I tried the ScrollViewer but it ended up causing extra problems. I had to start routing scroll events and than touch events etc.

In the end I found a simple property to set. On the ListBox set the 'ScrollViewer.CanContentScroll="False"'.

This changes the scrolling behaviour and the content is no longer cut off. All the events also work.

I really don't understand why this works but I think it has to do with the ListBox and how it tries to optimize the performance by not rendering items off the screen. I think this disables that performance enhancement but makes the scrolling work because it has now rendered space for each item.