WrapPanel lays out items in one long horizontal line (displaying scroll bars) instead of wrapping lines

Question

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition/>
  <RowDefinition Height="40"/>
</Grid.RowDefinitions>

<c:SearchTextBox Grid.ColumnSpan="2" .../>

<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
  <ListBox 
    ItemsSource="{Binding Categories}" 
    IsSynchronizedWithCurrentItem="True" 
    ... />
</ScrollViewer>

<!-- Here is what I'm talking about:-->
<ListBox ItemsSource="{Binding Products}"
  IsSynchronizedWithCurrentItem="True" Grid.Column="1" Grid.Row="1">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

What I want is that the items in the right column should be laid out to fill window width, and then create a new line, that's exactly what WrapPanel is made for.
The problem is, that the WrapPanel lays out the items in just one line showing an horizontal scroll bar beneath whereas all the items are 'hidden' in the right side exceeding the window's size.

How can I prevent that?

Terry

what happens if you remove the scrollviewer? the items still expand to the right with an horizontal scrolling? – Monadism

@Daniel you got me wrong. The ScrollViewer wraps the first ListBox there is 2 ListBoxes representing a master-detail scenario. The problem is with the 2nd ListBox that uses the WrapPanel as a its ItemsPanelTemplate. – Terry

Answer 1

You need to make the horizontal scrollbar of the second ListBox disable.

<ListBox ItemsSource="{Binding}" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
....
</ListBox>

EDIT

Addtionally, there is reason that you use ScrollViewer for the first ListBox? Why I ask is that ListBox already has ScrollViewer internally, of which default Visibility is Auto.

Sarnen

To clarify why this happens, if the ListBox has horizontal scroll bars enabled (which they are by default) then it tells its children to measure themselves in infinite horizontal space. By removing the scrollbars you force the WrapPanel to use a finite width and so it will actually wrap. – Orthodox